小贝子编程

NG2 图表不适用于 Angular 2



我正在尝试使用NG2图表的基本图表(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>

和打字稿部分 

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.然后我在我的index.html中导入<script src="node_modules/chart.js/src/chart.js"></script>.

在此之后，我将它导入我的应用程序模块：

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

我希望你能帮助我们，因为我发现没有有效的解决方案。

我遇到了一些问题，尝试在您的 ts 文件中添加 require('__path__/node_modules/chart.js/src/chart.js'(
而不是导入行

in app.module.ts

导入"图表.js/src/chart.js";

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium