无法在 HighCharts 散点图中制作 plotOptions.scatter.states.hover.marker

Question

According 到 HighCharts API，plotOptions.scatter.states.hover.marker 管理属于悬停系列的所有标记的外观。但是，在下面的玩具示例 (JSFiddle here) 中，我无法更改属于悬停系列的所有标记的外观（例如，将它们的颜色更改为绿色）。有什么问题？

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'scatter',
        },
        plotOptions: {
            scatter: {
                lineWidth:1,
                marker: {
                    radius: 1,
                    symbol:'circle',
                    fillColor: '#800000'
                },
                states: {
                    hover: {
                        lineWidthPlus: 2,
                        marker: {
                            enabled:true,
                            lineColor: '#00ff00',
                            fillColor: '00ff00',
                            lineWidth: 5
                        }
                    }
                }
            }
        },
    series: [{
        name: 'A',
        color: "#b0b0b0",
        data: [[38,42],[39,39],[35,45],[35,54],{x:36,y:35}]
        }, {
        name: 'B',
        color: "#b0b0b0",
        data: [[46,56],[47,67],[48,69],[50,55],{x:52,y:57}]
    }]
});
});

Answer 1

我知道你怎么会感到困惑。这已被弃用，但文档未在您链接到的页面上显示它。如果你看这里： http://api.highcharts.com/highcharts/plotOptions.scatter.states.hover ，你会看到 marker is deprecated in this object。

你想要plotOptions.scatter.marker.states.hover

http://jsfiddle.net/1wfotmoa/23/

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'scatter',
    },
    plotOptions: {
      scatter: {
        lineWidth: 1,
        marker: {
          radius: 1,
          symbol: 'circle',
          fillColor: '#800000',
          states: {
            hover: {
              lineColor: '#00ff00',
              fillColor: '#00ff00',
              lineWidth: 5
            }
          }
        },
        states: {
          hover: {
            lineWidthPlus: 2
          }
        }
      }
    },
    series: [{
      name: 'A',
      color: "#b0b0b0",
      data: [
        [38, 42],
        [39, 39],
        [35, 45],
        [35, 54], {
          x: 36,
          y: 35
        }
      ]
    }, {
      name: 'B',
      color: "#b0b0b0",
      data: [
        [46, 56],
        [47, 67],
        [48, 69],
        [50, 55], {
          x: 52,
          y: 57
        }
      ]
    }]
  });
});

编辑：要更改悬停时的所有标记，请使用 mouseOver 和 mouseOut 事件

series: [{
  events: {
    mouseOver: function() {
      this.update({
        marker: {
          radius: 5,
          fillColor: 'green'
        }
      });
    },
    mouseOut: function() {
      this.update({
        marker: {
          radius: 3,
          fillColor: 'red'
        }
      });
    }
  },
  name: 'A',
  color: "#b0b0b0",
  data: [
    [38, 42],
    [39, 39],
    [35, 45],
    [35, 54], {
      x: 36,
      y: 35
    }
  ]
}, {
  events: {
    mouseOver: function() {
      this.update({
        marker: {
          radius: 5,
          fillColor: 'green'
        }
      });
    },
    mouseOut: function() {
      this.update({
        marker: {
          radius: 3,
          fillColor: 'red'
        }
      });
    }
  },
  name: 'B',
  color: "#b0b0b0",
  data: [
    [46, 56],
    [47, 67],
    [48, 69],
    [50, 55], {
      x: 52,
      y: 57
    }
  ]
}]

http://jsfiddle.net/1wfotmoa/35/

无法在 HighCharts 散点图中制作 plotOptions.scatter.states.hover.marker

unable to make plotOptions.scatter.states.hover.marker in a HighCharts scatterplot

scatter-plot

highcharts