javascript - Highcharts - 悬停时 x 坐标之间的不同填充颜色

Question

我正在使用一个简单的面积图，当您将鼠标悬停在它上面时，我希望有两种不同的填充颜色，以便图表左侧为红色，右侧为蓝色(当前颜色)悬停点 x 值。

http://jsfiddle.net/PSdwb/6/

我发现这就是您接收事件并通过鼠标悬停和鼠标移出获取 x 和 y 值的方式:

        series: {
            point: {
                events: {
                    mouseOver: function() {
                        console.log('x: '+ this.x +', y: '+ this.y);
                    }
                }
            },
            events: {
                mouseOut: function() {
                    console.log(this);
                }
            }
        }

将鼠标悬停在面积图上后，我似乎找不到添加 x 值不同填充颜色的方法。仅当我考虑使用 y 值实现此效果时，阈值和 negativeFillColor 是一个很好的解决方案，但是有什么方法可以使诸如 negativeFillColor/threshold 之类的东西适用于一系列 x-值(value)观？

谢谢

Answer 1

正如塞巴斯蒂安所说，你必须使用 2 个系列，第一个结束第二个开始。

Maje 第一个系列，第一个颜色必须结束，并使第二个系列具有空值，直到它必须开始新颜色。

然后在 mouseOver 事件中，您可以按照 this link 中所述的方式更改图表的颜色。 :

像这样:

   plotOptions: {
        area: {
            lineWidth: 0
        },
        series: {
            point: {
                events: {
                    mouseOver: function() {
                        //change color
                    }
                }
            },
            events: {
                mouseOut: function() {
                    ///change color
                }
            }
        }
    },
    series: [            
    {
        data: [10, 9, 8, 7, 6],
    },{
        data:[null,null,null,null,6, 5, 4, 3, 2, 1, 0]
    }