ng2 chart javascript angular charts chart.js ng2-charts

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



ng2-charts angular 5 (2)

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


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

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


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