Reactjs 如何使用React功能组件在CanvasJS中设置动态更新动画？

使用React功能组件，我无法找到用异步接收的动态数据制作图表动画的方法。下面的沙盒演示了一个计时器模拟异步读取的问题

运行示例代码时，应该会看到5个高度不断增加的竖条动画。然后，5秒钟后，它立即切换到4巴的下降高度。我期待有更新动画

以下是我回顾过的一些参考信息： ：其中许多在初始绘制时设置动画，但我找不到在初始渲染后加载动态数据的动画

是一个演示，有动态数据，但没有动画

回顾CanvasJS论坛，我发现了几个链接，但没有一个是针对React功能组件的

他说：

要动态更新数据点并设置图表动画，您可以实例化图表，通过图表选项更新数据点，然后调用chart.render，如本更新文档所示

这个示例是纯JS的，但是我尝试将这个原则应用到我的React功能组件中。为了更好地配合React最佳实践，我合并了用于存储数据的

useState

钩子和用于处理获取的

useffect

钩子。但是，唉，我无法让我的沙盒使用动态数据来设置动画

我认为问题在于，CanvasJS希望只在第一次渲染时设置动画，如所述

我发现这表明：

我目前最糟糕的解决办法是每次我离开时重新整理图表 仅更新以实现该动画效果

---

我希望这种情况在过去四年中有所改善，但如果这种方法仍然是最好的/唯一的方法，我需要一些指导，告诉我如何在每次使用React功能组件时重新整理图表。

两个示例都很好

您总是可以通过某种调用来设置角色的动画。在本例中，我使用setInterval

var图；
window.onload=函数（）{
chart=newcanvasjs.chart（“chartContainer”{
标题：{
文字：“动画测试”
},
animationEnabled：没错，
数据：[{
键入：“列”，
数据点：[]
}]
});
chart.options.data[0].dataPoints=[{label:“Apple”，y:0}，
{标签：“橙色”，y:0}，
{标签：“香蕉”，y:0}]；
chart.render（）；
}
var max=0；
var s={c:0，i:0}；
函数ANIMATE（）{
如果（图表类型==‘未定义’）返回；
chart.options.data[0].dataPoints.forEach（函数（项、索引、数组）{
如果（指数==s.i）{
数组[index].y+=3；
S.C+；
}
如果（s.c>12）{
s、 i++；
s、 c=0；
如果（s.i==15）{s.i=0}
}
});
如果（最大值<12）{
chart.options.data[0].dataPoints.push（{label:“apple”+Math.random（），y:1+Math.random（）*10}）；
max++；
}
chart.render（）
}
setInterval（函数（）{
制作动画（）
}, 1)

我找到了部分答案。完整执行代码处于，但关键是延迟图表的初始呈现，直到状态变量指示数据可用：

  return (
<div className="App">
  {!initialized ? (
    <h1> Loading...</h1>
  ) : (
    <CanvasJSChart containerProps={containerProps} options={options} />
  )}
</div>

返回(
{！初始化了吗(
加载。。。
) : (
)}

))

---

这只是部分解决方案，因为后续的数据更新仍然不会产生动画。

要强制重新安装组件，请在重新安装组件时传递不同的

键

（chart.current=ref）}
/>

我的问题是关于如何通过React功能组件中的
animationEnabled
属性利用CanvasJS中内置的动画功能。这个答案并没有解决这个问题。请参考此沙盒：您需要处置（销毁）react图表组件，然后他们重新创建它。为此，您需要一个根应用程序类，然后创建子组件（chrts）。这是
唯一的方法
（使用react）不是针对本案例，而是针对manu其他人。在您的案例中，我看到了使用react的过程方法。看看
  return (
<div className="App">
  {!initialized ? (
    <h1> Loading...</h1>
  ) : (
    <CanvasJSChart containerProps={containerProps} options={options} />
  )}
</div>