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

问题描述

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

该项目是空白的，并且不包含任何 CSS.

我的app.component.html:

app.component.ts

从'@angular/core'导入{组件}；从ng2-charts/ng2-charts"导入{ BaseChartDirective }；@零件({选择器:'应用程序根'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent {私人号码:任何[] = [{标签:测试"，data: [10,2,6,7]//应该在图表中造成 4 个点}];私人_chartOpt:任何= {响应式:真};公共 _chartColours:any[] = [];私有_标签:字符串[] = []；私人_chartLegend:布尔=假；私人 _chartType: string = "line";}

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

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

我真的不知道我哪里错了.我尝试了许多不同的选项(responsive: true/false、maintainAspectRatio : true/false、将 <canvas> 包装在 ><div> 并且没有，CSS 样式，宽度/高度属性，...)，但似乎无法让这个工作.我什至将 ng2-charts 版本降级为我曾经使用过的版本，但没有运气.

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

解决方案

labels 属性必须与值一起定义.根据 properties 的文档:

<块引用>

labels (?Array) - x 轴标签.图表是必需的:折线、条形和雷达.

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

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).

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

My app.component.html:

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

The 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";
}

The chart.js library is added via the angular-cli.json:

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

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:

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 仅显示前 2 个两个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！