javascript - Chart.js - IndexSizeError : Index or size is negative or greater than the allowed amount

Question

我正在使用 Chart.js Arc 函数绘制圆环图。 有一段时间效果很好。但最近它开始抛出上述异常。

Chart.js Arc 函数中的以下行抛出异常:

ctx.arc(this.x, this.y, this.outerRadius, this.startAngle, this.endAngle);

这里的值如下:

x = 0, y = 0, outerRadius = -0.5, startAngle = 4.71XXX, endAngle = 4.71XXX

我猜 x 和 y 的零值或 outerRadius 的负值导致了问题。

奇怪的是，当我清除浏览器缓存并尝试相同的数据集时，它运行良好。 尽管服务器返回的数据集相同，但上述值不同。

x = 50, y = 25, outerRadius = 24.5, startAngle = 4.71XXX, endAngle = 4.71XXX

在前一种情况下，x 和 y 计算可能是在 canvas 渲染之前完成的。

其他人有类似的问题吗？ 谢谢:-)

Answer 1

这是因为您的图表在创建时(即调用 Chart(ctx).Doughnut 时)没有有限大小。图表宽度和高度为 0，outerRadius 变为 -segmentStrokeWidth/4(默认情况下为 2 - 因此 -0.5 )

要修复此错误，请确保您的 Canvas 可见且大小合适，然后再创建图表。例如，如果图表位于选项卡中，请等待选项卡可见，然后再创建图表。如果在展开面板中，等待它完全展开(放在动画的回调函数中才是正确的做法)

您可以通过将 Canvas 大小设置为 0 来重现错误

<canvas id="myChart" width="0" height="0"></canvas>

您的情况似乎是清除浏览器缓存会延迟图表呈现，以便在创建图表时 Canvas 具有正确的大小。验证这一点的一种简单方法是将您的图表创建包装在 setTimeout 中并延迟一些。