javascript - NG2-Charts no se puede unir a ''datasets'' ya que no es una propiedad conocida de ''canvas''

ng2-charts angular 5

Question

Estoy tratando de usar el ejemplo básico de NG2-Charts ( http://valor-software.com/ng2-charts/ )

Copio pegado la parte HTML

 <div style="display: block">
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>

y la parte de TypeScript

 private barChartOptions: any = {
scaleShowVerticalLines: false,
responsive: true
};
private barChartLabels: string[] = [''2006'', ''2007'', ''2008'', ''2009'', ''2010'', ''2011'', ''2012''];
private barChartType: string = ''bar'';
private barChartLegend: boolean = true;
private barChartData: any[] = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: ''Series A'' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: ''Series B'' }
];
// events
private chartClicked(e: any): void {
console.log(e);
}
private chartHovered(e: any): void {
console.log(e);
}

npm install ng2-charts --save , npm install chart.js --save y typings install dt~chart.js --save --global

También importé chart.js en mi archivo vendor.ts

import ''chart.js'';

Mis dependencias:

{
"@angular/common": "^2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"angular2-jwt": "^0.1.18",
"chart.js": "^2.3.0",
"core-js": "^2.4.0",
"json-loader": "^0.5.4",
"moment": "^2.14.1",
"ng2-charts": "^1.4.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.11",
"zone.js": "^0.6.23"
}

Aquí está el error

Unhandled Promise rejection: Template parse errors:
Can''t bind to ''datasets'' since it isn''t a known property of ''canvas''. ("iuminfooneoptionsTwo">
<div style="display: block">
<canvas baseChart [ERROR ->][datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLeg"): PlayerprofileComponent@39:34
Can''t bind to ''labels'' since it isn''t a known property of ''canvas''. (" <div style="display: block">
<canvas baseChart [datasets]="barChartData" [ERROR ->][labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChart"): PlayerprofileComponent@39:60
Can''t bind to ''options'' since it isn''t a known property of ''canvas''. ("lay: block">
<canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [ERROR ->][options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartH"): PlayerprofileComponent@39:86
Can''t bind to ''legend'' since it isn''t a known property of ''canvas''. (" <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [ERROR ->][legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)"): PlayerprofileComponent@39:114
Can''t bind to ''chartType'' since it isn''t a known property of ''canvas''. ("ets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [ERROR ->][chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
"): PlayerprofileComponent@39:140 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Can''t bind to ''datasets'' since it isn''t a known property of ''canvas''. ("iuminfooneoptionsTwo">
<div style="display: block">
<canvas baseChart [ERROR ->][datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLeg"): PlayerprofileComponent@39:34
Can''t bind to ''labels'' since it isn''t a known property of ''canvas''. (" <div style="display: block">
<canvas baseChart [datasets]="barChartData" [ERROR ->][labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChart"): PlayerprofileComponent@39:60
Can''t bind to ''options'' since it isn''t a known property of ''canvas''. ("lay: block">
<canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [ERROR ->][options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartH"): PlayerprofileComponent@39:86
Can''t bind to ''legend'' since it isn''t a known property of ''canvas''. (" <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [ERROR ->][legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)"): PlayerprofileComponent@39:114
Can''t bind to ''chartType'' since it isn''t a known property of ''canvas''. ("ets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [ERROR ->][chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
"): PlayerprofileComponent@39:140
at TemplateParser.parse (eval at <anonymous> (http://localhost:8080/vendor.js:623:1), <anonymous>:133:19)
at RuntimeCompiler._compileTemplate (eval at <anonymous> (http://localhost:8080/vendor.js:2103:1), <anonymous>:244:51)
at eval (eval at <anonymous> (http://localhost:8080/vendor.js:2103:1), <anonymous>:167:83)
at Set.forEach (native)
at compile (eval at <anonymous> (http://localhost:8080/vendor.js:2103:1), <anonymous>:167:47)
at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:192:28)
at Zone.run (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:85:43)
at eval (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:451:57)
at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:225:37)
at Zone.runTask (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:125:47)
at drainMicroTaskQueue (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:357:35)

El sitio web de NG2-Charts dice que necesito incluir esto en el HTML

<script src="node_modules/chart.js/src/chart.js"></script>

Pero creo que eso no es correcto porque ¿cómo funcionaría esa afirmación en una aplicación productiva minificada / construida? También pensé que mi declaración de importación de paquetes web ya se encargaría de eso? Busqué en Google, pero lamentablemente solo encontré cosas para algunas versiones de Angular 2 Beta en NG2 Charts.

¿Alguien tiene una idea sobre cómo solucionar eso?

Gracias y Saludos, Raphael Hippe

Answer 1

Intente importar ChartsModule en su app.module.ts como este-

import { ChartsModule } from ''ng2-charts/ng2-charts'';
imports: [
.....
ChartsModule
.....
]

Answer 2

En mi caso, tuve que cambiar la forma de importar y un pequeño cambio en mi etiqueta de archivo 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);
}
}

Aquí hubo otro cambio que hice:

aviso -> base-chart class = "gráfico" ...

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-charts

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

gráficos

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>;