NG2-Diagrammen arbeiten nicht mit Winkel 2

Ich versuche, die Grundkarte von NG2-Charts zu verwenden (http://valor-software.com/ng2-charts/)NG2-Diagrammen arbeiten nicht mit Winkel 2

Ich klebte Kopieren Sie den HTML-Teil

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

und das Typoskript Teil

import { Component, AfterViewInit } from '@angular/core'; 
import { Test2Service } from './test2.service'; 

@Component({ 
    selector: 'test', 
    templateUrl: './test2.html', 
    styleUrls: ['./test2.css'] 

}) 
export class Test2Component implements AfterViewInit { 
    private name: string = 'You'; 

    constructor(private helloWorldService: Test2Service) { 
    } 

    ngAfterViewInit(): void { 
     this.name = 'Me'; 
    } 

    private getAnswer() { 
     return this.helloWorldService.giveMeTheAnswer(); 
    } 

    public barChartOptions: any = { 
     scaleShowVerticalLines: false, 
     responsive: true 
    }; 
    public barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; 
    public barChartType: string = 'bar'; 
    public barChartLegend: boolean = true; 

    public 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 
    public chartClicked(e: any): void { 
     console.log(e); 
    } 

    public chartHovered(e: any): void { 
     console.log(e); 
    } 

    public randomize(): void { 
     // Only Change 3 values 
     let data = [ 
      Math.round(Math.random() * 100), 
      59, 
      80, 
      (Math.random() * 100), 
      56, 
      (Math.random() * 100), 
      40]; 
     let clone = JSON.parse(JSON.stringify(this.barChartData)); 
     clone[0].data = data; 
     this.barChartData = clone; 

    } 
}

Ich laufe npm install ng2-charts --save und npm install chart.js --save. Dann importiere ich <script src="node_modules/chart.js/src/chart.js"></script> in meinem index.html.

Danach ich importes es in meinem AppModule:

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

Dann habe ich 'ng2-charts':'npm:ng2-charts/bundles/ng2-charts.umd.js' meiner systemjs.config.js

Und jetzt versuche ich ausführen mein Eckige 2 App bekomme ich folgende Fehler:

Uncaught ReferenceError: require is not defined 
    at chart.js:4

und

Unhandled Promise rejection: Template parse errors: 
Can't bind to 'datasets' since it isn't a known property of 'canvas'. (" 
    <div style="display: block"> 
    <canvas baseChart 
      [ERROR ->][datasets]="barChartData" 
      [labels]="barChartLabels" 
      [options]="barChartOpti"): ng:///app/modules/widgets/test2/[email protected]:12 
Can't bind to 'labels' since it isn't a known property of 'canvas'. (" 
    <canvas baseChart 
      [datasets]="barChartData" 
      [ERROR ->][labels]="barChartLabels" 
      [options]="barChartOptions" 
      [legend]="barChartLeg"): ng:///app/modules/widgets/test2/[email protected]:12 
Can't bind to 'options' since it isn't a known property of 'canvas'. (" 
      [datasets]="barChartData" 
      [labels]="barChartLabels" 
      [ERROR ->][options]="barChartOptions" 
      [legend]="barChartLegend" 
      [chartType]="barChart"): ng:///app/modules/widgets/test2/[email protected]:12 
Can't bind to 'legend' since it isn't a known property of 'canvas'. (" 
      [labels]="barChartLabels" 
      [options]="barChartOptions" 
      [ERROR ->][legend]="barChartLegend" 
      [chartType]="barChartType" 
      (chartHover)="chartHov"): ng:///app/modules/widgets/test2/[email protected]:12 
Can't bind to 'chartType' since it isn't a known property of 'canvas'. (" 
      [options]="barChartOptions" 
      [legend]="barChartLegend" 
      [ERROR ->][chartType]="barChartType" 
      (chartHover)="chartHovered($event)" 
      (chartClick)"): ng:///app/modules/widgets/test2/[email protected]:12 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors: 
Can't bind to 'datasets' since it isn't a known property of 'canvas'. (" 
    <div style="display: block"> 
    <canvas baseChart 
      [ERROR ->][datasets]="barChartData" 
      [labels]="barChartLabels" 
      [options]="barChartOpti"): ng:///app/modules/widgets/test2/[email protected]:12 
Can't bind to 'labels' since it isn't a known property of 'canvas'. (" 
    <canvas baseChart 
      [datasets]="barChartData" 
      [ERROR ->][labels]="barChartLabels" 
      [options]="barChartOptions" 
      [legend]="barChartLeg"): ng:///app/modules/widgets/test2/[email protected]:12 
Can't bind to 'options' since it isn't a known property of 'canvas'. (" 
      [datasets]="barChartData" 
      [labels]="barChartLabels" 
      [ERROR ->][options]="barChartOptions" 
      [legend]="barChartLegend" 
      [chartType]="barChart"): ng:///app/modules/widgets/test2/[email protected]:12 
Can't bind to 'legend' since it isn't a known property of 'canvas'. (" 
      [labels]="barChartLabels" 
      [options]="barChartOptions" 
      [ERROR ->][legend]="barChartLegend" 
      [chartType]="barChartType" 
      (chartHover)="chartHov"): ng:///app/modules/widgets/test2/[email protected]:12 
Can't bind to 'chartType' since it isn't a known property of 'canvas'. (" 
      [options]="barChartOptions" 
      [legend]="barChartLegend" 
      [ERROR ->][chartType]="barChartType" 
      (chartHover)="chartHovered($event)" 
      (chartClick)"): ng:///app/modules/widgets/test2/[email protected]:12 
    at syntaxError (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:1513:34) 
    at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:11951:19) 
    at JitCompiler._compileTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25723:39) 
    at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25647:62) 
    at Set.forEach (native) 
    at JitCompiler._compileComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25647:19) 
    at createResult (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25532:19) 
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:381:26) 
    at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:141:43) 
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:805:57 Error: Template parse errors: 
Can't bind to 'datasets' since it isn't a known property of 'canvas'. (" 
    <div style="display: block"> 
    <canvas baseChart 
      [ERROR ->][datasets]="barChartData" 
      [labels]="barChartLabels" 
      [options]="barChartOpti"): ng:///app/modules/widgets/test2/[email protected]:12 
