如何在ChartJS中设置圆弧的大小？

Question

我无法设置图表的圆弧大小。如何设置圆弧的大小？另外，尽管我从官方文档中举了一个例子，我也无法制作动画：/

这是我的代码：

var ctx = document.getElementById('myChart-<%= ChartId %>').getContext('2d');

var myChart = new Chart(ctx, {
 type: 'doughnut',
 data: {
     datasets: [{
         data: [
             11,69,20
         ],
         backgroundColor: [
             "#ffb74d",
             "#4db6ac",
             "#bf360c"
         ]
     }]
 },
 options: {
     tooltips: {
          enabled: false
     },
     plugins: {
         labels: {
             render: 'percentage',
             precision: 2,
             showZero: true,
             fontSize: 30,
             fontColor: ['#2c405a', '#2c405a', 'white'],
             fontFamily: "PTSansBold",
         }
     },
     animation: {
         duration:5000
     }
 }
});

Answer 1

甜甜圈/饼图允许为每个数据集指定许多属性。这些用于设置特定数据集的显示属性。

例如，如果要更改边框的宽度，则可以选择borderWidth。

options: {
   borderWidth: 1,
   ...
}

类似地，您可以从官方文档中找到其他选项。

此参考图像来自官方文档页面。

https://www.chartjs.org/docs/latest/charts/doughnut.html

我希望这会有所帮助。如果您有任何疑问，请告诉我。

Answer 2

根据Config Options，cutoutPercentage定义从中间切出的图表百分比。为了使动画生效，请将canvas放在div内，然后将responsive: true添加到您的选项中。

options: {
   responsive: true,
   cutoutPercentage: 30,
   ...
}

动画与您在选项中定义的效果很好。

var myChart = new Chart(document.getElementById('myChart'), {
   type: 'doughnut',   
   data: {
     datasets: [{
         data: [
             11,69,20
         ],
         backgroundColor: [
             "#ffb74d",
             "#4db6ac",
             "#bf360c"
         ]
     }]
   },
   options: {
     responsive:true,
     cutoutPercentage: 60,
     tooltips: {
          enabled: false
     },
     plugins: {
         labels: {
             render: 'percentage',
             precision: 2,
             showZero: true,
             fontSize: 30,
             fontColor: ['#2c405a', '#2c405a', 'white'],
             fontFamily: "PTSansBold",
         }
     },
     animation: {
         duration: 5000
     }
   }
});

div {
  width: 300px;
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div>
  <canvas id="myChart"></canvas>
</div>