Ng2-Charts Linechart показывает только первые два значения

Я начинаю новое угловое приложение, которое я инициализировал с помощью Angular-CLI (бета 22.1). Но когда я добавляю тестовые данные (5 значений) в свою диаграмму, это кажется неправильным и показывает только первые два значения и растягивает их по всей длине графика (см. Рисунок).Ng2-Charts Linechart показывает только первые два значения

Проект иначе пустой и не содержит каких-либо 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, атрибуты width/height, ...), но, похоже, не может заставить этот работать. Я даже понизил версию ng2-диаграмм до той, с которой я работал, но не повезло.

Дайте мне знать, если вам нужно больше кода.

источник

2016-12-20 Daniel Lerps

Вы пытались назначить 'labels'? Как реальные значения, а не пустой массив строк? Может быть, глупый вопрос, я сам не использовал эти диаграммы, но, тем не менее, в документации говорится: «Это необходимо для диаграмм: линия, бар и радар» –

@IlyaLuzyanin Спасибо за подсказку. На самом деле это ... Будьте моим гостем, чтобы написать это как ответ, и я приму это. –

Рад, что это помогло! Добавлено как ответ –

labels Собственность должна быть определена вместе со значениями. В соответствии с документацией для properties:

Этикетки (? Array) - обозначение оси x. Это необходимо для диаграмм: линии, бара и радара.

Так что указание фактических значений для этикеток будет делать трюк.

источник

2016-12-20 20:24:51

Вам нужно поставить условие внутри холста, например, показать, когда данные загружены или ваш array.length > 0

Пример:

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

источник

2017-07-31 17:16:50

Ng2-Charts Linechart показывает только первые два значения

ответ

Смежные вопросы