javascript - Chart.js 和 Canvas 有问题
问题描述
我目前正在使用 Graph.js 渲染图形,它正在处理初始渲染,但是直到我按下 setTimeformats 按钮以便在同一画布上显示另一个图形,它给了我错误:画布已经在使用中。必须先销毁 ID 为“0”的图表,然后才能重新使用画布。我是否正确使用它?我应该如何销毁图表以便在同一画布上使用其他图表?帮助将不胜感激。
import React, { useRef, useEffect, useState } from "react";
import { historyOptions } from "../chartConfig/chartConfig";
import Chart from 'chart.js/auto';
interface Props{
data:any
}
const ChartData:React.FC<Props> = ({ data}) => {
const chartRef = useRef<HTMLCanvasElement | null>(null);
const { day, week, year, detail } = data;
const [timeFormat, setTimeFormat] = useState("24h");
const determineTimeFormat = () => {
switch (timeFormat) {
case "24h":
return day;
case "7d":
return week;
case "1y":
return year;
default:
return day;
}
};
useEffect(() => {
if (chartRef && chartRef.current && detail) {
const chartInstance = new Chart(chartRef.current, {
type: "line",
data: {
datasets: [
{
label: `${detail.name} price`,
data: determineTimeFormat(),
backgroundColor: "rgba(174, 305, 194, 0.5)",
borderColor: "rgba(174, 305, 194, 0.4",
pointRadius: 0,
},
],
},
options: {
...historyOptions,
},
});
if (typeof chartInstance !== "undefined") chartInstance.destroy();
}
});
const renderPrice = () => {
if (detail) {
return (
<>
<p className="my-0">${detail.current_price.toFixed(2)}</p>
<p
className={
detail.price_change_24h < 0
? "text-danger my-0"
: "text-success my-0"
}
>
{detail.price_change_percentage_24h.toFixed(2)}%
</p>
</>
);
}
};
return (
<div className="bg-white border mt-2 rounded p-3">
<div>{renderPrice()}</div>
<div>
<canvas ref={chartRef} id="myChart" width={250} height={250}></canvas>
</div>
<div className="chart-button mt-1">
<button
onClick={() => setTimeFormat("24h")}
className="btn btn-outline-secondary btn-sm"
>
24h
</button>
<button
onClick={() => setTimeFormat("7d")}
className="btn btn-outline-secondary btn-sm mx-1"
>
7d
</button>
<button
onClick={() => setTimeFormat("1y")}
className="btn btn-outline-secondary btn-sm"
>
1y
</button>
</div>
</div>
);
};
export default ChartData;
解决方案
解决此问题的一种方法是使用新的状态变量,并useEffect
在每次 timeFormat 更改时快速删除并重新创建画布元素。这里的一些关键点:
- 正如@CallumMorrisson 所提到的,为了理解这种方法,阅读和理解React 文档中关于完整跳过钩子的这一部分非常重要。
useEffect
- 直接使用
day
,name
,week
,year
属性useEffect
而不是整个data
变量可确保仅在必要时重新创建图表实例,而不是在每次渲染时重新创建。function 也是如此determineTimeFormat
,如果可能,应该在组件范围之外定义这些类型的函数。
const determineTimeFormat = (
timeFormat: string,
day: any,
week: any,
year: any
) => {
switch (timeFormat) {
case "24h":
return day;
case "7d":
return week;
case "1y":
return year;
default:
return day;
}
};
interface Props {
data: any
}
const ChartData: React.FC<Props> = ({ data }) => {
const chartCanvasRef = useRef<HTMLCanvasElement | null>(null);
const { day, week, year, detail } = data;
const { name } = detail;
const [timeFormat, setTimeFormat] = useState("24h");
const [isRebuildingCanvas, setIsRebuildingCanvas] = useState(false);
// remove the canvas whenever timeFormat changes
useEffect(() => {
setIsRebuildingCanvas(true);
}, [timeFormat]); // timeFormat must be present in deps array for this to work
/* if isRebuildingCanvas was true for the latest render,
it means the canvas element was just removed from the dom.
set it back to false to immediately re-create a new canvas */
useEffect(() => {
if (isRebuildingCanvas) {
setIsRebuildingCanvas(false);
}
}, [isRebuildingCanvas]);
useEffect(() => {
const chartCanvas = chartCanvasRef.current
if (isRebuildingCanvas || !chartCanvas) {
return;
}
const chartInstance = new Chart(chartRef.current, {
type: "line",
data: {
datasets: [
{
label: `${name} price`,
data: determineTimeFormat(timeFormat, day, week, year),
backgroundColor: "rgba(174, 305, 194, 0.5)",
borderColor: "rgba(174, 305, 194, 0.4",
pointRadius: 0,
},
],
},
options: {
...historyOptions,
},
});
return () => {
chartInstance.destroy();
}
}, [day, isRebuildingCanvas, name, timeFormat, week, year]);
return (
<>
{isRebuildingCanvas ? undefined : (
<canvas ref={chartCanvasRef} id='myChart' width={250} height={250} />
)}
<button onClick={() => setTimeFormat("24h")}>24h</button>
<button onClick={() => setTimeFormat("7d")}>7d</button>
<button onClick={() => setTimeFormat("1y")}>1y</button>
</>
);
};
export default ChartData;
推荐阅读
- r - 使用 rvest 从网页中抓取特定值
- javascript - ForEach 重复(重复结果)
- ios - 下面的 UIRefreshControl 块视图
- javascript - 从匿名函数调用 forEach 并将结果存储到变量
- java - 出于某种原因使用 .setText() 时重叠
- java - 当我试图获取网页的损坏链接时,没有在 webdriver java 中获取所有链接
- microsoft-teams - Power Automate - 在自适应卡片中使用变量
- elasticsearch - 用户:anonymous is not authorized" 执行 es:ESHttpGet
- python - 如何通过 PuTTY 使用 sudo 命令
- c# - 不知道如何解决“非泛型类型 'ArrayList' 不能与类型参数一起使用”?