Ng2图表仅显示前两个值的折线图

Question

我正在启动新的Angular应用程序，我用Angulal-CLI（beta 22.1）初始化了它。但是当我在图表中添加测试数据（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，MaintaintAspectratio:true/false，包装

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




Answer 1

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

例子：

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

Answer 2

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

标签（？数组）-x轴标签。这是必要的图表：线，酒吧和雷达。

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