Can't bind to 'labels' since it isn't a known property of 'canvas'. (" 
    <canvas baseChart 
      [datasets]="barChartData" 
      [ERROR ->][labels]="barChartLabels" 
      [options]="barChartOptions" 
      [legend]="barChartLeg"): ng:///app/modules/widgets/test2/[email protected]:12 
Can't bind to 'options' since it isn't a known property of 'canvas'. (" 
      [datasets]="barChartData" 
      [labels]="barChartLabels" 
      [ERROR ->][options]="barChartOptions" 
      [legend]="barChartLegend" 
      [chartType]="barChart"): ng:///app/modules/widgets/test2/[email protected]:12 
Can't bind to 'legend' since it isn't a known property of 'canvas'. (" 
      [labels]="barChartLabels" 
      [options]="barChartOptions" 
      [ERROR ->][legend]="barChartLegend" 
      [chartType]="barChartType" 
      (chartHover)="chartHov"): ng:///app/modules/widgets/test2/[email protected]:12 
Can't bind to 'chartType' since it isn't a known property of 'canvas'. (" 
      [options]="barChartOptions" 
      [legend]="barChartLegend" 
      [ERROR ->][chartType]="barChartType" 
      (chartHover)="chartHovered($event)" 
      (chartClick)"): ng:///app/modules/widgets/test2/[email protected]:12 
    at syntaxError (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:1513:34) 
    at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:11951:19) 
    at JitCompiler._compileTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25723:39) 
    at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25647:62) 
    at Set.forEach (native) 
    at JitCompiler._compileComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25647:19) 
    at createResult (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25532:19) 
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:381:26) 
    at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:141:43) 
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:805:57 
api.onUnhandledError @ zone.js:630 
handleUnhandledRejection @ zone.js:654 
_loop_1 @ zone.js:645 
api.microtaskDrainDone @ zone.js:649 
drainMicroTaskQueue @ zone.js:582 
ZoneTask.invoke @ zone.js:480 
zone.js:632 Error: Uncaught (in promise): Error: Template parse errors: 
Can't bind to 'datasets' since it isn't a known property of 'canvas'. (" 
    <div style="display: block"> 
    <canvas baseChart 
      [ERROR ->][datasets]="barChartData" 
      [labels]="barChartLabels" 
      [options]="barChartOpti"): ng:///app/modules/widgets/test2/[email protected]:12 
Can't bind to 'labels' since it isn't a known property of 'canvas'. (" 
    <canvas baseChart 
      [datasets]="barChartData" 
      [ERROR ->][labels]="barChartLabels" 
      [options]="barChartOptions" 
      [legend]="barChartLeg"): ng:///app/modules/widgets/test2/[email protected]:12 
Can't bind to 'options' since it isn't a known property of 'canvas'. (" 
      [datasets]="barChartData" 
      [labels]="barChartLabels" 
      [ERROR ->][options]="barChartOptions" 
      [legend]="barChartLegend" 
      [chartType]="barChart"): ng:///app/modules/widgets/test2/[email protected]:12 
