Highcharts：悬停散点图系列时如何更改线条颜色 [英] Highcharts: how to change line color when hovering a scatterplot series

问题描述

我有一张Highcharts散点图。图表对象的一些细节如下：

  plotOptions：{
 scatter：{
 lineWidth：1 ，
标记：{
半径：1，
符号：'circle'，
 fillColor：'＃800000'，
指示：{
悬停： {
 enabled：true，
 radius：0，
 radiusPlus：2，
 lineColor：'＃ff0000'，
 fillColor：'＃ff0000'
 } 
} 
}，
 states：{
 hover：{
 halo：false，
 lineWidthPlus：2，
} 
 
 
 
 
 
 
 
 
完整的工作示例是这里。 
我需要在悬停系列时更改线条颜色，但我无法做到这一点。这可能吗？ 
解决方案
您可以通过事件轻松实现此功能。 需要在用户将鼠标悬停在系列上时更新系列颜色属性 
 
 
  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.

                        
这篇关于Highcharts：悬停散点图系列时如何更改线条颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！