NG2-Charts ( http://valor-software.com/ng2-charts/ )の基本チャートを使用しようとしています。
HTML部分をコピペしました
<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>
そして TypeScript 部分
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;
}
}
私は走りnpm install ng2-charts --saveます npm install chart.js --save。次に、にインポート<script src="node_modules/chart.js/src/chart.js"></script>しますindex.html。
この後、AppModule にインポートします。
import { ChartsModule } from 'ng2-charts';
...
...
...
imports: [
...
...
ChartsModule,
...
],
...
それから私'ng2-charts':'npm:ng2-charts/bundles/ng2-charts.umd.js'は私のsystemjs.config.js
そして今、Angular 2 アプリを実行しようとすると、次のエラーが発生します。
Uncaught ReferenceError: require is not defined
at chart.js:4
と
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/test2.html@5: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/test2.html@6: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/test2.html@7: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/test2.html@8: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/test2.html@9: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/test2.html@5: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/test2.html@6: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/test2.html@7: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/test2.html@8: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/test2.html@9: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/test2.html@5: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/test2.html@6: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/test2.html@7: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/test2.html@8: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/test2.html@9: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/test2.html@5: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/test2.html@6: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/test2.html@7: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/test2.html@8: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/test2.html@9: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/test2.html@5: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/test2.html@6: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/test2.html@7: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/test2.html@8: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/test2.html@9: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
私が見つけた解決策がうまくいかなかったので、あなたが私たちを助けてくれることを願っています.