Question

我有一系列散点图。一些观察值具有相应的极限值，我将其添加为PlotLines。假设有2个唯一的PlotLines，并且每个散点图仅属于其中一个。更为复杂的是，有多个散布图，因此必须与所有这些散布图一起使用。

如果图形上有2条plotLines，则当用户将鼠标悬停在任何系列的一个散点上时，我只希望属于该点的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

高图：根据标记上的鼠标悬停淡出情节线

1 个答案: