NG2-Charts ne peut pas se lier à "datasets" car ce n'est pas une propriété connue de "canvas".

Question

J'essaie d'utiliser l'exemple de base de NG2-Charts ( http://valor-software.com/ng2-charts/ )

J'ai copié-collé la partie 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>

et la partie 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);
  }

Je cours npm install ng2-charts --save , npm install chart.js --save et typings install dt~chart.js --save --global

J'ai également importé chart.js dans mon fichier vendor.ts

import 'chart.js';

Mes dépendances :

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

Voici l'erreur

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)

Le site web de NG2-Charts indique que je dois inclure ceci dans le HTML

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

Mais je pense que ce n'est pas correct car comment cette déclaration fonctionnerait-elle dans une application productive minifiée / construite ? Je pensais aussi que l'import de webpack s'en chargerait déjà ? J'ai fait des recherches sur Internet, mais je n'ai malheureusement trouvé que des informations sur une version bêta d'Angular 2 sur NG2 Charts.

Quelqu'un a-t-il une idée sur la façon de réparer cela ?

Merci et à la santé, Raphael Hippe

Answer 1

Essayez d'importer ChartsModule dans votre app.module.ts comme ceci-

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

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

Answer 2

J'ai eu le même problème. J'ai trouvé sur github qu'il suffit d'insérer le ChartsModule dans le submodule également. D'abord vous ajoutez dans app.module.ts et le, dans mon cas, reports.module.ts .

Answer 3

Je travaille avec ng2-charts + Angular 7 + Ionic 4, et j'ai passé plusieurs heures à chercher une solution. Et ceci a finalement fonctionné pour moi (après avoir suivi les étapes initiales, bien sûr, comme l'installation de ng2-charts et charts.js). Il suffit d'importer ChartsModule sur les fichiers suivants :

app.module.ts

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

votrePage.module.ts

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

J'essayais de l'importer aussi dans yourPage.page.ts, mais la solution était de l'importer dans yourPage.module.ts !

Essayez-le.

Answer 4

Je travaille avec ng2-chart@3.0.0-rc.2

ressemble à la propriété chartType s'appelle désormais type

donc ça devrait ressembler à quelque chose comme ça :

    <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

Si votre composant est déclaré dans un autre module que le module app.module.ts vous ferez simplement ce qui suit :

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