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

Question

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

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

Answer 1

你只需要设置＆＃34; cutoutPercentage＆＃34;图表选项中的选项。圆环图的默认值为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>