与另一个交互的库存工具 chart/component

Question

基本上我是运行一个 Reactjs 应用程序 Highcharts 使用 highcharts-react-official 包装器。我正在定义一个 highchart 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;

如何在不同的环境中处理这个意外事件触发器components/charts？

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

与另一个交互的库存工具 chart/component

Stock tools interacting with another chart/component

javascript

reactjs

highcharts

react-highcharts

图表组件

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