如何使用ChartJs改变圆环图的厚度.

Question

如何使用ChartJs改变圆环图的厚度

Answer 1

从版本2开始,该字段已重命名为cutoutPercentage.

cutoutPercentage
Number 50 - for donut,0 - for pie
从中间切出的图表的百分比.

更多详情, 请访问http://www.chartjs.org/docs/#doughnut-pie-chart-chart-options

Answer 2

var options = {        
     cutoutPercentage: 70
};

Answer 3

use,percentageInnerCutout,like:

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

演示:: jsFiddle

Answer 4

从版本 3 开始，该字段已重命名为cutout。

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

50% - 甜甜圈，0 - 馅饼

可以这样使用

剪纸描述

var option = {
    cutout:40
}

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

Answer 5

如果您通过ng2-charts将chart.js 用于 Angular，您将在您的 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
};

有用的信息来源：[options] 指令的可用图表指令和配置选项

Answer 6

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