Javascript 如何使用ChartJs改变甜甜圈图表的厚度。？

如何使用

改变甜甜圈图表的厚度，如：

---

演示：：

自版本2以来，该字段已重命名为cutoutPercentage

切出百分比
数字50-甜甜圈，0-馅饼
从中间剪下的图表百分比

它可以这样使用

var选项={
门诊量：40
};

这里有更多细节

---

如果您将chart.js用于Angular via，您可以在component.html文件中执行以下操作：

// component.html file

<canvas baseChart [options]='chartOptions'>
</canvas>

// Do note that other required directives are missing in this example, but that I chose to highlight the 'options' directive

---

有用的信息来源：和

自第3版以来，该字段已重命名为剪切

它可以这样使用，因为版本3字段已重命名为剪切

甜甜圈50%，馅饼0%

它可以这样使用

---

我想补充一下如何在React中实现这一点

this.myChart = new Chart(this.chartRef.current, {
  type: 'doughnut',
  options: {
    cutout:120
  },
  data: {
    labels: this.props.data.map(d => d.label),
    datasets: [{
      data: this.props.data.map(d => d.value),
      backgroundColor:  Object.values(CHART_COLORS)
    }]
  }
});}

---

尝试在Doughnut.defaults中使用percentageInnerCutout:50。它应该改变厚度。你应该接受提供者的回答；它似乎回答了你的问题：）德钦的答案更好@tetchen9下面的答案是正确的，目前我还没有看到这个答案中提到的任何属性

percentageInnerCutout

，它的

cutoutPercentage

。如果你有嵌套的甜甜圈怎么办？那么你会使用

weight

（）

// component.html file

<canvas baseChart [options]='chartOptions'>
</canvas>

// Do note that other required directives are missing in this example, but that I chose to highlight the 'options' directive

//component.ts file

chartOptions = {
  cutoutPercentage: 80
};

var option = {
    cutout:40
}

this.myChart = new Chart(this.chartRef.current, {
  type: 'doughnut',
  options: {
    cutout:120
  },
  data: {
    labels: this.props.data.map(d => d.label),
    datasets: [{
      data: this.props.data.map(d => d.value),
      backgroundColor:  Object.values(CHART_COLORS)
    }]
  }
});}