javascript - 在 Highcharts 中动态更改条形图背景颜色

Question

我正在使用 Highcharts 插件创建条形图，我想动态更改条形图的背景颜色而不是条形图的颜色。

基本上我有 2 个不同的主题，一个是白色的，另一个是黑色的。因此，如果我选择黑色，则条形图的背景颜色应更改为黑色，如果选择白色，则应将其更改为白色。我在 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

Highcharts 背景存储在 chart.chartBackground 中，可以手动更新:

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

现场演示:http://jsfiddle.net/uwwgfu3a/