javascript - Highcharts:根据悬停在标记上淡化 plotLines

Question

我有一个包含一系列的散点图。一些观察结果具有相应的极限值，我已将其添加为 PlotLines。假设有 2 个独特的 PlotLines，每个散点观察仅属于其中一个。更复杂的是，有多个散点系列，因此这必须适用于所有系列。

如果图表上有 2 条绘图线，当用户将鼠标悬停在任何系列的散点之一上时，我只希望属于该点的绘图线保持可见，而其他的则淡出。

我知道这要求很多，但可能无法实现。我已经开始摆弄这个，从我在这里找到的一个例子:Highcharts: Add plotlines based on enabled series .我已经针对我的问题修改了 fiddle ，显示了 2 个数据系列，'plotline' 变量中的数据指示 1 或 2。不过我不知道如何将这些数据链接到 plotLines，并使它们淡出解释。

JSFiddle:http://jsfiddle.net/7nghfemb/1/

var chart = Highcharts.chart('container', {

  yAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    plotLines: [{
        value: 50.5,
        color: 'red',
        width: 2,
        id: 'plot-line-1'
    },{
        value: 130.5,
        color: 'blue',
        width: 2,
        id: 'plot-line-2'
    }]
  },

  series: [{
    events: {
      show: function() {
        chart.yAxis[0].addPlotLine({
          value: 50.5,
          color: 'red',
          width: 2,
          id: 'plot-line-1'
        });
      },
      hide: function() {
        chart.yAxis[0].removePlotLine('plot-line-1')
      }
    },
    data: [
    {
        y: 29.9, 
        plotline: 1
    }, {
        y: 71.5,
      plotline: 2
    }, {
      y: 106.4,
      plotline: 1
    }, {
        y: 129.2,
      plotline: 1
    }],
    type: 'scatter'
  },
    {
    data: [
    {
        y: 145.9, 
        plotline: 2
    }, {
        y: 111.5,
      plotline: 2
    }, {
      y: 167.4,
      plotline: 1
    }, {
        y: 101.2,
      plotline: 2
    }],
    type: 'scatter'
  }]
});

Answer 1

您可以使用 mouseOver 和 mouseOut 事件来显示或隐藏绘图线:

plotOptions: {
    series: {
        point: {
            events: {
                mouseOver: function() {
                    var plotLines = this.series.yAxis.plotLinesAndBands;

                    plotLines.forEach(function(el, i) {
                        if (i === this.plotline - 1) {
                            el.svgElem.show();
                        } else {
                            el.svgElem.hide();
                        }
                    }, this);
                },

            }
        },
        events: {
            mouseOut: function() {
                var plotLines = this.yAxis.plotLinesAndBands;

                plotLines[0].svgElem.show();
                plotLines[1].svgElem.show();
            }
        }
    }
}

现场演示: http://jsfiddle.net/BlackLabel/vh1z97yr/

API 引用:

https://api.highcharts.com/class-reference/Highcharts.SVGElement#show

https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide