1

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

0 に答える 0