Chart.js画布切断甜甜圈描边

Question

我正在使用Chart.js创建一个甜甜圈图，但是遇到了一个问题，其中甜甜圈上的笔触被画布对象切断了。 画布上的填充/边距尚未为我解决问题。 有什么想法吗？

JSFiddle 在这里

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像素，所以实际上这是ChartJS中的错误 。 ChartJS 2.0.0的当前Alpha解决并解决了此问题。 在画布上绘制图表时，未考虑segmentStrokeWidth ，这导致其大于画布。

该版本的outerRadius是将图形的outerRadius减去笔触宽度的一半：

var strokeWidth = 5;

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

...

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

小提琴的例子