hightcharts图表-点击柱状图修改柱子的颜色

功能说明

要求点击柱状图，当前被点击柱子改变颜色，再次点击颜色恢复默认颜色。

先看效果图

方法一：绑定点击事件，修改属性

    plotOptions: {
        series: {
            cursor: 'pointer',
            // allowPointSelect: true,
            events: {
                click: function (e) {
                    let index = e.point.index;
                    console.log("您点击了第" + (index + 1) + "个柱子");
                    console.log('您点击的柱子是：' + e.point.category);
                    console.log('您点击您的数据列名字是：' + this.name);
                    console.log('您点击的数据列值是：' + e.point.y);
                    console.log('您点击的柱子的颜色是：' + e.point.color);

                    // 点击柱子变色： #7cb5ec 蓝色； #ffff00 黄色

                    if (e.point.series.data[index].color == '#ffff00') {
                        e.point.series.data[index].color = '#7cb5ec';//如果是黄色则还原蓝色
                    } else {
                        for (var i = 0; i < e.point.series.data.length; i++) {
                            if (i == index) {
                                e.point.series.data[i].color = '#ffff00';//把点击的柱子设为黄色其余变为蓝色
                            } else {
                                e.point.series.data[i].color = '#7cb5ec';
                            }
                            e.point.series.data[i].update(e.point.series.data[i]);
                        }
                    }
                }
            },
            // point: {
            //     events: {
            //         click: function (e) {
            //             console.log(e)
            //             let index = this.index;
            //             console.log("第二种：您点击了第" + (index + 1) + "个柱子");
            //             console.log('第二种：您点击的柱子是：' + this.category);
            //             console.log('第二种：您点击的数据列值是：' + this.y);
            //             console.log('第二种：您点击的柱子的颜色是：' + this.color);
            //         }
            //     }
            // },
        },
    },

注意：这种写法仅适用于只有一种数据列的情况，如果有多个数据列会报栈溢出的错，目前还不知道原因，而且这种写法一看就不正经不建议大家使用。（笑哭~~~）

方法二：设置属性 allowPointSelect: true并修改默认选中颜色 .highcharts-point-select { fill: red !important; }

    plotOptions: {
        series: {
            cursor: 'pointer',
            borderColor: '#ffffff',
            allowPointSelect: true,// 是否允许选中点
            events: {
                click: function (e) {
                    console.log(this)
                    console.log(e.point)
                    let index = e.point.index;
                    console.log("您点击了第" + (index + 1) + "个柱子");
                    console.log('您点击的柱子是：' + e.point.category);
                    console.log('您点击您的数据列名字是：' + this.name);
                    console.log('您点击的数据列值是：' + e.point.y);
                    console.log('您点击的柱子的颜色是：' + e.point.color);
                    console.log('您点击的柱子的颜色是：' + this.color);
                    console.log('您点击的数据列的索引是：' + this.index);
                }
            },
        }
    },

    .highcharts-point-select {
        fill: red !important;//修改选中状态的默认填充色，默认是灰色#cccccc
    }

注意：虽然看上去很容易，就加了两行代码，但要注意 allowPointSelect 这个属性是支持多选的，按住 Ctrl 再点击会出现多个列变色的情况，可以通过点击按钮的方式拿到多选的值，想了解更多去官网查看。

总结：工作中会遇到很多奇葩的业务逻辑，必须想办法去解决，还会走不少弯路，但不管怎样，总会有合适的解决方法，加油！