[英]How to vary the thickness of doughnut chart, using ChartJs.?
since version 2 the field has been renamed to cutoutPercentage.自版本 2 以来,该字段已重命名为 cutoutPercentage。
cutoutPercentage剪裁百分比
Number 50 - for doughnut, 0 - for pie数字 50 - 甜甜圈,0 - 馅饼
The percentage of the chart that is cut out of the middle.从中间切出的图表百分比。
It can be used like this它可以像这样使用
var options = {
cutoutPercentage: 40
};
more details here http://www.chartjs.org/docs/#doughnut-pie-chart-chart-options更多细节在这里http://www.chartjs.org/docs/#doughnut-pie-chart-chart-options
Update: Since version 3更新:从第 3 版开始
var options = {
cutout: 40
};
According to the documentation at release notes of 3.x根据 3.x 发行说明中的文档
Doughnut
cutoutPercentage
was renamed tocutout
and accepts pixels as numer and percent as string ending with%
.Donut
cutoutPercentage
被重命名为cutout
并接受像素作为数字和百分比作为以%
结尾的字符串。
var options = {
cutoutPercentage: 70
};
use, percentageInnerCutout , like:使用, percentInnerCutout ,如:
var options = {
percentageInnerCutout: 40
};
myNewChart = new Chart(ct).Doughnut(data, options);
If you are using chart.js for Angular via ng2-charts you would do something like this in your component.html file:如果您通过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
And do something like this in your component.ts file:在你的 component.ts 文件中做这样的事情:
//component.ts file
chartOptions = {
cutoutPercentage: 80
};
A helpful source of information: available chart directives and config options for the [options] directive有用的信息来源: [options] 指令的可用图表指令和配置选项
Since version 3 the field has been renamed to cutout .从版本 3 开始,该字段已重命名为cutout 。
It can be used like this since version 3 the field has been renamed to cutout.它可以像这样使用,因为版本 3 该字段已重命名为 cutout。
50% - for doughnut, 0 - for pie 50% - 甜甜圈,0 - 派
It can be used like this它可以像这样使用
var option = {
cutout:40
}
https://www.chartjs.org/docs/latest/charts/doughnut.html https://www.chartjs.org/docs/latest/charts/doughnut.html
I wanted to add how to achieve this exactly in React.我想添加如何在 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)
}]
}
});}
For vue-chartjs (tested with Nuxt), if setting options doesn't work, try:对于 vue-chartjs(使用 Nuxt 测试),如果设置选项不起作用,请尝试:
Chart.defaults.doughnut.cutoutPercentage = 80
Chart.defaults.doughnut.cutoutPercentage = 80
Note that it will change all the doughnuts cutout.请注意,它将更改所有甜甜圈切口。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.