如何使用 ChartJs 改变圆环图的粗细？答案

【问题标题】：How to vary the thickness of doughnut chart, using ChartJs.?如何使用 ChartJs 改变圆环图的粗细？
【发布时间】：2014-01-27 15:27:15
【问题描述】：

如何改变圆环图的粗细，使用ChartJs

【问题讨论】：

尝试在 Doughnut.defaults 中使用 percentInnerCutout : 50。它应该改变厚度。
您应该接受提供者的回答；它似乎回答了你的问题:)

标签： javascript chart.js

【解决方案1】：

从第 2 版开始，该字段已重命名为 cutoutPercentage。

切除百分比
数字 50 - 代表甜甜圈，0 - 代表馅饼
图表从中间切掉的百分比。

可以这样使用

var options = {        
    cutoutPercentage: 40
};

更新：从第 3 版开始

var options = {        
    cutout: 40
};

根据 3.x 发行说明中的文档

Doughnut cutoutPercentage 已重命名为 cutout 并接受像素作为数字和百分比作为以 % 结尾的字符串。

【讨论】：

如果你有嵌套的甜甜圈呢？
那么你将使用weight (chartjs.org/docs/latest/charts/doughnut.html#styling)

【解决方案2】：

我想添加如何在 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)
    }]
  }
});}

【讨论】：

【解决方案3】：

自版本 3 起，该字段已重命名为 cutout。

从版本 3 开始可以这样使用，该字段已重命名为 cutout。

50% - 用于甜甜圈，0 - 用于馅饼

可以这样使用

cutout description

var option = {
    cutout:40
}

https://www.chartjs.org/docs/latest/charts/doughnut.html

【讨论】：

【解决方案4】：

如果您通过ng2-charts 为Angular 使用chart.js，您可以在您的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

在你的 component.ts 文件中做这样的事情：

//component.ts file

chartOptions = {
  cutoutPercentage: 80
};

有用的信息来源：available chart directives 和 config options for the [options] directive

【讨论】：

【解决方案5】：

var options = {        
     cutoutPercentage: 70
};

【讨论】：

【解决方案6】：

使用，percentageInnerCutout，喜欢：

var options = {        
    percentageInnerCutout: 40
};
myNewChart = new Chart(ct).Doughnut(data, options);

演示::jsFiddle

【讨论】：

tetchen9 的答案更好！
@ttechen9 下面的答案是正确答案，目前我还没有看到这个答案percentageInnerCutout 中提到的任何属性，现在是cutoutPercentage。参考chartjs.org/docs/latest/charts/doughnut.html