React Highchart：同步图表和工具提示未突出显示点

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);
    },
  }
}

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

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

对于第二个系列，此行在悬停时会出错：

更具体地说，point.highligh(e) 正在调用顶部函数：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