且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Highcharts:悬停散点图系列时如何更改线条颜色

更新时间:2022-10-22 23:10:28

您可以通过事件轻松实现此功能。 需要在用户将鼠标悬停在系列上时更新系列颜色属性

  events:{
mouseOver:function() {

this.chart.series [this.index] .update({
color:'red'
});
},
mouseOut:function(){

this.chart.series [this.index] .update({
color:#b0b0b0
});


$ / code $ / pre

这会改变系列的颜色,点是徘徊。

这里是更新到您的小提琴



希望这对你有所帮助。


I have a Highcharts scatterplot. Some details of the chart object are below:

plotOptions: {
scatter: {
    lineWidth:1,
    marker: {
        radius: 1,
        symbol:'circle',
        fillColor: '#800000',
        states: {
            hover: {
                enabled: true,
                radius:0,
                radiusPlus:2,
                lineColor: '#ff0000',
                fillColor: '#ff0000'
            }
        }
    },
    states: {
        hover: {
            halo:false,
            lineWidthPlus:2,
        }
    }
}
}

and the full working example is here. I need to change the line color when hovering the series, but I am unable to do it. Is this possible?

This can be easily achieved with events.

All you need is to update the series color property when user hovers on a series

events: {
    mouseOver: function () {

        this.chart.series[this.index].update({
             color: 'red'
        });
    },
    mouseOut: function () {

        this.chart.series[this.index].update({
            color: "#b0b0b0"
        });                           
     }
 }

This will change the color of the series of which the point is hovered.

here is update to your fiddle

Hope This has helped you.