javascript - 库存工具与另一个图表/组件交互

Question

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

如何在不同的组件/图表中处理这种意外事件触发？

Here是一个工作演示:

Answer 1

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

navigation: {
  bindingsClassName: 'chart2'
}

<小时/>

现场演示: https://jsfiddle.net/BlackLabel/y5wxvukr/1/

相关主题: https://github.com/highcharts/highcharts/issues/10599

美联社引用: https://api.highcharts.com/highstock/navigation.bindingsClassName