2013-02-22 18 views
8

1ページに約6つのチャートがあり、そのうちの1つは他の5つのテーマとは異なるテーマを持つ必要があります。個別に作業するテーマがありますが、初期化された2つ目のテーマはすべてのチャートに適用されます。Highcharts.js - 複数のテーマが同じページにありますか?

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

+2

Cあなたはデモを見せますか?おそらく 'Highcharts.setOptions()'を使用しています。これは、呼び出し後に作成されたすべてのチャートのオプションを設定します。 –

+2

はい、まさに私がやっていたことです。私はあなたのコメントを読んだ後、私はsetOptions()呼び出しをチャートを作成する関数の中に移動し、今は動作します:) –

+0

ハハ、素晴らしい! :) –

答えて

8

Ricardoのコメントを読んだあと、$(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({}); 

}); 
9

ベストプラクティスは、現在お使いの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)); 

あなたが設定することができます。この方法必要に応じて各グラフの個別のテーマを設定します

関連する問題