问无法在HighCharts散点图中创建plotOptions.scatter.states.hover.marker
EN

Stack Overflow用户

提问于 2017-06-27 17:06:45

回答 1查看 142关注 0票数 0

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

highcharts

scatter-plot

国内短信0.038元/条起

99%到达率，支持发送验证码、通知和营销类短信，短信特惠低至 0.038元/条

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-06-27 20:49:25

我明白你是怎么搞糊涂的。这已被弃用，但文档不会在您链接的页面上显示它。如果你看这里：http://api.highcharts.com/highcharts/plotOptions.scatter.states.hover，你会看到标记在这个对象中被弃用了。

你想要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
    }
  ]
}]