Chart.js - IndexSizeError：索引或大小为负或大于允许的数量

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

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

还有其他人有类似的问题吗？谢谢 ：-）

Answer 1

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

要修复此错误，请确保在创建图表之前您的画布可见且大小合适。例如，如果图表位于选项卡中，则在创建图表之前等待该选项卡可见。如果它在扩展面板中，请等待它完全扩展（将其放入动画的回调函数中将是解决此问题的正确方法）

您可以通过将画布大小设置为 0 来复制错误

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

在您的情况下似乎发生的是清除浏览器缓存会延迟图表渲染，以便在创建图表时画布具有正确的大小。验证这一点的一种简单方法是setTimeout延迟创建图表。