如何从ng2-Chart中的另一页获取数据?

时间:2016-11-21 14:03:45

标签: angular typescript chart.js ng2-charts

对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,
      },
    ];
  }
}

0 个答案:

没有答案