Question

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

基本上我有2个不同的主题1是白色而其他是黑色。因此，如果我选择黑色，则条形图的背景颜色应更改为黑色，如果选择白色，则应将其更改为白色。我在Highcharts插件中搜索但我无法找到如何动态更改背景颜色。

请帮我解决这个问题，我不知道该怎么做

以下是我的条形码代码：http://jsfiddle.net/8eJ4p/85/

＆＃13;

$(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]
            }]
        });
    });

＆＃13;

<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>

＆＃13;

Answer 1

您最好的选择是使用定义颜色的参数将所有内容包装在函数中，

然后您可以渲染图表int rowAtPoint = table.rowAtPoint(SwingUtilities.convertPoint(null, mousePoint, table));并在点击onLoad和#black

时注册一个监听器

fiddle

如果您只想在不重新渲染的情况下选择背景：

#white

fiddle

Answer 2

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

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

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

在highcart中动态更改条形图背景颜色

2 个答案: