如何使用ChartJs更改甜甜圈图表的厚度？

Question

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

- shashisp

---

尝试在Doughnut.defaults中使用percentageInnerCutout：50进行调整，它应该会改变厚度。 - Anuragh27crony

你应该接受服务提供者的答案，它似乎回答了你的问题 :) - rinogo

Answer 1

自从第二个版本以来，该字段已被重命名为 cutoutPercentage。

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，接收像素作为数字和以%结尾的字符串作为百分比。

- tetchen9

---

如果你有嵌套的甜甜圈会怎样？ - Oussama Essamadi

然后您将使用 weight（https://www.chartjs.org/docs/latest/charts/doughnut.html#styling） - ATOMP

Answer 2

var options = {        
     cutoutPercentage: 70
};

- Naresh Narasimhalu

Answer 3

如何使用 percentageInnerCutout：

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

Demo:: jsFiddle

- Sudhir Bastakoti

---

tetchen9的答案更好！ - AaronBaker

@tetchen9在下面的回答中给出了正确的答案，目前我还没有看到任何属性在这个答案中提到percentageInnerCutout，现在是cutoutPercentage。请参考http://www.chartjs.org/docs/latest/charts/doughnut.html。 - digender mahara

Answer 4

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

自版本3起，可以像这样使用该字段：cutout: 50。

50% - 用于圆环图，0 - 用于饼图。

可以通过此cutout描述进行使用。

var option = {
    cutout:40
}

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

- athul raj

Answer 5

如果你正在使用通过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

在你的组件.ts文件中，可以像这样做：

//component.ts file

chartOptions = {
  cutoutPercentage: 80
};

一个有用的信息源: 可用的图表指令和[options]指令的配置选项

- Tim Dobbins

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

- Shri ram

Answer 7

在ng2-chart v3中，使用新类型时，在配置选项中需要添加图表类型。

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


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

- Hamada

Answer 8

对于vue-chartjs（在Nuxt中测试过），如果设置选项无效，请尝试：

Chart.defaults.doughnut.cutoutPercentage = 80

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

- thermostat42