javascript - Chart.js Canvas 切断 donut 笔划

Question

我正在使用 Chart.js 创建圆环图，但遇到了圆环上的笔划被 Canvas 对象 chop 的问题。 Canvas 上的填充/边距并没有为我解决问题。知道发生了什么事吗？

JSFiddle here

HTML

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

JS

var data = [{
    value: 30,
    color: "#F7464A"
}, {
    value: 50,
    color: "#E2EAE9"
}, {
    value: 100,
    color: "#D4CCC5"
}, {
    value: 40,
    color: "#949FB1"
}, {
    value: 120,
    color: "#4D5360"
}];

var options = {
    animation: true,
    segmentStrokeWidth : 5
};

var c = $('#myChart');
var ct = c.get(0).getContext('2d');
var ctx = document.getElementById("myChart").getContext("2d");

myNewChart = new Chart(ct).Doughnut(data, options);

Answer 1

因为您正在绘制的元素大于 400 像素，所以这实际上是一个 bug in ChartJS .当前的 ChartJS 2.0.0 Alpha 解决并修复了这个问题。在 Canvas 上绘制图表时未考虑 segmentStrokeWidth，这导致它比 Canvas 大。

此版本的修复方法是将图形的 outerRadius 减去笔画宽度的一半:

var strokeWidth = 5;

var options = {
    animation: true,
    segmentStrokeWidth : strokeWidth
};

...

myNewChart = new Chart(ct).Doughnut(data, options);
myNewChart.outerRadius -= (strokeWidth/2);

Fiddle Example