Highcharts - 更改仅点击列的颜色答案

【问题标题】：Highcharts - change color of only clicked columnHighcharts - 更改仅点击列的颜色
【发布时间】：2014-05-09 08:40:02
【问题描述】：

我有一个使用 Highcharts.js 制作的柱形图。单击条形时，它的颜色变为橙色。但是当点击另一个条时，之前点击的条的颜色仍然是橙色。

我想要的是在点击一个栏时，所有其他栏的颜色都应该变成默认值。

 $('#container').highcharts({
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            point: {
                events: {
                    click: function(event) {
                        console.log(this);
                        this.update({ color: '#fe5800' }, true, false);
                        }
                }
            }
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

小提琴链接 - Demo.

提前致谢。

【问题讨论】：

标签： javascript jquery html highcharts

【解决方案1】：

2017 年更新：

现在有一种内置方法可以做到这一点：

 series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2, -1, -2, -3],
        color: 'steelblue',
        negativeColor: 'indianred',
        states: {
            select: {
                color: 'blue'
            }
        },
        allowPointSelect: true
    }]

小提琴：http://jsfiddle.net/nk1v22du/

【讨论】：

谢谢！不错的小提琴。此功能的官方文档不是很好。我发现我也可以指定“select：{borderWidth：4，borderColor：'#DDDDDD'}”。这也将响应数据，例如[ { y: 123, 选择：真 } ]。如果我重新初始化图表等，我需要这样做。
不错。在状态中，我们还可以添加“悬停：{颜色：'蓝色'}”

【解决方案2】：

您可以保存对上一个栏的引用，当单击下一个栏时，您可以恢复上一个栏的颜色。

$(function () {
    var previousPoint = null;
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                point: {
                    events: {
                        click: function(event) {
                            console.log(this);
                            if (previousPoint) {
                                previousPoint.update({ color: '#7cb5ec' });
                            }
                            previousPoint = this;
                            this.update({ color: '#fe5800' });
                            }
                    }
                }
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });

});

见http://jsfiddle.net/amyamy86/Xm4vW/1/

【讨论】：

【解决方案3】：

jsfiddle

var series = chart.series[0];
series.color = "#FF00FF";
chart.legend.colorizeItem(series, series.visible);
$.each(series.data, function(i, point) {
    point.graphic.attr({
        fill: '#FF00FF'
    });
});
series.redraw();

【讨论】：

第二次点击后左右移动鼠标看看效果
使用.each() 并在只需要更改一个时重新绘制图表的所有条似乎是矫枉过正。在处理具有很多点的图表时，如果看到性能下降，我不会感到惊讶。