与其他图表/组件交互的股票工具

Question

基本上，我正在使用Reactjs包装器在Highcharts上运行highcharts-react-official应用程序。我正在定义一个高图Component，目标是生成包含具有不同设置和数据源的十几个图表的报告页面。我还想向其中添加highstock库存工具组件。我发现的问题是，当我单击某个组件（第一个选项，左上方）中的Indicators按钮时，所有组件中都会弹出弹出窗口。

图表组件

// (...) Imports

class CustomGUIChart extends Component {
  constructor(props) {
    super(props);
    const { data } = this.props;

    this.state = {
      options: {
        legend: {
          enabled: true
        },

        tooltip: {
          enabled: false
        },

        series: data.map((set, index) => ({
          ...set,
          id: `series-${index}`,
          type: "line",
          cursor: "pointer",
          marker: {
            enabled: false
          }
        })),

        stockTools: {
          gui: {
            enabled: true
          }
        }
      }
    };
  }

  render() {
    const { options } = this.state;

    return (
      <Card>
        <CardContent style={{ padding: 0 }}>
          <HighchartsReact
            highcharts={Highcharts}
            constructorType="stockChart"
            containerProps={{ className: "chart" }}
            options={options}
            allowChartUpdate
          />
        </CardContent>
      </Card>
    );
  }
}

CustomGUIChart.propTypes = {
  data: PropTypes.array.isRequired
};

export default CustomGUIChart;

页面内容多次调用图表组件

// (...) Imports

const chartData = mockData.map((series) => ({
  ...series,
  data: series.data.map((point) => {
    const dateArr = point[0].split('-');
    return [
      Date.UTC(dateArr[0], dateArr[1], dateArr[2]),
      point[1] * 100
    ];
  })
}));

function SectionContent() {

  return (
    <>
      <Grid item xs={12} sm={12}>
        <Paper>
          <CustomGUIChart
            data={chartData}
          />
        </Paper>
      </Grid>
      <Grid item xs={12} sm={12}>
        <Paper>
          <CustomGUIChart
            data={chartData}
          />
        </Paper>
      </Grid>
      <Grid item xs={12} sm={12}>
        <Paper>
          <CustomGUIChart
            data={chartData}
          />
        </Paper>
      </Grid>

    </>
  );
}

export default Content;

如何处理不同组件/图中的意外事件触发器？

Here是有效的演示：

Answer 1

您需要在每个图表中声明唯一的bindingsClassName。

navigation: {
  bindingsClassName: 'chart2'
}

---

实时演示： https://jsfiddle.net/BlackLabel/y5wxvukr/1/

相关线程： https://github.com/highcharts/highcharts/issues/10599

AP参考： https://api.highcharts.com/highstock/navigation.bindingsClassName