change bach chart background color dynamisch in highcart

Question

Ich erstelle ein Balkendiagramm mit dem Highcharts Plugin, wo ich die Hintergrundfarbe des Balkendiagramms dynamisch ändern möchte, nicht die Farbe der Balken.

Grundsätzlich habe ich 2 verschiedene Themen 1 ist weiß und andere ist schwarz. Wenn ich also Schwarz auswähle, sollte sich die Hintergrundfarbe des Balkendiagramms in Schwarz ändern und wenn Weiß ausgewählt wird, sollte es in Weiß geändert werden. Ich habe im Highcharts-Plugin gesucht, kann aber nicht herausfinden, wie ich die Hintergrundfarbe dynamisch ändern kann.

Bitte helfen Sie mir, dieses Problem zu lösen, ich habe keine Ahnung, wie diese verfolgt

zu tun ist mein Code für Balkendiagramm: 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 Hintergrund wird ingespeichert, die manuell aktualisiert werden kann:

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

Live-Demo: http://jsfiddle.net/uwwgfu3a/

Answer 2

Ihre Die beste Option besteht darin, alles in eine Funktion mit einem Argument zu verpacken, das die Farbe definiert,

dann Sie kann machen für #black und #white

fiddle

---

im Fall, dass Sie nur das Diagramm onLoad und ein Listener auf Klick registrieren möchten Hintergrund auswählen, ohne rerendering Verwendung:

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

fiddle