Highcharts：基于悬停在标记上的淡化 plotLines

Question

我有一个带有系列的散点图。一些观察值具有相应的极限值，我已将其添加为 PlotLines。假设有 2 个唯一的 PlotLines，每个散点观察只属于其中一个。作为一个额外的复杂因素，有多个分散系列，所以这必须适用于所有这些。

如果图表上有 2 条 plotLines，当用户将鼠标悬停在任何系列的一个散点上时，我只希望属于该点的 plotLine 保持可见，而其他的 plotLine 消失。

我知道这要求很多，而且可能是不可能的。我已经开始摆弄这个，从我在这里找到的一个例子：Highcharts: Add plotlines based on enabled series。我已经针对我的问题修改了小提琴，显示了 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