【问题标题】:Highcharts: how to change line color when hovering a scatterplot seriesHighcharts:悬停散点图系列时如何更改线条颜色
【发布时间】:2016-04-07 03:55:45
【问题描述】:

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

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

完整的工作示例是here。 悬停系列时我需要更改线条颜色,但我无法做到。这可能吗?

【问题讨论】:

    标签: javascript highcharts scatter-plot


    【解决方案1】:

    这可以通过事件轻松实现。

    您只需在用户将鼠标悬停在系列上时更新系列颜色属性

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

    这将改变悬停点的系列的颜色。

    here is update to your fiddle

    希望这对您有所帮助。

    【讨论】:

    • 我是唯一一个在两个系列之间悬停并拥有此代码时遇到“闪烁”的人吗?
    • @HalvorStrand 是否禁用粘性跟踪?默认情况下启用。如果您有多个系列并且它们通过相同的 xAxis 点,我建议禁用粘性跟踪。
    【解决方案2】:

    谢谢strikers

    @HalvorStrand 是否禁用粘性跟踪?默认情况下启用。如果您有多个系列并且它们通过相同的 xAxis 点,我建议禁用粘性跟踪。 – 前锋 1 月 4 日 5:23

    我一直在努力解决这个问题,直到我把它放在 plotoptions 之后 series: {stickyTracking: false}, 问题解决了

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多