Highcharts: исчезать plotLines на основе наведения на маркер - PullRequest
Новая
       27

Highcharts: исчезать plotLines на основе наведения на маркер

2 голосов
/ 05 июня 2019

У меня есть точечная диаграмма с серией.Некоторые наблюдения имеют соответствующие предельные значения, которые я добавил как PlotLines.Скажем, есть 2 уникальных PlotLines, и каждое наблюдение разброса принадлежит только одному из них.Как дополнительное осложнение, существует несколько рядов рассеяния, так что это должно работать со всеми из них.

Если на графике есть 2 plotLines, когда пользователь наводит курсор на одну из точек рассеяния любого ряда,Я только хочу, чтобы сюжетная линия, принадлежащая этой точке, оставалась видимой, а остальные - исчезали.

Я знаю, что об этом много просят и, возможно, это невозможно.Я начал возиться с этим из примера, который нашел здесь: Highcharts: Добавить сюжетные линии, основанные на включенных сериях .Я изменил скрипту к своей проблеме, показывая 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'
  }]
});

1 Ответ

0 голосов
/ 05 июня 2019

Вы можете использовать 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

...