这是一个使用Angular 9和Chart.js创建具有单色带阴影的环形图表的示例解决方法:
npm install chart.js ng2-charts --save
import { Component } from '@angular/core';
import { ChartDataSets, ChartOptions } from 'chart.js';
import { Color, Label } from 'ng2-charts';
@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.css']
})
export class ChartComponent {
public pieChartOptions: ChartOptions = {
responsive: true,
legend: {
position: 'right',
},
elements: {
arc: {
borderWidth: 0
}
}
};
public pieChartLabels: Label[] = ['Red', 'Blue', 'Yellow'];
public pieChartData: ChartDataSets[] = [
{
data: [300, 50, 100],
backgroundColor: ['rgba(255, 99, 132, 0.8)', 'rgba(54, 162, 235, 0.8)', 'rgba(255, 205, 86, 0.8)'],
hoverBackgroundColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 205, 86, 1)'],
hoverBorderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 205, 86, 1)'],
}
];
public pieChartType = 'pie';
}
这是一个简单的示例,您可以根据自己的需求进行修改和定制。
上一篇:Angular 9: BehaviorSubject对于远程数据不起作用
下一篇:Angular 9: 错误: 无法实例化循环依赖!InjectionToken HTTP_INTERCEPTORS