Question

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

有没有办法指定图表使用哪个主题？

Answer 1

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

我的代码的简化版本：

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({});

});

Answer 2

目前最佳做法是将主题与您的chart options合并：

chart1 = new Highcharts.Chart(Highcharts.merge(options1, theme1));

var options1 = {
    // options goes here
       chart: {
            renderTo: 'chart1',
            type: 'bar',
        },
        title: {
            text: 'Conversions'
        },
};

var theme1 = {
     // themes goes here
};

var chart1 = new Highcharts.Chart(Highcharts.merge(options1, theme1));

这样，如果您需要，您可以为每个图表设置单独的主题

Highcharts.js - 同一页面上的多个主题？

2 个答案: