React Highcharts同步多个组件

如何解决React Highcharts同步多个组件

我现在有这个带有4个相同的highcharts组件（图表）的react应用。

我以前有同步图表，但从未反应过。在查看了其他帖子之后，组件代码如下所示：但是它们并没有在应用程序中同步。我想我缺少div /容器名称的一些基本知识。所有四个图表组件：

import React from 'react'
import $ from 'jquery'
import Highcharts from 'highcharts'
import  positions  from '../data/positions.js';

var parsedData = []
positions.forEach(element => {
    parsedData.push(
        [
            element.index,element.CB_Points
        ]
    );
});


/**
 * A Chart button: tap the button to increase the count.
 */
class Chart extends React.Component {
  componentDidMount () {
    $(this.container).bind('mousemove touchmove touchstart',function (e) {
      var chart,point,i,event

      for (i = 0; i < Highcharts.charts.length; i = i + 1) {
        chart = Highcharts.charts[i]
        event = chart.pointer.normalize(e.originalEvent) // Find coordinates within the chart
        point = chart.series[0].searchPoint(event,true) // Get the hovered point

        if (point) {
          point.highlight(e)
        }
      }
    })

    Highcharts.Pointer.prototype.reset = function () {
      return undefined
    }

    Highcharts.Point.prototype.highlight = function (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
    }

    function syncExtremes (e) {
      var thisChart = this.chart

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

    const self = this

        const el = document.createElement('div')
        el.class = 'chart'
        self.container.appendChild(el)

        Highcharts.chart(el,{
          chart: {
            
          },title: {
            text: 'CB Points',margin: 0,},credits: {
            enabled: false
          },legend: {
            enabled: true
          },xAxis: {
            crosshair: true,events: {
              setExtremes: syncExtremes
            },type: 'datetime',visible: true,ordinal: true,labels: {
              format: ''
            }
          },yAxis: {
            title: {
              text: null
            }
          },tooltip: {
            positioner: function () {
              return {
                x: this.chart.chartWidth - this.label.width,// right aligned
                y: -1 // align to title
              }
            },borderWidth: 0,backgroundColor: 'none',pointFormat: '{point.y}',headerFormat: '',shadow: false,style: {
              fontSize: '18px'
            },series: [{
            data: parsedData,name: 'CB Points',type: 'line',color: Highcharts.getOptions().colors[0],fillOpacity: 0.3,tooltip: {
              
            }
          }]
        })
      }

  render () {
    return (
      <div ref={(container) => { this.container = container }} id='container' />
    )
  }
}
export default Chart

图表不同步工具提示或缩放。也许每个图表都是相同的？任何帮助