barchart arka plan rengini dinamik olarak highcart olarak değiştirin

Question

Çubukların rengini dinamik olarak değil, çubuk grafiğinin arka plan rengini değiştirmek istediğim Highcharts eklentisini kullanarak bir çubuk grafik oluşturuyorum.

Temelde 2 farklı tema var 1 beyaz ve diğeri siyah. Bu yüzden Siyah'ı seçersem, çubuk grafiğin arka plan rengi siyah olarak değişmeli ve beyaz seçtiyse, beyaza dönüşmelidir. Highcharts eklentisinde arama yaptım ama arka plan rengini dinamik olarak nasıl değiştireceğimi bulamıyorum.

çubuk grafik için benim kodudur i nasıl ardından bu

yapmak için herhangi bir fikrim yok, bana bu sorunu çözmek için yardım edin: 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

Highcharts arka planiçinde saklanır elle güncellenebilir:

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

Canlı tanıtım: http://jsfiddle.net/uwwgfu3a/

Answer 2

senin en iyi seçenek, her şeyi bir işlevi renk,

tanımlayan bir bağımsız değişken ile sarmak için grafiği onLoad işlemek ve #black için tıklama üzerinde bir dinleyici kayıt ve sadece yeniden işlenmesinden kullanmadan arka plan seçmek istediğiniz durumda #white

fiddle

---

edebilirsiniz:

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

fiddle