negativeColor 和悬停状态 - highchart.js

Question

当列的值为负时，我想使用不同的悬停颜色状态。我无法在 highchart.js 上找到解决方法来完成此操作，但我可能遗漏了什么？

我目前正在使用 negativeColor 和 states.hover.color 选项。

代码：

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    series: [{
        data: [5, -3, 4, -7, 2]
    }],
    plotOptions: {
            column: {
                negativeColor: 'red',
                states: {
                    hover:{
                        color: 'blue',
                    }
                }
            },
        },
});

Answer 1

您可以使用 mouseOver 回调函数并根据 y 值更改点的颜色。

    plotOptions: {
        column: {
            point: {
                events: {
                    mouseOver: function() {
                        this.graphic.attr({
                            fill: this.y < 0 ? 'black' : 'blue'
                        });
                    }
                }
            },
            negativeColor: 'red'
        }
    }

现场演示： https://jsfiddle.net/BlackLabel/9ctmf2ju/

API参考：

https://api.highcharts.com/highcharts/series.column.events.mouseOver

https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr

negativeColor 和悬停状态 - highchart.js

negativeColor and hover state - highchart.js

highcharts