我怎样才能减少 chartjs 圆环图的边框宽度

Question

这就是我试图通过模型实现的目标：

但这是我到目前为止使用 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，好像并没有把边框变细

Answer 1

在您的选项中添加 cutoutPercentage: 80。您可以增加它以使圆环图中间的白色区域变大，或减少它以使其变小。您需要 fiddle 使用它来使您的图表尽可能接近示例。

Here are the docs

我怎样才能减少 chartjs 圆环图的边框宽度

How i can i reduce the borderwidth of a chartjs dougnut chart

javascript

reactjs

chart.js

donut-chart

react-chartjs