Can't bind to 'legend' since it isn't a known property of 'canvas'. (" 
      [labels]="barChartLabels" 
      [options]="barChartOptions" 
      [ERROR ->][legend]="barChartLegend" 
      [chartType]="barChartType" 
      (chartHover)="chartHov"): ng:///app/modules/widgets/test2/[email protected]:12 
Can't bind to 'chartType' since it isn't a known property of 'canvas'. (" 
      [options]="barChartOptions" 
      [legend]="barChartLegend" 
      [ERROR ->][chartType]="barChartType" 
      (chartHover)="chartHovered($event)" 
      (chartClick)"): ng:///app/modules/widgets/test2/[email protected]:12 
Error: Template parse errors: 
Can't bind to 'datasets' since it isn't a known property of 'canvas'. (" 
    <div style="display: block"> 
    <canvas baseChart 
      [ERROR ->][datasets]="barChartData" 
      [labels]="barChartLabels" 
      [options]="barChartOpti"): ng:///app/modules/widgets/test2/[email protected]:12 
Can't bind to 'labels' since it isn't a known property of 'canvas'. (" 
    <canvas baseChart 
      [datasets]="barChartData" 
      [ERROR ->][labels]="barChartLabels" 
      [options]="barChartOptions" 
      [legend]="barChartLeg"): ng:///app/modules/widgets/test2/[email protected]:12 
Can't bind to 'options' since it isn't a known property of 'canvas'. (" 
      [datasets]="barChartData" 
      [labels]="barChartLabels" 
      [ERROR ->][options]="barChartOptions" 
      [legend]="barChartLegend" 
      [chartType]="barChart"): ng:///app/modules/widgets/test2/[email protected]:12 
Can't bind to 'legend' since it isn't a known property of 'canvas'. (" 
      [labels]="barChartLabels" 
      [options]="barChartOptions" 
      [ERROR ->][legend]="barChartLegend" 
      [chartType]="barChartType" 
      (chartHover)="chartHov"): ng:///app/modules/widgets/test2/[email protected]:12 
Can't bind to 'chartType' since it isn't a known property of 'canvas'. (" 
      [options]="barChartOptions" 
      [legend]="barChartLegend" 
      [ERROR ->][chartType]="barChartType" 
      (chartHover)="chartHovered($event)" 
      (chartClick)"): ng:///app/modules/widgets/test2/[email protected]:12 
    at syntaxError (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:1513:34) 
    at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:11951:19) 
    at JitCompiler._compileTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25723:39) 
    at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25647:62) 
    at Set.forEach (native) 
    at JitCompiler._compileComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25647:19) 
    at createResult (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25532:19) 
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:381:26) 
    at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:141:43) 
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:805:57 
    at syntaxError (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:1513:34) 
    at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:11951:19) 
    at JitCompiler._compileTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25723:39) 
    at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25647:62) 
    at Set.forEach (native) 
    at JitCompiler._compileComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25647:19) 
    at createResult (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25532:19) 
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:381:26) 
    at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:141:43) 
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:805:57 
    at resolvePromise (http://localhost:3000/node_modules/zone.js/dist/zone.js:757:31) 
    at resolvePromise (http://localhost:3000/node_modules/zone.js/dist/zone.js:728:17) 
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:805:17 
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:414:31) 
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:181:47) 
    at drainMicroTaskQueue (http://localhost:3000/node_modules/zone.js/dist/zone.js:574:35) 
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:480:25) 
api.onUnhandledError @ zone.js:632 
handleUnhandledRejection @ zone.js:654 
_loop_1 @ zone.js:645 
api.microtaskDrainDone @ zone.js:649 
drainMicroTaskQueue @ zone.js:582 
ZoneTask.invoke @ zone.js:480

Ich hoffe, dass Sie uns helfen können, weil keine Lösung gefunden, die ich gefunden habe.

Quelle

2017-06-09 Maniac

hatte ich das ein Problem versuchen hinzuzufügen require ('__ __ Pfad/node_modules/chart.js/src/chart.js')
in Ihrer ts-Datei der Importzeile insted

Quelle

2017-06-09 15:15:37 oubchid

Es funktioniert nicht. Ich probiere es auch ein das app.module.ts und in der test2.component.ts – Maniac

in app.module .ts

Import 'chart.js/src/chart.js';

Quelle

2017-07-31 07:05:51 user2501763

NG2-Diagrammen arbeiten nicht mit Winkel 2

Antwort

Verwandte Themen