Ng2-Charts Linechart仅显示前两个值 [英] Ng2-Charts Linechart only showing first 2 two values

问题描述

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

I'm starting new Angular application which I initialised with Angular-CLI (beta 22.1). But when I add test-data (5 values) to my chart it seems to scale wrong and only shows the first two values and streched them over the whole length of the graph (see picture).

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

The project is otherwise blank and does not contain any CSS whatsoever.

我的 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版本降级为我之前使用的版本，但没有运气。

I really don't know where I'm going wrong. I've tried many different options (responsive: true/false, maintainAspectRatio : true/false, wrapping the <canvas> in <div> and without, CSS Styles, width/height attributes, ...) but can't seem to get this one to work. I even downgraded the ng2-charts version to one that I reviously worked with, but with no luck.

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

Let me know if you need anymore code.

推荐答案

标签属性必须与值一起定义。根据属性的文档：

labels property must be defined along with values. According to documentation for properties:

标签（？数组） - x轴标签。这对于图表来说是必要的：线，条和雷达。

labels (?Array) - x axis labels. It's necessary for charts: line, bar and radar.

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

So specifying actual values for labels will do the trick.

这篇关于Ng2-Charts Linechart仅显示前两个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！