我正在使用 Chart.js,我想要一个半圆环图,如下图所示。但我没能改变馅饼的厚度。我尝试了属性innerRadius,但它仍然不起作用
这是我的代码
public getHalfDoughnutChart(records) {
let data = {
labels: ["Worked Hours","Remaining Hours"],
datasets: [{
label: 'Today\'s Worked Hours',
data: [records.length? records[0].duration.hour: 0,9],
backgroundColor: [
'rgba(75, 174, 79, 1)',
'rgba(255, 255, 255, 0)'
]
}]
};
let options = {
circumference: Math.PI,
rotation: 1.0 * Math.PI,
innerRadius: "10%",
legend: {
display: false
},
layout:{
padding:40
},
}
return this.getChart(this.halfDoughnutCanvas.nativeElement, "doughnut", data, options);
}
getChart(context, chartType, data, options?) {
return new Chart(context, {
type: chartType,
data: data,
options: options
});
}
您应该在
percentageInnerCutout
对象中使用 options
属性
let options = {
circumference: Math.PI,
rotation: 1.0 * Math.PI,
percentageInnerCutout: 10,
legend: {
display: false
},
layout:{
padding:40
},
}
您还可以检查这个问题如何使用ChartJs改变圆环图的厚度?
P.S. 据我了解,这取决于版本,所以
如果 Chart.js 版本 > 2.0 使用
cutoutPercentage
否则使用
percentageInnerCutout
在图表 JS 2.0 中它应该看起来像这样
var options = {
cutoutPercentage: 40
};
您可以设置切口选项来更改圆环图的内半径
options: {
cutout: 30, // Set cutout in pixels
}
或者您可以按以下百分比设置剪切
options: {
cutout: "30%", // Set cutout in percentage
}