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

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

这是我的密码：

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

var ctx=document.getElementById（'myChart-'）.getContext（'2d'）；
var myChart=新图表（ctx{
键入：“甜甜圈”，
数据：{
数据集：[{
数据：[
11,69,20
],
背景颜色：[
“#ffb74d”，
“#4db6ac”，
“#bf360c”
]
}]
},
选项：{
工具提示：{
已启用：false
},
插件：{
标签：{
渲染：“百分比”，
精度：2，
showZero：是的，
尺寸：30，
fontColor:['2c405a'、'2c405a'、'white']，
fontFamily：“PTSansBold”，
}
},
动画：{
持续时间：5000
}
}
});

根据，

cutoutPercentage

定义图表从中间切出的百分比。要使动画工作，请将

画布

放在

div

中，并将

响应：true

添加到

选项

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

动画与您在选项中定义的内容配合得很好

var myChart=新图表（document.getElementById（'myChart'）{
键入：“甜甜圈”，
数据：{
数据集：[{
数据：[
11,69,20
],
背景颜色：[
“#ffb74d”，
“#4db6ac”，
“#bf360c”
]
}]
},
选项：{
回答：是的，
门诊量：60，
工具提示：{
已启用：false
},
插件：{
标签：{
渲染：“百分比”，
精度：2，
showZero：是的，
尺寸：30，
fontColor:['2c405a'、'2c405a'、'white']，
fontFamily：“PTSansBold”，
}
},
动画：{
持续时间：5000
}
}
});
div{
宽度：300px；
高度：300px；
}
甜甜圈/饼图允许为每个数据集指定许多属性。这些属性用于设置特定数据集的显示属性

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

options: {
   cutoutPercentage: 80,
   ...
}

同样，您可以从官方文档中找到其他选项



var ctx=document.getElementById（'chart'）.getContext（'2d'）；
var myChart=新图表（ctx{
键入：“甜甜圈”，
数据：{
数据集：[{
数据：[
11,69,20
],
背景颜色：[
“#ffb74d”，
“#4db6ac”，
“#bf360c”
]
}]
},
选项：{
门诊量：80，
动画：{
持续时间：5000
}
}
});
谢谢！这对我有帮助！我的动画错误是由设置画布的固定大小引起的