谁能告诉我为什么我的chart.js图表在闪烁?请看这个截屏视频。
https://www.screencast.com/t/J8demDuX
在视频中看起来很慢,但实际上变化非常快。你会在控制台中看到高度和宽度的变化,但我没有任何代码在javascript中强制它改变。
而且这种情况有时也会发生,这取决于浏览器的大小。使画布变小只是一个临时的解决方案,但当我调整浏览器的大小时,它仍然是可复制的。
有什么建议吗?
谁能告诉我为什么我的chart.js图表在闪烁?请看这个截屏视频。
https://www.screencast.com/t/J8demDuX
在视频中看起来很慢,但实际上变化非常快。你会在控制台中看到高度和宽度的变化,但我没有任何代码在javascript中强制它改变。
而且这种情况有时也会发生,这取决于浏览器的大小。使画布变小只是一个临时的解决方案,但当我调整浏览器的大小时,它仍然是可复制的。
有什么建议吗?
5条答案
按热度按时间vyswwuz21#
我的图表也有类似的问题。我发现它发生在同一画布上重新创建图表时。
如果在同一画布上多次重新创建图表,请尝试调用
函数,然后再重新建立图表。
希望这对你有帮助
4nkexdtk2#
我的图表也有类似的问题。我发现当我们不将responsive设置为false时会发生这种情况。请确保显式设置它
在选项响应中:假的
huwehgph3#
这是ChartJs版本的问题。直到2. 7. 0才有这个问题,它在最新版本中得到解决,不再闪烁。
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js
irlmq6kh4#
对我来说,解决方案是将组件 Package 到React.memo中
fdbelqdn5#
我在3.8.0版本也遇到过类似的问题。其他的答案对我都不起作用,但解决方案相当容易。我的css代码中有一个打字错误。
如果将maintainAspectRatio设置为false,则必须在样式表中正确定义canvas元素的高度和宽度。
canvas元素可能会尝试获取父容器的高度和宽度,如果父容器没有(正确地)设置这些属性,它会尝试从上层容器获取这些属性,依此类推。如果没有可用的值,canvas会开始闪烁。
尝试将画布 Package 在div容器中并正确设置属性,画布应停止闪烁。
例如: