我无法显示百分比的虚线圆圈

Question

我正在尝试显示虚线圆来表示我尝试使用的单个部分的百分比表示 chat.js 但使用饼图它不是 possible.I 喜欢显示下面的图像

Answer 1

您可以只添加必要数量的数据点来表示百分比，然后为要着色的百分比所需的数量着色。

60% 的颜色示例：

var options = {
  type: 'doughnut',
  data: {
    labels: ["10", "10", "10", "10", "10", "10", "10", "10", "10", "10"],
    datasets: [{
      label: '# of Votes',
      data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
      cutout: 280,
      borderWidth: 5,
      backgroundColor: ["lightBlue", "lightBlue", "lightBlue", "lightBlue", "lightBlue", "lightBlue", "grey", "grey", "grey", "grey"]
    }]
  },
  options: {
    plugins: {
      legend: {
        display: false
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.js"></script>
</body>

我无法显示百分比的虚线圆圈

I am not able to show dotted circle for percentage

chart.js