NG2-Charts 無法綁定到“數據集”，因為它不是“畫布”的已知屬性

Question

我正在嘗試使用 NG2-Charts 的基本示例（ http://valor-software.com/ng2-charts/ ）

我復制粘貼了 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>

和打字稿部分

  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和npm install chart.js --save typings install dt~chart.js --save --global

我還在我的 vendor.ts 文件中導入了 chart.js

import 'chart.js';

我的依賴：

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

這是錯誤

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)

NG2-Charts 網站說我需要將其包含在 HTML 中

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

但我認為那是不正確的，因為該聲明如何在高效的縮小/構建的應用程序中工作？ 我還認為我的 webpack 導入語句已經解決了這個問題？ 我四處搜索，但遺憾的是只在 NG2 Charts 上找到了一些 Angular 2 Beta 版本的內容。

有沒有人知道如何解決這個問題？

感謝和干杯，拉斐爾·希佩

Answer 1

嘗試像這樣在 app.module.ts 中導入 ChartsModule -

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

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

Answer 2

我有同樣的問題。 我在 github 上發現你只需要在子模塊中插入 ChartsModule 。 首先你添加app.module.ts和，在我的例子中， reports.module.ts 。

Answer 3

我正在使用 ng2-charts + Angular 7 + Ionic 4，我花了幾個小時尋找解決方案。 這最終對我有用（當然，在遵循初始步驟之后，例如安裝 ng2-charts 和 charts.js）。 只需在以下文件中導入 ChartsModule：

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**
  ]
})

我也試圖在 yourPage.page.ts 中導入它，但解決方案是在 yourPage.module.ts 中導入它！

試試看。

Answer 4

我正在使用ng2-chart@3.0.0-rc.2

看起來屬性chartType現在被稱為type

所以它應該是這樣的：

    <canvas 
      style="display: block;background-color: #3a3939;" 
      width="600" 
      height="300" 
      id="canvas" 
      #myCanvas
      
      baseChart 
      [type]="lineChartType" 
      [datasets]="lineChartData" 
      [labels]="lineChartLabels" 
      [options]="mfChartOptions"
      [legend]="lineChartLegend">
    </canvas>

Answer 5

不要在 App Module 中導入 ChartsModule，而是將其導入到您正在使用的內部模塊中。 例如，主頁模塊（如果在主頁中使用圖表）。

Answer 6

如果您正在使用共享模塊，您還需要從那里導出 ChartsModule，以使其可用於使用您的共享模塊的所有組件。

// Simplified module only showing what's important for ChartsModule
import { NgModule } from '@angular/core';
import { ChartsModule } from 'ng2-charts';

@NgModule({
    declarations: [],
    imports: [ChartsModule],
    exports: [ChartsModule]
})

export class SharedModule {
    static forRoot(): ModuleWithProviders<SharedModule> {
        return {
            ngModule: SharedModule
        };
    }
}

Answer 7

如果您的組件是在app.module.ts以外的另一個模塊中聲明的，您只需執行以下操作：

app.module.ts

import { ChartsModule } from 'ng2-charts';

...

@NgModule({
   ...

   imports: [
      ...
      ChartsModule,
      ...
   ]
})
export class AppModule{ }

module-where-your-component-is-declared.module.ts

import { ChartsModule } from 'ng2-charts';

...

@NgModule({
   declarations: [YourComponent],
   imports: [
      ...
      ChartsModule,
      ...
   ],
   ...
})
export class ModuleWhereYourComponentIsDeclared { }

Answer 8

就我而言，這與在多個模塊中包含ChartsModule或導出它無關。

我創建了一個使用ng-chart的圖表組件，然后發現我需要它的另一個版本。 所以我復制了組件，重命名了類和模板文件，但是忘記更新@Component裝飾器中的templateUrl屬性。

有兩個不同的組件引用同一個模板文件給出了完全相同的錯誤：

無法綁定到“數據集”，因為它不是“畫布”的已知屬性

一旦我將新組件更改為使用正確的 HTML 模板，錯誤就解決了。

僅供參考，我引用了ChartsModule ，如我的圖表組件模塊中@sanket 的回答所示以及引用它們的頁面組件的模塊 （因此在AppModule不需要它）。

Answer 9

原因可能是：您直接從子組件/模塊使用 Ng2Charts。

解決方案：您還必須在父模塊上導入 Ng2Charts。 （導入 Ng2Charts [ng2-charts]，到你的父子模塊）

祝大家修好。

謝謝你。 馬瓊·維勒加斯

Answer 10

在我的情況下，我不得不改變我的導入方式和我的 html 文件標簽的一些變化：

圖表組件.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);
    }

}

這是我所做的另一個更改：

注意 --> 基礎圖表類 =“圖表” ...

圖表平衡模板

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