Highcharts.js - 同一页面上的多个主题？ [英] Highcharts.js - multiple themes on same page?

问题描述

我在一页上有大约6张图表，其中一个需要与另外五个图表有不同的主题。我有主题单独工作，但第二个初始化适用于所有图表。

有没有方法可以指定图表使用哪个主题？

解决方案

<阅读里卡多的评论后，我意识到我只需在$（document）.ready调用中移动setOptions（）调用。

我的代码简化版：

  Highcharts.theme1 = {
图：{
 borderWidth：0，
}，
}; 
 
 var chart; 
 $（document）.ready（function（）{
 
 //应用主题
 var highchartsOptions = Highcharts.setOptions（Highcharts.theme1）; 
 
 //构建图表
图表= new Highcharts.Chart（{}）; 
 
}）; 
 
 Highcharts.theme2 = {
图：{
 borderWidth：5，
}，
}; 
 
 var chart2; 
 $（document）.ready（function（）{
 
 //应用主题
 var highchartsOptions = Highcharts.setOptions（Highcharts.theme2）; 
 
 //构建图表
图表= new Highcharts.Chart（{}）; 
 
}）; 
  

I have about 6 charts on one page, one of them needs to have a different theme from the other five. I have the themes working individually but the second one initialized is applied to all the charts.

Is there a way to specify which theme a chart uses?

解决方案

After reading Ricardo's comment I realized I just had to move the setOptions() call inside the $(document).ready call.

A much simplified version of my code:

Highcharts.theme1 = {
    chart: {
        borderWidth: 0,
    },
}; 

var chart;
$(document).ready(function() {

    // Apply the theme
    var highchartsOptions = Highcharts.setOptions(Highcharts.theme1);

    // Build the chart
    chart = new Highcharts.Chart({});

});

Highcharts.theme2 = {
    chart: {
        borderWidth: 5,
    },
};

var chart2;
$(document).ready(function() {

    // Apply the theme
    var highchartsOptions = Highcharts.setOptions(Highcharts.theme2);

    // Build the chart
    chart = new Highcharts.Chart({});

});

这篇关于Highcharts.js - 同一页面上的多个主题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！