我正在使用Angular 14、ChartJS（4.1.2）和NG 2-Charts（4.1.1）处理一个公司项目。在尝试更改圆环图的宽度时遇到了一些问题。我显示了我现在拥有的图片：
这就是我应该做的
此时我不需要在图表内放置文本，我只想减小图表的大小，以便使图表内的文本很好地适应。
我已经试过this答案，和this一个，但这些都不起作用，我不知道为什么。
下面是我的HTML代码：
<canvas baseChart class="chart"
style="height: 15vh; max-height: 15vh"
[data]="doughnutChartData"
[type]="doughnutChartType"
[options]="doughnutChartOptions">
</canvas>TS代码：
public doughnutChartLabels: string[] = ['a', 'b', 'c'];
public doughnutChartData: ChartData<'doughnut'> = {
labels: this.doughnutChartLabels,
datasets: [
{
data: [600, 400, 200],
backgroundColor: [
'#AAAAAA',
'#BBBBBB',
'#CCCCCC',
],
},
],
};
public doughnutChartType: ChartType = 'doughnut';
public doughnutChartOptions: ChartConfiguration['options'] = {
responsive: true,
plugins: {
legend: {
display: false,
},
datalabels: {
anchor: 'end',
align: 'end'
},
}
};当我试图将这个<'doughnut'>添加到我的图表选项中时，它破坏了类型，当我从HTML中删除类型时，它变成了一个条形图，所以我被困在这里。
2条答案
按热度按时间d6kp6zgx1#
除了将
doughnutChartOptions类型更改为ChartConfiguration<'doughnut'>['options']之外，还需要将doughnutChartType更改为ChartConfiguration<'doughnut'>['type']类型。Demo @ StackBlitz
ulmd4ohb2#
通常添加
<'doughnut'>不会破坏您的代码。I found a similar issue in here。请尝试更改应用中的ng2-charts或chartJS版本。下面是一个例子：
public ChartOptions: ChartOptions<'doughnut'> = { options: { cutout: "99%" } };