bartartの背景色をhighcartで動的に変更する

Question

Highchartsプラグインを使用して棒グラフを作成しています。棒グラフの背景色を棒グラフの色ではなく動的に変更したいのです。

基本的に私は2つの異なるテーマを持っています1は白で、他は黒です。黒を選択すると、棒グラフの背景色が黒に変わり、白を選択すると白に変わるはずです。 Highchartsプラグインで検索しましたが、背景色を動的に変更する方法がわかりません。

私は棒グラフのための私のコードです続き

にこれを行うにはどのように任意のアイデアを持っていない、この問題を解決するために私を助けてください：http://jsfiddle.net/8eJ4p/85/

$(function() { 
 
     $('#container').highcharts({ 
 
      chart: { 
 
       type: 'bar', 
 
       backgroundColor: "#000" 
 
      }, 
 
      title: { 
 
       text: 'Stacked bar chart' 
 
      }, 
 
      xAxis: { 
 
       categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
 
      }, 
 
      yAxis: { 
 
       min: 0, 
 
       title: { 
 
        enabled: false 
 
       }, 
 
       labels: { 
 
        enabled: false 
 
       } 
 
      }, 
 
      legend: { 
 
       enabled: false 
 
      }, 
 
      plotOptions: { 
 
       bar: { 
 
        dataLabels: { 
 
         enabled: true, 
 
         formatter: function() { 
 
          if(this.series.name != 'Filler') 
 
           return Math.round(this.percentage) + '%'; 
 
          else return ""; 
 
         } 
 
        } 
 
       }, 
 
       series: { 
 
        pointWidth: 18, 
 
        stacking: 'percent', 
 
        dataLabels: { 
 
         enabled: true, 
 
         inside: true, 
 
         align: 'right', 
 
         color: '#fff' 
 
        } 
 
       } 
 
      }, 
 
      tooltip: { 
 
       useHTML: true, 
 
       shared: true, 
 
       formatter: function() { 
 
        return '<i>' + this.points[1].x +'</i>: <b>'+ Math.round(this.points[1].percentage) +'%</b>'; 
 
       } 
 
      }, 
 
      series: [{ 
 
       name: 'background filler', 
 
       data: [7, 9, 8, 5, 10] 
 
      }, { 
 
       name: 'actual Value', 
 
       data: [5, 3, 4, 7, 2] 
 
      }] 
 
     }); 
 
    }); 
 

<script src="http://code.highcharts.com/highcharts.js"></script> 
 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="white" style="width: 60px; height: 20px; margin: 5px;float:left; background-color:skyblue;cursor:pointer">White</div> 
 
<div id="black" style="width: 60px; height: 20px; margin: 5px;background-color:red;float:left;cursor:pointer">Black</div> 
 

 
<div id="container" style="min-width: 310px; height: 250px; margin: 0 auto"></div>

Answer 1

ハイチャートの背景はに格納されています手動で更新することができます、：

chart.chartBackground.attr({ 
    fill: new_color 
}); 

ライブデモ：http://jsfiddle.net/uwwgfu3a/

Answer 2

あなた最良の選択肢は、色を定義する引数を持つ関数内のすべてをラップすることです。

チャートonLoadをレンダリングし、#blackのクリックでリスナーを登録して、あなただけの再レンダリングを使用せずに、バックグラウンドを選択したい場合は#white

fiddle

---

ことができます。

$('#white').click(function(){$('rect.highcharts-background').css('fill','#fff')}) 
$('#black').click(function(){$('rect.highcharts-background').css('fill','#000')}) 

fiddle