如何使用ng2-charts设置甜甜圈图上的切口?

Question

我需要一些帮助来弄清楚如何使用ng2-charts在我的甜甜圈图表上设置配置选项。特别是，我想在我的图表上设置cut - out属性。我已经从charts-js中阅读了所有文档和ng2-charts，但不幸的是没有找到一个有效的解决方案。

控制台抛出的错误是

Type '{options: {cutout: number;};}'不能赋值给类型'_DeepPartialObject

以下是我的html和ts文件:

import {
Component
} from '@angular/core';
import {
ChartData,
ChartType,
ChartOptions
} from 'chart.js';
@Component({
selector: 'app-summary-chart',
templateUrl: './summary-chart.component.html',
styleUrls: ['./summary-chart.component.scss']
})
export class SummaryChartComponent {
// Doughnut
doughnutChartType: ChartType = 'doughnut';
doughnutChartLabels: string[] = ['Tickets', 'Free sales'];
doughnutChartData: ChartData < 'doughnut' > = {
labels: this.doughnutChartLabels,
datasets: [{
data: [60, 40],
backgroundColor: ["#ef2c49", "#1c4d86"],
rotation: 90,
}, ],
};
// TODO resolve type ChartOptions not working
doughnutChartOptions: any = {
cutout: "70%"
}
// ---------------------------------------------------- THIS DOES NOT WORK
public DonutChartOptions: ChartOptions = {
options: {
cutout: "70%"
}
};
}

<div class="chart-wrapper">
<canvas baseChart [data]="doughnutChartData" [type]="doughnutChartType" [labels]="doughnutChartLabels" [options]="doughnutChartOptions"></canvas>
</div>

Answer 1

您需要向ChartOptions指定它是针对特定的甜甜圈的，如果您这样做，它会很好:

public DonutChartOptions: ChartOptions<'doughnut'> = {
options: {
cutout: "70%"
}
};

TS playground link

Answer 2

这是为我工作的ng2-charts (v.3.1.2)和chart.js (v.3.9.1)。希望对你也有帮助。

public doughnutChartOptions: ChartConfiguration<'doughnut'>['options'] = {
cutout: '80%'
};