Question

我正在尝试使用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 Part

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

我希望你能帮助我们，因为我找不到任何解决办法。

Answer 1

我遇到了一些问题尝试在你的ts文件中添加 require（＆＃39; __ path __ / node_modules / chart.js / src / chart.js＆＃39;）
进口线

Answer 2

app.module.ts中的

导入'chart.js / src / chart.js';

ng2-charts不适用于角度2

2 个答案: