javascript - react Highcharts : Synchronized chart and tooltip is not highlighting the points

Question

我正在使用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);
    },
  }
}

现在，通过同步两个图表上的工具提示，此代码可以完美运行。但问题出在第一个图表中，它有两条线，当我将鼠标悬停在第一行上时，它会突出显示带有圆圈的点，但第二行没有突出显示。

我发现的原因是在 componendDidMount 的 point.highlight(e); 中

对于第二个系列，此行在悬停时出现错误:

更具体地说，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

Answer 1

问题是数据格式，x值应该以毫秒为单位:

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

现场演示:https://codesandbox.io/s/ovk25m493q