角度2 - 图形未绘制(二维),ng2图表(在其他页面中正常工作)

时间:2018-03-28 04:43:13

标签: angular graph ng2-charts

我正在尝试使用ng2-charts绘制图形,它在我绘制单个数组的其他页面中正常工作,当涉及二维时它没有绘图,我使用的代码如下所示

.TS

...................

 public barChartOptions:any = {
  scaleShowVerticalLines: false,
  responsive: true,
};

public barChartLabels:string[] = ['20-30', '31-40', '41-50', '51-60', '61+'];
public barChartType:string = 'bar';
public barChartLegend:boolean = true;
public reportChartData:any[] =  [
  {label: 'Series A'},
  {label: 'Series A'}
];

...............

private fetchreportDaily(dateofSales = new Date()){

    var self = this;
    self.reportdate = dateofSales.toISOString().split('T')[0];
    console.log('inside', self.reportdate)
    self.reportDaily = self.analyticsService.getclientreport(self.shopId , self.reportdate)
    self.reportDaily.subscribe((res:any) => {

    let reportToday_result = self.graphPlotting(res);
    self.reportChartData[0]['data'] = reportToday_result[0];
    self.reportChartData[1]['data'] = reportToday_result[1];

    console.log('Result',reportToday_result)
  });
  }
  private graphPlotting(res){
  console.log(" inside graphPlotting")
  let graphValues=[];
  let barChartData1 = res.map(o => {
  return o.male;
  });
  let barChartData2 = res.map(o => {
  return o.female;
  });
  console.log(barChartData1,barChartData2);
  graphValues[0]=barChartData1;
  graphValues[1]=barChartData2;
  return graphValues;
  }

.HTML

 <canvas baseChart
     [datasets]="reportChartData"
     [colors]="colors"
     [labels]="barChartLabels"
     [options]="barChartOptions"
     [legend]="barChartLegend"
     [chartType]="barChartType" >
</canvas>

控制台 enter image description here enter image description here

0 个答案:

没有答案