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，将<canvas>包裹在<div>中，而没有，CSS样式，宽度/高度属性，...）但似乎无法让这个工作。我甚至将ng2-chart版本降级为我以前合作过的版本，但没有运气。

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

Answer 1

labels属性必须与值一起定义。根据{{​​3}}的文档：

  

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

因此，指定标签的实际值就可以了。

Answer 2

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

示例：

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