Есть ли способ выделить одну конкретную серию в старших чартах?

Question

Я отрисовываю линейную диаграмму из нескольких серий, используя высокие графики в моем компоненте. У меня есть требование на этом графике: когда мы наведем курсор на любую серию, нужно выделить только эту конкретную серию.

У меня 5 рядов, скажем, l1-l5. Если я наведу курсор на l2, только l2 должен иметь непрозрачность 1, все остальные строки должны иметь непрозрачность 0.5. Проверьте ниже скриншот

Answer 1

Мое предложение изменить цвет всплывающей подсказки и цвет линии.Я использовал параметр всплывающей подсказки 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 - средство форматирования всплывающей подсказки

Fiddle

Answer 2

Вы можете использовать поведение всплывающей подсказки по умолчанию с функцией 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