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

Question

我目前正在玩 ESnet's react timeseries charting components, with the specific goal of allowing a user to zoom into a displayed chart, as in their currency example。

根据 their documentation 和我对示例源代码的最佳理解，它应该足够了，如果要渲染这样的图表：

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

将 enablePanZoom={true} 添加到道具以启用缩放。例如：

<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 });
};

你试过了吗？