Chart.js 画布切断了甜甜圈中风答案

【问题标题】：Chart.js canvas cuts off doughnut strokeChart.js 画布切断了甜甜圈中风
【发布时间】：2015-09-09 05:25:14
【问题描述】：

我正在使用 Chart.js 创建一个圆环图，但遇到了一个问题，即圆环上的笔划被画布对象截断。画布上的填充/边距并没有解决我的问题。有什么想法吗？

JSFiddle here

HTML

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

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);

【问题讨论】：

标签： javascript css canvas charts chart.js

【解决方案1】：

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

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

var strokeWidth = 5;

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

...

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

Fiddle Example

【讨论】：