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

Question

如何使用 ChartJs

改变圆环图的厚度

Answer 1

自版本 2 起，该字段已重命名为 cutoutPercentage。

抠图百分比
数字 50 - 甜甜圈，0 - 馅饼
图表从中间被剪掉的百分比。

可以这样使用

var options = {        
    cutoutPercentage: 40
};

更多详情请点击这里 http://www.chartjs.org/docs/#doughnut-pie-chart-chart-options

更新：自版本 3 起

var options = {        
    cutout: 40
};

var options = {        
    cutout: '40%'
};

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

Doughnut

cutoutPercentage

已重命名为

cutout

，并接受像素作为数字和百分比作为以

%

结尾的字符串。

Answer 2

var options = {        
     cutoutPercentage: 70
};

Answer 3

使用，percentageInnerCutout，例如：

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
};

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

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)
    }]
  }
});}

Answer 7

在ng2-chart v3中新增类型，在configraution选项中需要添加图表类型；

**ChartConfiguration<'doughnut'>['options']** 


doughnutChartOptions: ChartConfiguration<'doughnut'>['options'] = {
    cutout: '50%', // percentage of chart to cut out of the middle
    //cutout: 100, // pixels
};

Answer 8

对于 vue-chartjs（使用 Nuxt 测试），如果设置选项不起作用，请尝试：

Chart.defaults.doughnut.cutoutPercentage = 80

请注意，它将更改所有甜甜圈切口。