angular-chart.js圆环图:如何更改圆环弧的宽度？

Question

我正在使用angular-chart.js库(https://jtblin.github.io/angular-chart.js/)来实现圆环图.

如何更改甜甜圈弧的宽度？

Answer 1

您只需在图表选项中设置"cutoutPercentage"选项即可.圆环图的默认值为50.接近100的数字将在中间有更多的空白空间,接近0的数字将在甜甜圈中间具有更少的空白空间.

在你的控制器中:

$scope.options = {cutoutPercentage: 75};
$scope.data = [213, 546];
$scope.labels = ['Label 1', 'Label 2'];

在你的HTML:

<canvas class="chart chart-doughnut" chart-data="data" chart-labels="labels" chart-options="options"> </canvas>