我需要一些帮助来了解如何使用 ng2-charts 在我的圆环图上设置配置选项。特别是，我想在图表上设置剪切属性。我已经阅读了所有文档图表js and ng2-图表，但遗憾的是没有找到可行的解决方案。
控制台抛出的错误是
输入 '{ 选项：{ 切口：数字； }; }' 不可分配给类型 '_DeepPartialObject & DatasetChartOptions<...> & ScaleChartOptions<...>>'。
这是我的 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>
您需要指定ChartOptions它是针对甜甜圈的，如果你这样做，它就可以正常工作：
public DonutChartOptions: ChartOptions<'doughnut'> = {
options: {
cutout: "70%"
}
};
TS 游乐场链接
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
