Chart.js闪烁

z9smfwbn  于 2022-11-07  发布在  Chart.js
关注(0)|答案(5)|浏览(248)

谁能告诉我为什么我的chart.js图表在闪烁?请看这个截屏视频。
https://www.screencast.com/t/J8demDuX
在视频中看起来很慢,但实际上变化非常快。你会在控制台中看到高度和宽度的变化,但我没有任何代码在javascript中强制它改变。
而且这种情况有时也会发生,这取决于浏览器的大小。使画布变小只是一个临时的解决方案,但当我调整浏览器的大小时,它仍然是可复制的。
有什么建议吗?

vyswwuz2

vyswwuz21#

我的图表也有类似的问题。我发现它发生在同一画布上重新创建图表时。
如果在同一画布上多次重新创建图表,请尝试调用

.destroy();

函数,然后再重新建立图表。
希望这对你有帮助

4nkexdtk

4nkexdtk2#

我的图表也有类似的问题。我发现当我们不将responsive设置为false时会发生这种情况。请确保显式设置它
在选项响应中:假的

huwehgph

huwehgph3#

这是ChartJs版本的问题。直到2. 7. 0才有这个问题,它在最新版本中得到解决,不再闪烁。
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js

irlmq6kh

irlmq6kh4#

对我来说,解决方案是将组件 Package 到React.memo中

fdbelqdn

fdbelqdn5#

我在3.8.0版本也遇到过类似的问题。其他的答案对我都不起作用,但解决方案相当容易。我的css代码中有一个打字错误。
如果将maintainAspectRatio设置为false,则必须在样式表中正确定义canvas元素的高度和宽度。
canvas元素可能会尝试获取父容器的高度和宽度,如果父容器没有(正确地)设置这些属性,它会尝试从上层容器获取这些属性,依此类推。如果没有可用的值,canvas会开始闪烁。
尝试将画布 Package 在div容器中正确设置属性,画布应停止闪烁。
例如:

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

# canvasWrapper{

   width: 100%;
   height: 40vh;
}

相关问题