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

Question

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

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

Answer 1

在阅读了 Ricardo 的评论后，我意识到我只需要将 setOptions() 调用移到 $(document).ready 调用中。

我的代码的一个非常简化的版本：

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));

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