angular2が初めてで、angular2 ng2-chartの使用を開始しました。別のページからグラフ データを取得する方法のカスタマイズについていくつか質問があり、幅と高さを適用する必要があります
データ donutData を取得する 値、色、ラベルを統合する方法
<canvas baseChart [datasets]="datasets" [labels]="doughnutChartLabels" [chartType]="doughnutChartType" [colors]="colorsEmptyObject" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
app.compound.ts
public doughnutData: Array<Object>;
constructor(private trafficChartService:TrafficChartService) {
this.doughnutData = trafficChartService.getData();
}
public doughnutChartLabels:string[] = doughnutData.label;
data:number[] = [3350, 5450, 4100, 1000];
public doughnutChartType:string = 'doughnut';
options: { responsive: true, }
colorsEmptyObject: Array<Color> = [{}];
public datasets: any[] = [
{
data: this.data,
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}];
// events
public chartClicked(e:any):void {
console.log(e);
}
public chartHovered(e:any):void {
console.log(e);
}
このデータを app.compound.ts に統合する必要があります
getData() {
let dashboardColors = this._baConfig.get().colors.dashboard;
return [
{
value: 2000,
color: dashboardColors.white,
highlight: colorHelper.shade(dashboardColors.white, 15),
label: 'Car',
percentage: 87,
order: 1,
}, {
value: 1200,
color: dashboardColors.surfieGreen,
highlight: colorHelper.shade(dashboardColors.surfieGreen, 15),
label: 'Fuel',
percentage: 38,
order: 2,
}, {
value: 400,
color: dashboardColors.blueStone,
highlight: colorHelper.shade(dashboardColors.blueStone, 15),
label: 'Movies',
percentage: 17,
order: 0,
},
];
}
}