logo标签列表

Chart.js 闪烁问题

javascriptchart.js
3

有人能告诉我为什么我的chart.js图表会闪烁吗？请看这个屏幕录像。

https://www.screencast.com/t/J8demDuX

视频中看起来很慢，但实际上它变化非常快。您将在控制台中看到高度和宽度的变化，但我没有任何JavaScript代码强制其更改。

而且它只会在浏览器大小不同时发生。使画布变小只是一个临时解决方法，但当我调整浏览器大小时，它仍然可以重现。

有什么建议吗？

可能是你代码中的第37行...但这只是一个猜测 - undefined
5个回答
15

我的图表也遇到了类似的问题。我发现当在同一个画布上重新创建图表时会出现这个问题。

如果您在同一个画布上多次重新创建图表，请尝试调用 

    .destroy();

在重新创建图表之前，在您的图表上运行函数。

希望这有所帮助。

2

我曾遇到同类问题。后来发现，如果不将“responsive”参数设置为false就会出现这种情况。请确保显式地进行设置。

在选项中加入：responsive: false

0

我曾经遇到过版本3.8.0的类似问题。其他答案对我都不起作用，但解决方案却很简单。我的CSS代码中有一个打字错误。

如果maintainAspectRatio设置为false，则必须在样式表中正确定义画布元素的高度和宽度。

如果父容器没有这些属性（正确）设置，则画布元素可能会尝试获取父容器的高度和宽度，然后从上面的容器获取这些属性，以此类推。如果没有可用值，则画布开始闪烁。

尝试将画布包装在div容器中并正确设置属性，画布应该停止闪烁。

例如：

<div id="canvasWrapper">
   <canvas id="canvasExample"></canvas>
</div>

#canvasWrapper{
   width: 100%;
   height: 40vh;
}
0
对我来说，解决方案是将组件包装成React.memo。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接