NG2-Graphiques Peuvent pas se lier à des "jeux de données" puisqu'elle n'est pas déjà connu de la propriété de la "toile"

Je suis en train d'utiliser l'exemple de base de NG2-Graphiques (http://valor-software.com/ng2-charts/)

J'ai copier collé le code HTML de la partie

  <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 le Tapuscrit partie

  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 exécuter npm install ng2-charts --save, npm install chart.js --save et typings install dt~chart.js --save --global

J'ai aussi importé chart.js dans mon vendeur.fichier ts

import 'chart.js';

Mon 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)

NG2-Graphiques de site web dit que j'ai besoin de l'inclure dans le code HTML

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

Mais je pense que c'est pas correct, car comment aurait-que l'énoncé de travail dans des activités productives minifiés /application? J'ai aussi pensé à mon webpack instruction d'importation serait déjà prendre soin de cela?
J'ai googlé autour, mais malheureusement seulement trouvé des choses pour certains Angulaire 2 version Beta sur NG2 Graphiques.

Quelqu'un a une idée sur comment résoudre ce problème?

Merci et à bientôt,
Raphaël Hippe

Avez-vous importé ChartsModule dans votre application.le module.ts ?
Non, je n'ai pas! Ce serait plus logique! Mais je ne trouve rien sur le NG2-Graphiques de site web concernant ce module. Comment l'instruction d'importation ressembler?
déjà importé ChartsModule dans votre application.le module.ts, mais toujours problème.

InformationsquelleAutor Raphael Hippe | 2016-10-13

34

Essayer de l'importer ChartsModule dans votre application.le module.ts, ce
```
import { ChartsModule } from 'ng2-charts/ng2-charts';
imports: [
.....
ChartsModule
.....
]
```
- Cela a fait le tour. Merci 🙂 Ce devrait être ajoutée au site web (valor-software.com/ng2-charts) si la configuration de l'instruction sont de plus en plus clair.
- Est-il une différence entre de "ng2-graphiques' vs 'ng2-graphiques/ng2-graphiques"? J'ai essayé les deux, et ni l'un d'entre eux a travaillé pour moi. Je suis à l'aide de ng2-graphiques (1.6.0) et chart.js (2.7.2).
- Cela ne devrait pas vraiment d'importance, je suppose?? Je suis l'importation à partir d' 'ng2-charts' et il fonctionne très bien. Vérifiez si vous utilisez submodules que André Luiz, c'est dire.
- Je ne pense pas que cela fonctionne maintenant, essayez, importer { ChartsModule } à partir de 'ng2-graphiques";
InformationsquelleAutor Sanket
5

J'ai eu le même problème. J'ai trouvé sur github que vous avez juste à insérer le ChartsModule dans le sous-module ainsi. Tout d'abord vous ajouter dans app.module.ts et le, dans mon cas, reports.module.ts.
- J'ai eu le même problème! Si vous êtes seulement en utilisant les tableaux de l' reports.module.ts, vous pourriez perdre de l'importation dans app.module.ts. Merci
- Vous êtes mon Héros, il fonctionne comme par magie. Merci beaucoup. Je suis ionique à l'aide de 4 version et ajoutée à l'importation { ChartsModule } à partir de 'ng2-graphiques"; dans tab1.les modules.fichier ts, et a également ajouté ChartsModule mot-clé dans les importations de tableau. Merci encore.
InformationsquelleAutor André Luiz
3

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

app.le module.ts
```
import { ChartsModule } from 'ng2-charts';
...
imports: [ChartsModule]
```
yourPage.le module.ts
```
import { ChartsModule } from 'ng2-charts';
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
RouterModule.forChild([{ path: '', component: YourPagePage }]),
**ChartsModule**
]
})
```
J'ai essayé de l'importer également dans yourPage.page.ts, mais la solution était de les importer dans yourPage.le module.ts!

De l'essayer.
- Merci beaucoup pour votre réponse! Il a travaillé pour moi. J'ai passé quelques jours à essayer de comprendre ce que je fais de mal.
- Vous êtes les bienvenus, Pasteur. De toute façon, je suis tombé sur le même problème ces jours-ci et ce ma solution n'était pas suffisant pour le résoudre. Pour le résoudre, j'ai aussi besoin de export le ChartsModule dans le yourPage.le module.ts fichier. Cela signifie que j'ai besoin de le déclarer à l'intérieur de la les exportations array trop: exportations: [ ... ChartsModule ...]
InformationsquelleAutor André Leitão

Dans mon cas, j'ai dû changer ma façon d'importation et d'un peu de changement dans mon fichier html de la balise:

graphique.composante.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);
}
}

Ici était un autre changement que j'ai fait:

avis -- > base-graphique class="graphique" ...

graphique de l'équilibre.modèle

<base-chart class="chart"
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></base-chart>

ng2-graphiques

export * from './components/charts/charts';
declare var _default: {
directives: any[][];
};
export default _default;

graphiques

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

InformationsquelleAutor Jorge Casariego

Vous devez vous connecter pour publier un commentaire.