NG2-Charts Can't bind to 'datasets' since it isn't a known property of 'canvas'

问题

I am trying to use the basic example of NG2-Charts (http://valor-software.com/ng2-charts/)

I copy pasted the HTML part

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

and the TypeScript part

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

I run npm install ng2-charts --save, npm install chart.js --save and typings install dt~chart.js --save --global

I also imported chart.js in my vendor.ts file

import 'chart.js';

My dependencies:

{
    "@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"
  }

Here is the 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)

The NG2-Charts website says I need to include this in the HTML

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

But I think thats not correct because how would that statement work in a productive minified / built app? I also thought my webpack import statement would already take care of that? I googled around but sadly only found stuff for some Angular 2 Beta version on NG2 Charts.

Does anyone has an idea on how to fix that?

Thanks and Cheers, Raphael Hippe

回答1:

Try importing ChartsModule in your app.module.ts like this-

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

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

回答2:

I had the very same problem. I found on github that you just have to insert the ChartsModule in the submodule as well. First you add in app.module.ts and the, in my case, reports.module.ts.

回答3:

I'm working with ng2-charts + Angular 7 + Ionic 4, and I spent several hours searching for a solution. And this finally worked to me (after following the initial steps, of course, like installing ng2-charts and charts.js). Just import ChartsModule on the following files:

app.module.ts

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

yourPage.module.ts

import { ChartsModule } from 'ng2-charts';
@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: YourPagePage }]),
    **ChartsModule**
  ]
})

I was trying to import it also in yourPage.page.ts, but the solution was to import it in yourPage.module.ts!

Try it out.

回答4:

In my case I had to change how I import and a little change in my html file tag:

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

}

Here was another change I did:

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

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;

charts

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

来源：https://stackoverflow.com/questions/40016333/ng2-charts-cant-bind-to-datasets-since-it-isnt-a-known-property-of-canvas