基本上,我正在使用 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是一个工作演示:
最佳答案
您需要为每个图表声明唯一的bindingsClassName
。
navigation: {
bindingsClassName: 'chart2'
}
<小时/>
现场演示: https://jsfiddle.net/BlackLabel/y5wxvukr/1/
相关主题: https://github.com/highcharts/highcharts/issues/10599
美联社引用: https://api.highcharts.com/highstock/navigation.bindingsClassName
关于javascript - 库存工具与另一个图表/组件交互,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60818084/