NG2-Charts无法绑定到“datasets”，因为它不是“canvas”的已知属性。

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>

还有 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和typings install dt~chart.js --save --global。我还在我的 vendor.ts 文件中导入了 chart.js。请注意，保留了 HTML 标签。

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图表的Angular 2 Beta版本的内容。

有人有解决方法吗？

谢谢和问候， Raphael Hippe

- Raphael Hippe

---

你是否已经在你的 app.module.ts 中导入了 ChartsModule？ - Sanket

没有！那样做很有道理！但是我在NG2-Charts网站上找不到有关该模块的任何信息。导入语句会是什么样子？ - Raphael Hippe

已经在你的 app.module.ts 中导入了 ChartsModule，但仍然遇到问题。 - Kamlesh

Answer 1

尝试在您的 app.module.ts 中像这样导入 ChartsModule -

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

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

- Sanket

---

这个方法很管用。谢谢 :) 应该把它添加到网站（http://valor-software.com/ng2-charts/）上，以便设置说明更加清晰。 - Raphael Hippe

"ng2-charts" 和 "ng2-charts/ng2-charts" 之间有区别吗？我尝试了两者，但都没有成功。我正在使用 ng2-charts(1.6.0) 和 chart.js(2.7.2)。 - user2347528

这应该不重要吧？我从'ng2-charts'导入，它可以正常工作。检查一下你是否像_André Luiz_所说的那样使用了子模块。 - Aico Klein Ovink

我认为现在这不起作用了， 请尝试以下代码： import { ChartsModule } from 'ng2-charts'; - Sarvagya Saxena

我和他有同样的问题，但是我无法导入ChartsModule，因为我有ngChartsModule。 - Biax20

Answer 2

我曾经遇到过完全相同的问题。我在github上发现你只需要在子模块中也插入ChartsModule即可解决。首先在app.module.ts中添加，然后在我的情况下，在reports.module.ts中添加。

- André Luiz

---

我也遇到了同样的问题！如果你只在 reports.module.ts 中使用图表，那么你可能会在 app.module.ts 中失去导入。谢谢。 - Aico Klein Ovink

你是我的英雄，它的运行就像魔法一样。非常感谢。我正在使用ionic 4版本，并在tab1.modules.ts文件中添加了"import { ChartsModule } from 'ng2-charts';"，同时也将ChartsModule关键字添加到了imports数组中。再次感谢。 - Kamlesh

我在这个问题上花了很多时间。这个答案展示了导入ChartsModule的两个位置，这拯救了我的一天。 - israel

谢谢，我在 Angular 8 中也遇到了同样的问题。 - Nabeel Iqbal

对我来说，只需要将ChartsModule导入到组件（reports.module.ts）模块中即可！ - Dan

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中引入它！

试一试吧。

- André Leitão

---

非常感谢您的回答！它对我很有帮助。我花了几天时间试图理解我做错了什么。 - Pastor

不客气，牧师。无论如何，这些天我也遇到了同样的问题，我的解决方案并不足以解决它。为了解决它，我还需要在 yourPage.module.ts 文件中 导出 ChartsModule。这意味着我还需要在 exports 数组中声明它：exports: [ ... ChartsModule ...] - André Leitão

在Ionic和Angular项目中运行良好！谢谢！ - Edward Ramos

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>

- Datum Geek

Answer 5

可能的原因：您正在从子组件/模块直接使用Ng2Charts。 解决方案：您还需要在父模块中导入Ng2Charts。（将Ng2Charts [ng2-charts]导入到您的父模块和子模块中）

祝大家修复愉快。

谢谢。 Marjun Villegas

- Marjun Villegas

---

当使用4.0或更高版本时，这不起作用，因为您需要导入完全不同的模块。您需要导入NgChartsModule。 - Martijn Hiemstra

Answer 6

如果你的组件声明在除了 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 { }

- I. Kapri

Answer 7

如果您正在使用共享模块，您还需要从其中导出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
        };
    }
}

- yglodt

Answer 8

在我的情况下，与多个模块中包含ChartsModule或导出它无关。

我创建了一个使用ng-chart的图表组件，然后发现我需要另一个版本。所以我复制了该组件，重命名了类和模板文件，但忘记更新@Component装饰器中的templateUrl属性。

有两个不同的组件引用相同的模板文件会产生完全相同的错误：

“无法绑定到“数据集”，因为它不是“画布”的已知属性。”

一旦我更改新组件以使用正确的HTML模板，错误就得到了解决。

FYI，我像@sanket的answer所示在我的图表组件模块中引用ChartsModule，而不需要在AppModule中引用。

- David G

Answer 9

不要在 App Module 中导入 ChartsModule，而是在使用它的内部模块中导入。例如，在主页中使用图表，则应该在主页模块中导入。

- Surajit Das

Answer 10

ANGULAR 14

当前的导入现在是：

import { NgChartsModule } from 'ng2-charts';

// In your App's module:
imports: [
  NgChartsModule
]

来源

- Diego Venâncio