2012-03-26 14 views
9

ハイチャートのテーマを変更する際に問題があります。私はすべてのテーマを保持するための配列を作成し、選択リストonChangeイベントでそれらを変更しようとしています。Highchartsテーマを変更する(部分的に動作する)

var highcharts_theme = []; 

/* Default theme */ 
highcharts_theme.push({}); 

/* Dark Blue theme */ 
highcharts_theme.push({ 
    colors: ["#DDDF0D", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee", 
     "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"], 
    chart: { 
     backgroundColor: { 
      linearGradient: [0, 0, 250, 500], 
      stops: [ 
       [0, 'rgb(48, 48, 96)'], 
       [1, 'rgb(0, 0, 0)'] 
      ] 
     }, 
.... Shortened for brevity..... 

テーマを変更するには、私のコードは次のとおりです。

$('#theme-type').selectmenu({ width: 200 }).change(function (e) { 
     var themeIndex = parseInt($('#theme-type').val()); 
     Highcharts.theme = highcharts_theme[themeIndex]; 
     // Apply the theme 
     highchartsOptions = Highcharts.setOptions(Highcharts.theme); 
    }); 

私が午前問題は、例えば、私は空をテーマに切り替えた場合、それは大丈夫であるということですが、その後、他のテーマに変更し、空の背景はテーマの他の要素とともに残っています。

誰かがテーマを完全にリセットする正しい方法を知っていますか?

おかげ

答えて

16

あなたがテーマを設定するたびに、それは既存のテーマと合併し、ひいては存在しない任意のオプションは、新しいテーマでは既存のテーマから選択されます。これは常に望ましいとは限りません。

ハイチャートには、最初の読み込み時に設定されたデフォルト値に戻るオプションはありません。次のコードは、それが適用されている最初のテーマだかのように動作する新しいテーマを適用し、テーマをリセットした後、その機能

// Make a copy of the defaults, call this line before any other setOptions call 
var HCDefaults = $.extend(true, {}, Highcharts.getOptions(), {}); 

function ResetOptions() { 
    // Fortunately, Highcharts returns the reference to defaultOptions itself 
    // We can manipulate this and delete all the properties 
    var defaultOptions = Highcharts.getOptions(); 
    for (var prop in defaultOptions) { 
     if (typeof defaultOptions[prop] !== 'function') delete defaultOptions[prop]; 
    } 
    // Fall back to the defaults that we captured initially, this resets the theme 
    Highcharts.setOptions(HCDefaults); 
} 

を取得するために使用することができます。

Demo @ jsFiddle

+0

ありがとうございます!私はそれが期待されるように動作するようです。 – Steve

+0

あなたは大歓迎です@Steve私はちょうどフィドルを更新して、デフォルトの動作を強調し、これがどう変わるか –

4

あなたは色のオプションをすべて削除し、Highchartsをリロードした場合、それは戻って、デフォルトの基本テーマにデフォルト設定されますオブジェクト。以下の値をnullに設定すると、一旦リロードされた背景画像は表示されません。

plotBackgroundImage: null 
+1

これは私にも役立ちました。 – Makky

関連する問題