React Highchart: Синхронизированный график и всплывающая подсказка не выделяют точки - PullRequest
Новая
       11

React Highchart: Синхронизированный график и всплывающая подсказка не выделяют точки

0 голосов
/ 20 декабря 2018

Я использую highchart-react-official, я использую его, нарисуйте две диаграммы:

1) Линейный график с несколькими сериями

2) Столбчатая диаграмма.

Теперь яЕсли, если я наведу курсор на точку на первом графике, она должна отображать выделенную точку на обеих линиях первого и столбцового графиков на втором графике.Как синхронизированный график: http://jsfiddle.net/doc_snyder/51zdn0jz/6/

Это мой код: 

((H) => {
  H.Pointer.prototype.reset = () => undefined;

  /**
   * Highlight a point by showing tooltip, setting hover state and 
   draw crosshair
  */
  H.Point.prototype.highlight = function highlight(event) {
    event = this.series.chart.pointer.normalize(event);
    this.onMouseOver(); // Show the hover marker
    this.series.chart.tooltip.refresh(this); // Show the tooltip
    this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
  };

  H.syncExtremes = function syncExtremes(e) {
    const thisChart = this.chart;

    if (e.trigger !== 'syncExtremes') {
      // Prevent feedback loop
      Highcharts.each(Highcharts.charts, (chart) => {
        if (chart && chart !== thisChart) {
          if (chart.xAxis[0].setExtremes) {
            // It is null while updating
            chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
              trigger: 'syncExtremes',
            });
          }
        }
      });
    }
  };
})(Highcharts);


componentDidMount() {
  this.changeChart();

  ['mousemove', 'touchmove', 'touchstart'].forEach((eventType) => {
    document
      .getElementById('tab__charts')
      .addEventListener(eventType, (e) => {
        for (let i = 0; i < Highcharts.charts.length; i += 1) {
          const chart = Highcharts.charts[i];
          // let secSeriesIndex = 1;
          if (chart) {
            // Find coordinates within the chart
            const event = chart.pointer.normalize(e);

            // Get the hovered point

            chart.series.forEach(series => {
              const point = series.searchPoint(event, true);
              if (point) {
                point.highlight(e);
              }
            });
          }
        }
      });
  });
}

Некоторая важная конфигурация графика: 

tooltip: {
  enabled: true,
  useHTML: true,
  shared: true,
}

xAxis: {
  events: {
    setExtremes: (e) => {
      Highcharts.syncExtremes(e);
    },
  }
}

Теперь этот код работает отлично благодаря синхронизациивсплывающая подсказка на обоих графиках.Но проблема в первом графике, у него две линии, когда я наведите курсор мыши на первую строку, она выделяет точку с круглым кружком, но вторая линия не выделяется.

И причина, по которой я нашел этов point.highlight(e); в componendDidMount

Для второй серии эта строка дает ошибку при наведении: enter image description here

В частности, point.highligh(e) вызывает функцию top: H.Point.prototype.highlight = (), проверьте верхнюю часть вопроса, в этой функции вызов этой функции приводит к ошибке 

this.series.chart.tooltip.refresh(this);

Примечание: я постараюсь воспроизвести и создать jsfiddle или что-то в этом роде, но отправлю этопросто так, если кто-то может помочь понять это.

И я передаю массив объектов в данных серии, потому что мне нужна более информативная всплывающая подсказка о точке диаграммы: 

data: [{
    "x": "2018-12-23T11:00:09.311Z",
    "y": 107.54,
    "data": {
       "Toltip Info 1": "1,884,681,725",
       "Tooltip info 2": "158,039,757.99",
       "price":"107.54"
    }
}]

Вот демонстрациявыпуск: https://codesandbox.io/s/pk2w85jpk0

1 Ответ

0 голосов
/ 28 декабря 2018

Проблема в формате данных, x значения должны быть в миллисекундах: 

        data: [
          {
            x: new Date("2018-12-25T09:00:06.247Z").getTime(),
            y: 6609592859.48
          },
          ...
        ]

Демонстрационная версия: https://codesandbox.io/s/ovk25m493q

...