使 Chart.js 饼图中的其中一个切片变厚？

Question

是否可以使 Chart.js 圆环图的切片比其余切片更厚？

例如在此 Stackblitz 演示中是否可以使蓝色切片比紫色切片厚 25%？

这是演示中的代码。

const config: ChartConfiguration = {
  type: 'doughnut',
  data: {
    labels: ['Red', 'Blue'],
    datasets: [
      {
        hoverOffset: 24,
        backgroundColor: ['rgb(255, 9, 132)', 'rgb(54, 162, 235)'],
        borderWidth: 0,
        label: '# of Points',
        data: [75, 25],
      },
    ],
  },
  options: {
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        mode: 'index',
        intersect: false,
        position: 'nearest',
      },
    },
    scales: {
      y: {
        min: 0,
        max: 20,
      },
    },
  },
};
new Chart(ctx, config);

Answer 1

您可以将

borderWith

定义为值数组，其中每个值对应于一个特定切片。

borderWidth: [10, 0]

请查看您修改后的代码，看看它是如何工作的。

new Chart('chart', {
  type: 'doughnut',
  data: {
    labels: ['Red', 'Blue'],
    datasets: [{
      hoverOffset: 24,
      backgroundColor: ['rgb(255, 9, 132)', 'rgb(54, 162, 235)'],
      borderWidth: [10, 0],
      label: '# of Points',
      data: [75, 25]
    }]
  },
  options: {
    responsive: false,
    plugins: {
      legend: {
        display: false,
      }
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="chart" width="200"></canvas>