在HighCharts散点图中格式化悬停系列的所有标记 [英] formatting all the markers for the hovering series in a HighCharts scatterplot

问题描述

在悬停系列时，我想更改所有标记的显示范围(不仅是尖的标记)，还需要更改以下代码(

I want to change the appearange of all the markers (not only the one pointed) when hovering the series, but the following code (http://jsfiddle.net/fw852fy9/4/) does not work properly. What's wrong?

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

推荐答案

悬停状态仅适用于悬停的点.如果您想将所有标记都设置为悬停，则需要以编程方式更改其状态，例如在系列鼠标悬停/鼠标悬停上.

Hover state works only for the point which is hovered. If you want to set all the markers to be hovered, you need to change their state programmatically, e.g. on series 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/

这篇关于在HighCharts散点图中格式化悬停系列的所有标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！