Question

我正在使用一个简单的区域图表，我希望在您将鼠标悬停在其上时有两种不同的填充颜色，这样左侧的图表为红色，右侧的图表为蓝色（密度较大）。悬停点x值。

我看到这就是你如何选择事件并使用鼠标悬停和鼠标移除来获取x和y值：

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

一旦将鼠标悬停在区域图表上，我似乎找不到从x值添加不同填充颜色的方法。 Threshold和negativeFillColor是一个很好的解决方案只有如果我想用y值做这个效果，但有什么方法我可以做一些像negativeFillColor / threshold工作的x-范围值？

由于

Answer 1

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

Maje the firts serie以及第一种颜色必须结束的位置，并使第二个系列具有空值，直到它必须开始新颜色。

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

像这样：

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

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

1 个答案: