highcharts - Highcharts.js-同じページに複数のテーマがありますか？

Question

1ページに約6つのグラフがあり、そのうちの1つは他の5つとは異なるテーマを持っている必要があります。テーマは個別に機能していますが、初期化された2番目のテーマがすべてのチャートに適用されます。

チャートが使用するテーマを指定する方法はありますか？

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

このようにして、必要に応じてチャートごとに個別のテーマを設定できます