如何使用 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
};

根據 3.x 發行說明中的​​文檔

Donut cutoutPercentage被重命名為cutout並接受像素作為數字和百分比作為以%結尾的字符串。

Answer 2

var options = {        
     cutoutPercentage: 70
};

Answer 3

使用， percentInnerCutout ，如：

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

演示:: jsFiddle

Answer 4

如果您通過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 5

從版本 3 開始，該字段已重命名為cutout 。

它可以像這樣使用，因為版本 3 該字段已重命名為 cutout。

50% - 甜甜圈，0 - 派

它可以像這樣使用

剪紙說明

var option = {
    cutout:40
}

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

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

對於 vue-chartjs（使用 Nuxt 測試），如果設置選項不起作用，請嘗試：

Chart.defaults.doughnut.cutoutPercentage = 80

請注意，它將更改所有甜甜圈切口。