【问题标题】:formatting all the markers for the hovering series in a HighCharts scatterplot格式化 HighCharts 散点图中悬停系列的所有标记
【发布时间】:2017-07-07 20:34:58
【问题描述】:

我想在悬停系列时更改所有标记(不仅是指向的标记)的外观,但以下代码 (http://jsfiddle.net/fw852fy9/4/) 无法正常工作。怎么了?

Highcharts.chart('container', {
        chart: {
            type: 'scatter'
        },
    plotOptions: {
      series: {
        lineWidth:1,
              states: {
                  hover: {
                      lineWidthPlus: 2,
            marker: {
              enabled: true,
              radius:3,
              states: {
                hover: {
                  fillColor:'#FF0000',
                  lineColor:'#00FF00',
                  lineWidth:3,
                  radius:12
                }
              }
            }  
                  }
              },
        marker: {
          enabled: true,
          radius:3,
          states: {
                  hover: {
              fillColor:'#FF0000',
              lineColor:'#00FF00',
              lineWidth:3,
              radius:12
              }
          }
        }
      }  
    },
    series: [{
      data: [[29.9, 71.5], [106.4, 129.2], [144.0, 176.0], [135.6, 148.5], [216.4, 194.1], [95.6, 54.4]]
    }]
});

【问题讨论】:

    标签: javascript highcharts formatting hover scatter-plot


    【解决方案1】:

    悬停状态仅适用于悬停的点。如果要将所有标记设置为悬停,则需要以编程方式更改它们的状态,例如在系列 mouseover/mouseout 上。

      series: [{
     stickyTracking: false,
    events: {
      mouseOver: function() {
        this.data.forEach(p => p.setState('hover'))
      },
      mouseOut: function() {
        this.data.forEach(p => p.setState())
      }
    },
    

    示例:http://jsfiddle.net/0zu9jmca/

    【讨论】:

    • 哇。这是一个优雅的解决方案。
    猜你喜欢
    • 2016-04-07
    • 2020-10-07
    • 1970-01-01
    • 2018-06-28
    • 2015-02-17
    • 1970-01-01
    • 2019-09-19
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多