React 组件中如何自动更新图表数据？-灵析社区
桃子爱吃玉米使用React封装的图表组件，如何实现自动更新图表数据？
我爱上班解决方案 Solution
在VChart中，可以调用updateSpec或者updateData进行图表更新。
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241116/cb8f39280e6e956174bcb06ce9cebc01.png)
你可以在初始化图表实例时，在React组件中使用ref保存图表实例。随后使用useEffect，将deps设置为数据更新的依赖项，在回调函数中调用图表实例的updateData实现数据更新。
VChart还提供了React-VChart封装：
"https://www.visactor.io/vchart/guide/tutorial_docs/Cross-term..." (https://link.segmentfault.com/?enc=WPHESt56YPew1gCHqpMWJA%3D%3D.DQZWMS2ss21JUNfAOVL%2BYfsKAI9eKZrTpxAeXGHTnO8XEfmrAby2d3b%2BbApixFvLYh3PtcBvR3yLgdhVVWqLnjI64YPEUdEEIpk%2FyZqFcJjTV7wtuplX5CYgAI3IGiHf)
你可以参考下面的代码示例，使用React-VChart实现图表数据更新。
代码示例 Code Example
代码参考 Code Example
点击 Update the data of bar chart 按钮，可以实现更新图表数据。
import "./styles.css";
import { BarChart } from "./BarChart";
import { LineChart } from "./LineChart";
import { AreaChart } from "./AreaChart";
import { getBarData } from "./bar-data";
import { useState } from "react";
const colorMaps = {
default: [
"#6690F2",
"#70D6A3",
"#B4E6E2",
"#63B5FC",
"#FF8F62",
"#FFDC83",
"#BCC5FD",
"#A29BFE",
"#63C4C7",
"#F68484"
],
red: [
"#c12e34",
"#e6b600",
"#0098d9",
"#2b821d",
"#005eaa",
"#339ca8",
"#cda819",
"#32a487"
]
};
export default function App() {
const [barData, setBarData] = useState(getBarData());
const [colors, setColors] = useState(colorMaps.default);
const handleUpdateBarData = () => {
setBarData(getBarData());
};
const handleUpdateColors = () => {
if (colors === colorMaps.default) {
setColors(colorMaps.red);
} else {
setColors(colorMaps.default);
}
};
return (
Update the data of bar chart
update colors
A Bar Chart
A Line Chart
A Area Chart
);
}
结果展示 Results
在线效果参考："https://codesandbox.io/s/visactor-vchart-react-demo-forked-js..." (https://link.segmentfault.com/?enc=6szSCkxNIGtkJnQWYJ3kvw%3D%3D.taqdAxg74y8sOG75Zwo24utb22JZkeM%2FugItChmmUvUgOWjiu9eKugpzWAAQHIHW88q3sLyef7MBvrMXh8am3ck91XKzPidbmSCWJNjtT5Q%3D)
"Sep-07-2023 11-08-34.gif" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241116/309dea3e7eb103bab8391a28962bd552.png)
相关文档 Related Documentation
react-vchart教程："https://www.visactor.io/vchart/guide/tutorial_docs/Cross-term..." (https://link.segmentfault.com/?enc=pyF82Xzvf7H1nqlA14huoA%3D%3D.oRCEIVN1TUpah9T4QX1rdw8LZjipXZYFrq04Hk5a8%2BsdU%2FbmYuOoRMPcFH6Dvl0RylA4QJqUZySZ2l%2BF77QzbXjGyxuHDuVvKQGBKO9ZEAWnZs%2BPZDqJDXhkpg7nO0mj)
github："https://github.com/VisActor/VChart" (https://link.segmentfault.com/?enc=L9%2BVV10W3Kds1YrHBqrvzg%3D%3D.lWlMz07%2BX3SbJdm5qEBwUBD%2F5KDpPJLhEaJP781bIe8WdMMSYBOSDq6Dzf0lTG%2B9)