我正在使用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计算。
其他有类似问题的人？ 谢谢： - ）
答案 0 :(得分：3)
这是因为您的图表在创建时（即调用Chart(ctx).Doughnut时）的大小不一定。图表宽度和高度为0，outerRadius变为-segmentStrokeWidth / 4（默认情况下为2 - 因此-0.5）
要修复此错误，请确保在创建图表之前，画布是可见的并且大小合适。例如，如果图表位于选项卡中，请在创建图表之前等待选项卡可见。如果它在一个扩展面板中，等待它完全展开（将它置于动画的回调函数中将是正确的方法）
您可以通过将画布大小设置为0
来复制错误<canvas id="myChart" width="0" height="0"></canvas>
在您的情况下，似乎正在发生的事情是清除浏览器缓存会延迟图表呈现，以便在创建图表时画布具有正确的大小。验证这一点的一种简单方法是将图表创建包裹在setTimeout中，但有一些延迟。