Question

我正在使用组件中的高图绘制多系列折线图。我对此图表有一个要求，当我们将鼠标悬停在任何系列上时，只需突出显示该特定系列即可。

我有5条线的序列，例如l1-l5。如果我将鼠标悬停在l2上，则只有l2的不透明度为1。检查以下屏幕截图

Answer 1

您可以将默认的工具提示行为与formatter函数一起使用，以包括所有当前的序列点：

tooltip: {
    formatter: function() {
        var series = this.series.chart.series,
            resultStr = '<span style="color:' + this.point.color + '">\u25CF</span> ' + this.series.name + ': <b>' + this.point.y + '</b><br/>';

        series.forEach(function(s) {
            if (s !== this.series) {
                resultStr += '<span style="color:' + s.points[this.point.index].color + '">\u25CF</span><span style="color: #c6c6c6"> ' + s.name + ': ' + s.points[this.point.index].y + '</span><br/>';
            }
        }, this);

        return resultStr;
    }
}

实时演示：http://jsfiddle.net/BlackLabel/yxmne0s6/

API：https://api.highcharts.com/highstock/tooltip.formatter

Answer 2

我的主张也更改了工具提示颜色和线条颜色。我使用工具提示选项shared:true来收集所有意向，然后收集每个意向中的事件以获取正确的颜色。

let color = null,
colorIndex = null,
colors = ['rgba(200,150,168,0.5)', 'rgba(120,250,60,0.5)',
          'rgba(40,250,208,0.5)', 'rgba(90,10,208,0.5)'];

plotOptions: {
  series: {
    events: {
      mouseOver: function() {
        color = (colors[this.index]).replace('0.5', '1');
        colorIndex = this.index;
        this.chart.series[this.index].update({
          color: color
        });
      },
      mouseOut: function() {
        this.chart.series[this.index].update({
          color: colors[this.index]
        });
      }
    }
  }
},
tooltip: {
  useHTML:true,
  formatter: function() {
    s = '<b>' + this.points[0].key + '</b><br/>';

    this.points.forEach(function(point, index) {
      if (index !== colorIndex){
          s += '<span style="color:' + point.color 
            + ';margin-right:2px">\u25CF</span> <span style="color: #c6c6c6">' 
            + point.series.name 
            + ': <b>' + point.y + ' '  + '</b><br>';
       } else{
          s += '<span style="color:' + point.color 
            + ';margin-right:2px">\u25CF</span> <span style="color: #000">' 
            + point.series.name 
            + ': <b>' + point.y + ' '  + '</b><br>';
       }
    });
    return s;
  },
  shared: true
}

API - mouseOver / mouseOut

API - tooltip formatter

Fiddle

有什么办法可以突出高图表中的一个特定系列吗？

2 个答案: