如何使用 ChartJs 改变甜甜圈图的厚度。
自从第二个版本以来,该字段已被重命名为 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
,接收像素作为数字和以%
结尾的字符串作为百分比。
weight
(https://www.chartjs.org/docs/latest/charts/doughnut.html#styling) - ATOMPvar options = {
cutoutPercentage: 70
};
如何使用 percentageInnerCutout:
var options = {
percentageInnerCutout: 40
};
myNewChart = new Chart(ct).Doughnut(data, options);
Demo:: jsFiddle
percentageInnerCutout
,现在是cutoutPercentage
。请参考http://www.chartjs.org/docs/latest/charts/doughnut.html。 - digender mahara自版本3起,该字段已更名为cutout。
自版本3起,可以像这样使用该字段:cutout: 50
。
50%
- 用于圆环图,0
- 用于饼图。
可以通过此cutout描述进行使用。
var option = {
cutout:40
}
// 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]指令的配置选项
我想补充一下如何在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)
}]
}
});}
**ChartConfiguration<'doughnut'>['options']**
doughnutChartOptions: ChartConfiguration<'doughnut'>['options'] = {
cutout: '50%', // percentage of chart to cut out of the middle
//cutout: 100, // pixels
};
对于vue-chartjs(在Nuxt中测试过),如果设置选项无效,请尝试:
Chart.defaults.doughnut.cutoutPercentage = 80
请注意,这将更改所有甜甜圈的切口。