Ng2-Charts Linechart仅显示前两个值

Question

我正在开始使用Angular-CLI（beta 22.1）初始化的新Angular应用程序。 但是当我将测试数据（5个值）添加到我的图表时，它似乎缩放错误并且只显示前两个值并将它们拉伸到整个图形长度上（见图）。

该项目是空白的，不包含任何CSS。

我的app.component.html ：

<div>
    <canvas baseChart [datasets]="_numbers" [labels]="_labels" [options]="_chartOpt" [colors]="_chartColours" [legend]="_chartLegend" [chartType]="_chartType" width="600px">
    </canvas>
<div>

app.component.ts

import { Component } from '@angular/core';
import { BaseChartDirective } from "ng2-charts/ng2-charts";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private _numbers: any[] = [
      {
        label: "Test",
        data: [10,2,6,7] // should cause 4 points in the chart
     }
  ];

  private _chartOpt: any = {
        responsive: true
  };

  public _chartColours:any[] = [];

  private _labels: string[] = [];
  private _chartLegend: boolean = false;
  private _chartType: string = "line";
}

chart.js库是通过angular-cli.json添加的：

"scripts": [
         "../node_modules/chart.js/dist/Chart.bundle.min.js"
      ],

我真的不知道我哪里错了。 我已经尝试了很多不同的选项（ responsive: true/false ， maintainAspectRatio : true/false ，在<div>包装<canvas> <div>而没有，CSS样式，宽度/高度属性，......）但似乎无法让这个工作。 我甚至将ng2-chart版本降级为我以前合作过的版本，但没有运气。

如果您需要更多代码，请告诉我们。

Answer 1

labels属性必须与值一起定义。 根据物业文件：

labels（？Array） - x轴标签。 图表是必需的：线，条和雷达。

因此，指定标签的实际值将起到作用。

Answer 2

您需要在画布中放置一个条件，例如，在加载数据时显示它或者您的array.length > 0

例：

<canvas baseChart *ngIf="showMyChart" [datasets]="_numbers"
     [chartType]="_chartType" width="600px">
</canvas>