对angular2来说,我已经开始使用angular2 ng2-chart。关于如何从另一个页面获取图表数据,我几乎没有关于自定义的问题 并且需要应用宽度和高度
我得到数据doughnutData如何整合价值,颜色,标签
<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,
},
];
}
}