使用 React 功能组件，我无法找到一种方法来使用异步接收的动态数据对图表进行动画处理。下面的沙箱说明了模拟异步读取的计时器的问题。
运行示例代码时，您应该看到 5 个高度不断增加的垂直条以动画形式呈现。然后，5 秒后，它立即切换到 4 条下降高度。我希望有更新动画。
以下是我查看过的一些引用信息: CanvasJS React Demos :其中许多在初始绘制时动画，但我找不到一个在初始渲染后加载动态数据的动画。
Chart using JSON Data是一个具有动态数据但没有动画的演示。
查看 CanvasJS 论坛，我发现了几个链接，但没有一个链接涉及 React 功能组件
To update dataPoints dynamically and to animate chart, you can instantiate the chart, update dataPoints via chart-options and then call chart.render as shown in this updated JSFiddle.
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Animation test"
},
animationEnabled: true,
data: [{
type: "column",
dataPoints: []
}]
});
chart.options.data[0].dataPoints = [{ label: "Apple", y: 658 },
{ label: "Orange", y: 200 },
{ label: "Banana", y: 900 }];
chart.render();
这个示例是纯 JS 的，但我尝试将其原理应用到我的 React 功能组件中。为了更好地符合 React 最佳实践，我合并了用于存储数据的 useState Hook 和用于处理获取的 useEffect Hook 。但是，唉，我无法让我的沙箱使用动态数据进行动画处理。
我认为问题是 CanvasJS 期望仅在第一次渲染时制作动画，如Sanjoy in the CanvasJS forum on 7/19/2016所述.
我找到了this SO question from Jan 2015这表明:
My current ugly workaround is to reinstantiate the chart every time I update just to achieve that animation effect.
我希望情况在过去四年中有所改善，但如果这种黑客仍然是最好/唯一的方法，我需要一些关于如何每次重新实例化图表的指导 使用 React 功能组件。
最佳答案
要强制重新安装组件，请在要重新安装组件时传递不同的 key
<CanvasJSChart
key={dataPoints.toString()} // force a remount when `dataPoints` change
containerProps={containerProps}
options={options}
onRef={ref => (chart.current = ref)}
/>
关于reactjs - 如何使用 React 功能组件在 CanvasJS 中实现动态更新动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59361744/