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

Posted 2023-02-16

【中文标题】如何使用 ChartJs 改变圆环图的粗细？

【英文标题】：How to vary the thickness of doughnut chart, using ChartJs.?

【发布时间】：2014-01-27 15:27:15

【问题描述】：

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

【问题讨论】：

尝试在 Doughnut.defaults 中使用 percentInnerCutout : 50。它应该改变厚度。

您应该接受提供者的回答；它似乎回答了你的问题:)

【参考方案1】：

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

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

可以这样使用

var options =         
    cutoutPercentage: 40
;

更多细节在这里 http://www.chartjs.org/docs/#doughnut-pie-chart-chart-options

更新：从第 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