angular - 条形图未显示在 angular2+

Question

我有一个用 angular2+ 和 node.js 编写的应用程序。我想要一个页面来显示图形和图表。所以我从下拉列表中获取输入，然后将该选择发送到一个 http 请求，然后检索到一个像这里这样的变量 -

    public barChartDataHighmark: any[] = [
     { data: [this.highmarkSuccessResult], label: 'Success' },
     { data: [this.highmarkErrorResult], label: 'Error' }
     ];

当我输入硬编码值时，条形图中的条出现，

例如 -

     public barChartDataHighmark: any[] = [

      { data: [10,11,12], label: 'Success' },
      { data: [5,6,7], label: 'Error' }
      ];

但是当我将它设置为我的 http 请求的输出时，条不会出现。如何解决。

graphs.component.ts

  viewHighmarkData(highmarkChoice) {


  this.highmarkInterfaceNames = ['Highmark', 'Highmark Issue Request', 
 'Highmark Commercial Auth', 'Highmark Comm Issue Request'];

  console.log("inside highmarkSuccess()");

   var url = config.url;
   var port = config.port;


  this.highmarkSuccessChoice = {
    'highmarkSuccess': highmarkChoice
    }

    this.http.post("http://" + url + ":" + port + 
    "/dashboard/highmarkSuccess/", this.highmarkSuccessChoice
  , { headers: new Headers({ 'Authorization': 'Bearer ' + 
    localStorage.getItem('Token') }) })
  .map(result => this.result = result.json(), )
  .subscribe((res: Response) => {
    // this.loading = false;
    this.records = res;
    console.log("xxxx view  Highmark  Success  result data ", 
     this.result)
    console.log("XXXXXXXXXXXX  view  Highmark  Success res data ", 
    res);

    this.highmarkSuccessResult = this.result.length;

      console.log("this.highmarkSuccessResult = ", 
      this.highmarkSuccessResult)
     });


     console.log("inside viewHighmarkError()");


   this.highmarkErrorChoice = {
   'highmarkError': highmarkChoice
     }

    this.http.post("http://" + url + ":" + port + 
   "/dashboard/highmarkError/", this.highmarkErrorChoice
  , { headers: new Headers({ 'Authorization': 'Bearer ' + 
   localStorage.getItem('Token') }) })
  .map(result => this.result = result.json(), )
  .subscribe((res: Response) => {
    // this.loading = false;
    this.records = res;
    console.log("xxxx view Highmark Error  result data ", this.result)
     console.log("XXXXXXXXXXXX  view Highmark Error  res data ", res);

       this.highmarkErrorResult = this.result.length;

       console.log("this.highmarkErrorResult = ", 
       this.highmarkErrorResult)
      });
    }

组件.html

   // Highmark  BarChart

   public barChartOptionsHighmark: any = {
   scaleShowVerticalLines: false,
   responsive: true
   };
   public barChartLabelsHighmark: string[] = ['Success', 'Error'];
   public barChartTypeHighmark = 'bar';
   public barChartLegendHighmark = true;

   public barChartDataHighmark: any[] = [
     { data: [this.highmarkSuccessResult], label: 'Success' },
     { data: [this.highmarkErrorResult], label: 'Error' }
      ];

标签： angulargraphcharts