[英]How to clear/destroy Chart.js canvas when the chart is represented as a react JSX element
我在使用 chart.js 时遇到了这个问题,其中我有一个关于特定报告的图表。 当我将页面切换到包含 chartjs 元素的另一个页面并切换回来时,图表将图表数据点上的数据标签显示为“x:数字,y:数字”。 在阅读了一些关于此的内容后,我相信这是因为当我切换回原始图表时画布没有被正确重置。 我发现的使用 clear() 或 destroy() 命令的修复示例参考了图表画布。 示例: 销毁chart.js 条形图以在同一<canvas> 中重绘其他图形但是在react 中这有点棘手。 我的问题是,如何在绘制图形之前清除画布。 下面是用于绘制图形的图表组件。
cont Chart: FunctionComponent<Props> = ({data}) => {
const options = (): ChartOptions => ({
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: chartTooltips,
elements: chartElementsNoLines,
scales: {
xAxes: [
{
display: true,
id: 'x-axis-0',
ticks: {
suggestedMin: minMax.min,
suggestedMax: minMax.max,
maxTicksLimit: 7,
maxRotation: 0,
fontFamily: 'Roboto, sans-serif',
fontSize: 10,
autoSkip: true,
callback: value => currency(value, { precision: 0 }).format()
},
gridLines: {
display: false
}
}
],
yAxes: [
{
type: 'linear',
display: false,
ticks: {
min: 0,
max: maxY
},
id: 'y-axis-0',
gridLines: {
display: false
}
}
]
}
})
return (
<section>
<div className={classes.chartContainer}>
<HorizontalBar
data-cy="limit-chart"
data={data}
options={{ ...options(), ...annotationPlugin() }}
redraw={true}
height={80}
/>
</div>
</section>
)
}
我在重新渲染时遇到了数据和大小更改的问题,我找到了一种方法来强制更新它使用 ref ( profitChartRef.current.chartInstance.destroy(); ) 来销毁 chartInstance,然后渲染完全反映已更新内容的全新实例
export const ProfitReportChart = () => {
const profitChartRef = useRef();
if (profitChartRef?.current) {
profitChartRef.current.chartInstance.destroy();
}
return <Bar ref={profitChartRef} data={data} options={options} redraw/>;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.