3

我在 angular2 中使用 ng2-charts 构建了一个水平条形图，但我不确定为什么我没有看到图形数据，也没有在控制台中看到任何错误。

HTML：

<canvas baseChart [data]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
</canvas>

零件：

  result: Iresult[] = [];

  barChartLabels: string[] =[];
  barChartType: string = 'horizontalBar';
  barChartLegend: boolean = true;
  barChartData: any[] = [];

  barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  barChartLabels: string[] =[];
  barChartType: string = 'horizontalBar';
  barChartLegend: boolean = true;
  barChartData: any[] = [];

getData(){
    this.dataService.getData().subscribe(
      data => {
        this.result = data;
        this.barChartLabels = this.result.map(item => item.label);
        console.log(this.barChartLabels); // RESULT: ["test 1", "test 2"]
        this.barChartData = this.result.map(item => item.data);
        console.log(this.barChartData); // RESULT: [25, 55]
      },
        error => this.errorMessage = <any>error);
        console.log(this.barChartLabels); // RESULT: []
        console.log(this.barChartData); // RESULT: []
  }

JSON文件：

[
  {
    "id": 5,
    "label": "test 1",
    "data": 25
  },
  {
    "id": 6,
    "label": "test 2",
    "data": 55
  }
]

服务文件：

getData(): Observable<IChartData[]>{
        return this._http.get('https://api.myjson.com/bins/ywavt')
            .map((res:Response) => <IChartData[]> res.json())
            .do(data => console.log('All: ' + JSON.stringify(data))) //DEBUG USE
            .catch(this.handleError);
    }

private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }

//Console do result: All: [{"id":5,"label":"test 1","data":25},{"id":6,"label":"test 2","data":55}]

接口类

export interface IChartData {
    id: number;
    label: string;
    data: any;
}

更新

这是我到目前为止所拥有的 Plunker：https ://plnkr.co/edit/0GyFTkuqF7m8JhUKK6Kl?p=preview

标签未显示，但彩色水平条未正确定位。

4

1 回答 1

7

更新 2

由于在异步初始化图表数据时问题仍然存在subscribe，因此一个可行的解决方案是使用加载标志结合*ngIf等待从服务中加载数据，然后再初始化图表。

看起来像这样：

模板：

<canvas *ngIf="loaded" baseChart [data]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>

零件：

loaded = false;

getData(){
    this.dataService.getData().subscribe(data => {
      this.resultData = data;
      this.barChartLabels = this.resultData.map(item => item.label);
      this.barChartData = this.resultData.map(item => item.data);
      this.loaded = true;
    }
}

这是一个PLUNKER

更新 1

根据您的评论，这有助于显示数据，但标签仍未显示。从您提供的代码中，很难知道原因，但可能是您的数据有问题。你能登录一下barChartData，barCharLabels这样我可以看看吗？

这是您的示例的工作 plunker，但带有硬编码数据：PLUNKER

原来的

ng2-chart 在ngOnChanges内部使用来捕捉其输入数据的变化。这意味着修改您输入的数组不会触发更改。并且由于您的barChartLabels和barChartData数组已经初始化为空数组，这就是图表将使用的。

您需要做的ngOnChanges是更改接收新数据的实际实例barChartLabels和barChartData接收新数据的时间。

getData在您的方法中替换它：

this.result.forEach( item => {
   this.barChartLabels.push(item.label);
   this.barChartData.push(item.dataInfo);
})

像这样：

this.barChartLabels = this.result.map(item => item.label);
this.barChartDatat = this.result.map(item => item.dataInfo);
于 2017-04-28T08:35:18.287 回答