如何检查chart.js的图表何时完全呈现在React中？
如何检查chart.js的图表何时完全呈现在React中？
提问于 2022-09-01 13:11:55
我希望显示图表图像，而不是反应图-2和chart.js中的图表。
但是，图像一开始从来没有完全呈现过。
export function App() {
const chartRef = useRef<ChartJS>(null);
const [chartImg, setChartImg] = useState<string>();
const ChartRef = () => <Chart ref={chartRef} type="line" data={data} />;
useEffect(() => {
const chart = chartRef.current;
if (!chart) return;
const img = chart.toBase64Image(); // just white background
setChartImg(img);
}, []);
const showImage = useCallback(() => {
const chart = chartRef.current;
if (!chartRef.current) return;
const img = chart.toBase64Image(); // Correct image is displayed
setChartImg(img);
}, []);
return (
<div>
<ChartRef />
<button type="button" onClick={showImage}>
Display Image
</button>
<img src={chartImg} alt="here" />
</div>
);
}在下面的代码(链接这里的密码箱)中，只有单击Display Image按钮才会显示图像。
我是否可以在useEffect上运行初始检查，并确保图像显示正确，而不是图表，而不必单击Display Image？
回答 1
Stack Overflow用户
发布于 2022-09-01 13:36:06
这是因为您试图在完成ami、mations和绘图之前读取画布，您需要将动画设置为false或使用onAnimationComplete回调：
options: {
animations: false
}options: {
animations: {
onComplete: ({initial}) => {
if (initial) savechart();
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73569943
复制相关文章
相似问题
腾讯云开发者
