这是我想从样机中实现的目标:
但这是我到目前为止使用chartjs实现的结果:
这是我的代码
datasets: [
{
data: [3, 8, 13, 9, 2],
backgroundColor: [
"#D51F1F",
"#9B51E0",
"#F2994A",
"#4BD37B",
"#4285F4"
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth:1,
borderDash:[],
borderStyle:'dash',
line: { borderWidth:1 }
}]
}
const options= {
responsive: false,
maintainAspectRatio: false,
percentageInnerCutout : 0,
}
我将borderWidth设置为1,似乎没有使边框变薄。
Add
cutoutPercentage: 80
in your options. You can increase this to make the white area in the middle of your donut chart larger, or decrease it to make it smaller. You'll need to fiddle with it to get your chart as close to the example as you can.Here are the docs