NG2-Charts Невозможно привязываться к "наборам данных", поскольку это не известное свойство "холста",

Я запускаю npm install ng2-charts --save, npm install chart.js --save и typings install dt~chart.js --save --global

Я также импортировал файл chart.js в файле vendor.ts

На сайте NG2-Charts говорится, что мне нужно включить это в HTML

Но я думаю, что это неверно, потому что как бы это выражение работало в продуктивном минифинированном/построенном приложении? Я также думал, что моя заявка на импорт webpack уже позаботится об этом? Я googled вокруг, но, к сожалению, только нашел материал для некоторой версии Angular 2 Beta на диаграммах NG2.

Есть ли у кого-нибудь идея, как это исправить?

Ответы

Ответ 1

Попробуйте импортировать ChartsModule в свой app.module.ts, как это -

import { ChartsModule } from 'ng2-charts/ng2-charts';

imports: [
   .....
   ChartsModule
   .....
]

Ответ 2

В моем случае мне пришлось изменить способ импорта и небольшое изменение в моем теге html файла:

chart.component.ts

import {Component} from '@angular/core';
import {CHART_DIRECTIVES} from 'ng2-charts/ng2-charts';

@Component({
    selector: 'chart-balance',
    template: require('./templates/chart-balance.template'),
    styles: [`.chart {display: block; width: 100%;}`],
    directives: [CHART_DIRECTIVES]
})

export class ChartBalanceComponent {
    public barChartOptions:any = {
        scaleShowVerticalLines: false,
        responsive: true,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    callback: label => `${label.toLocaleString()}`
                }
            }]
        }
    };
    public barChartLabels:string[] = ['2014', '2015', '2016'];
    public barChartType:string = 'bar';
    public barChartLegend:boolean = true;

    public barChartData:any[] = [
        {data: [32131, 3432, 543], label:'Test 1'},
        {data: [54353, 432, 768], label:'Test 2'}
    ];

    // events
    public chartClicked(e:any):void {
        console.log(e);
    }

    public chartHovered(e:any):void {
        console.log(e);
    }

}

Вот еще одно изменение:

notice → base-chart class= "chart"...

график-balance.template

<base-chart class="chart"
        [datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [legend]="barChartLegend"
        [chartType]="barChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)"></base-chart>

NG2-карты

export * from './components/charts/charts';
declare var _default: {
    directives: any[][];
};
export default _default;

диаграммы

import { OnDestroy, OnInit, OnChanges, EventEmitter, ElementRef } from '@angular/core';
export declare class BaseChartComponent implements OnDestroy, OnChanges, OnInit {
    static defaultColors: Array<number[]>;
    data: number[] | Array<number[]>;
    datasets: any[];
    labels: Array<any>;
    options: any;
    chartType: string;
    colors: Array<any>;
    legend: boolean;
    chartClick: EventEmitter<any>;
    chartHover: EventEmitter<any>;
    private ctx;
    private cvs;
    private parent;
    private chart;
    private initFlag;
    private element;
    constructor(element: ElementRef);
    ngOnInit(): any;
    ngOnChanges(): any;
    ngOnDestroy(): any;
    getChartBuilder(ctx: any): any;
    private refresh();
}
export interface Color {
    backgroundColor?: string | string[];
    borderWidth?: number | number[];
    borderColor?: string | string[];
    borderCapStyle?: string;
    borderDash?: number[];
    borderDashOffset?: number;
    borderJoinStyle?: string;
    pointBorderColor?: string | string[];
    pointBackgroundColor?: string | string[];
    pointBorderWidth?: number | number[];
    pointRadius?: number | number[];
    pointHoverRadius?: number | number[];
    pointHitRadius?: number | number[];
    pointHoverBackgroundColor?: string | string[];
    pointHoverBorderColor?: string | string[];
    pointHoverBorderWidth?: number | number[];
    pointStyle?: string | string[];
    hoverBackgroundColor?: string | string[];
    hoverBorderColor?: string | string[];
    hoverBorderWidth?: number;
}
export interface Colors extends Color {
    data?: number[];
    label?: string;
}
export declare const CHART_DIRECTIVES: Array<any>;