reactjs - 在 ESNet React-timeseries-charts 图表上启用缩放

Question

我目前正在玩 ESnet's react timeseries charting components ，其具体目标是允许用户放大显示的图表，如 currency example 所示。 .

根据their documentation据我对示例源代码的最佳理解，如果呈现如下所示的图表，应该就足够了:

<ChartContainer timeRange={series.range()}>
   ...
</ChartContainer>

将 enablePanZoom={true} 添加到 props 以启用缩放。例如:

<ChartContainer timeRange={series.range()} enablePanZoom={true}>
   ...
</ChartContainer>

但是，这不起作用，我不明白为什么。我想文档或示例中的某些内容让我困惑:

• 在本地运行可缩放示例可以按预期工作
• 在启用缩放标志的情况下运行不可缩放示例不起作用

因此，问题是:如何使react-timeseries-charts图表可缩放？

编辑:结果答案很明显:必须使用onTimeRangeChanged并更新状态，否则，嗯，噗。 ..

Answer 1

在他们的例子中，他们使用onTimeRangeChanged={this.handleTimeRangeChange}

如果您查看示例源代码，则位于 https://github.com/esnet/react-timeseries-charts/blob/master/src/website/packages/charts/examples/currency/Index.js

他们将函数定义为

handleTimeRangeChange = timerange => {
    this.setState({ timerange });
};

你尝试过吗？