'canvas'の既知のプロパティではないため、 'data'にバインドできません。

ng2-chartsを使用しようとしていますが、使用している要素が正しくないというエラーが発生しています。
私はこのサイト上のいくつかの答えを試してみたが、ない運：'canvas'の既知のプロパティではないため、 'data'にバインドできません。

NG2-Charts Can't bind to 'datasets' since it isn't a known property of 'canvas'

ng2-charts - Can't bind to 'datasets' since it isn't a known property of 'base-chart'

ここでは私のコードではありません：

import { Component } from "@angular/core"; 

@Component({ 
    moduleId: module.id, 
    templateUrl: "four-item-horse-shoe-graph.component.html", 
    styleUrls: ["four-item-horse-shoe-graph.component.css"], 
    selector: "four-item-horse-shoe" 
}) 

export class FourItemHorseShoeGraphComponent { 
    // Doughnut 
    public doughnutChartLabels: string[] = ["Download Sales", "In-Store 
     Sales", "Mail-Order Sales"]; 
    public doughnutChartData: number[] = [350, 450, 100]; 
    public doughnutChartType: string = "doughnut"; 

    // events 
    public chartClicked(e: any): void { 
     console.log(e); 
    } 

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

そしてHTML：

<div style="display: block"> 
<canvas baseChart 
     [data]="doughnutChartData" 
     [labels]="doughnutChartLabels" 
     [chartType]="doughnutChartType" 
     (chartHover)="chartHovered($event)" 
     (chartClick)="chartClicked($event)"> 
</canvas>

systemjs.config.js：

  'chart': 'npm:chart.js/src/chart.js', 
     "ng2-charts": "node_modules/ng2-charts" 
    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
      main: './main.js', 
      defaultExtension: 'js' 
     }, 
     rxjs: { 
      defaultExtension: 'js' 
     }, 
     "ng2-charts": { main: "ng2-charts.js", defaultExtension: "js" }

app.module.ts

import { ChartsModule } from "ng2-charts/ng2-charts"; 

declare let jQuery: Object; 

@NgModule({ 
imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule, 
    CoreFeatureModule, 
    LayoutModule, 
    ChartsModule

ERROR：

Unhandled Promise rejection: Template parse errors: 
Can't bind to 'data' since it isn't a known property of 'canvas'. ("<div style="display: block"> 
    <canvas baseChart 
      [ERROR ->][data]="doughnutChartData" 
      [labels]="doughnutChartLabels" 
      [chartType]="doughnutCh"): [email protected]:9 
Can't bind to 'labels' since it isn't a known property of 'canvas'. (" 
    <canvas baseChart 
      [data]="doughnutChartData" 
      [ERROR ->][labels]="doughnutChartLabels" 
      [chartType]="doughnutChartType" 
      (chartHover)="char"): [email protected]:9 
Can't bind to 'chartType' since it isn't a known property of 'canvas'. (" 
      [data]="doughnutChartData" 
      [labels]="doughnutChartLabels" 
      [ERROR ->][chartType]="doughnutChartType" 
      (chartHover)="chartHovered($event)" 
      (chartClick)="): [email protected]:9 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError {_nativeError: Error: Template parse errors: 
Can't bind to 'data' since it isn't a known property of 'canvas'. ("<d…} Error: Template parse errors: 
Can't bind to 'data' since it isn't a known property of 'canvas'. ("<div style="display: block"> 
    <canvas baseChart 
      [ERROR ->][data]="doughnutChartData" 
      [labels]="doughnutChartLabels" 
      [chartType]="doughnutCh"): [email protected]:9 
Can't bind to 'labels' since it isn't a known property of 'canvas'. (" 
    <canvas baseChart 
      [data]="doughnutChartData" 
      [ERROR ->][labels]="doughnutChartLabels" 
      [chartType]="doughnutChartType" 
      (chartHover)="char"): [email protected]:9 
Can't bind to 'chartType' since it isn't a known property of 'canvas'. (" 
      [data]="doughnutChartData" 
      [labels]="doughnutChartLabels" 
      [ERROR ->][chartType]="doughnutChartType" 
      (chartHover)="chartHovered($event)" 
      (chartClick)="): [email protected]:9 
    at SyntaxError.BaseError [as constructor] (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1595:29) [<root>] 
    at new SyntaxError (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1793:18) [<root>] 
    at TemplateParser.parse (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:11222:21) [<root>] 
    at JitCompiler._compileTemplate (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27474:70) [<root>] 
    at eval (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:64) [<root>] 
    at Set.forEach (native) [<root>] 
    at JitCompiler._compileComponents (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:21) [<root>] 
    at createResult (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27240:21) [<root>] 
    at Zone.run (http://localhost:44444/node_modules/zone.js/dist/zone.js:113:43) [<root> => <root>] 
    at http://localhost:44444/node_modules/zone.js/dist/zone.js:520:57 [<root>] 
    at Zone.runTask (http://localhost:44444/node_modules/zone.js/dist/zone.js:151:47) [<root> => <root>] 
    at drainMicroTaskQueue (http://localhost:44444/node_modules/zone.js/dist/zone.js:418:35) [<root>] 
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:44444/node_modules/zone.js/dist/zone.js:349:25) [<root>] 
consoleError @ zone.js:405 
_loop_1 @ zone.js:434 
drainMicroTaskQueue @ zone.js:438 
ZoneTask.invoke @ zone.js:349 
zone.js:407 Error: Uncaught (in promise): Error: Template parse errors: 
Can't bind to 'data' since it isn't a known property of 'canvas'. ("<div style="display: block"> 
    <canvas baseChart 
      [ERROR ->][data]="doughnutChartData" 
      [labels]="doughnutChartLabels" 
      [chartType]="doughnutCh"): [email protected]:9 
Can't bind to 'labels' since it isn't a known property of 'canvas'. (" 
    <canvas baseChart 
      [data]="doughnutChartData" 
      [ERROR ->][labels]="doughnutChartLabels" 
      [chartType]="doughnutChartType" 
      (chartHover)="char"): [email protected]:9 
Can't bind to 'chartType' since it isn't a known property of 'canvas'. (" 
      [data]="doughnutChartData" 
      [labels]="doughnutChartLabels" 
      [ERROR ->][chartType]="doughnutChartType" 
      (chartHover)="chartHovered($event)" 
      (chartClick)="): [email protected]:9 
Error: Template parse errors: 
Can't bind to 'data' since it isn't a known property of 'canvas'. ("<div style="display: block"> 
    <canvas baseChart 
      [ERROR ->][data]="doughnutChartData" 
      [labels]="doughnutChartLabels" 
      [chartType]="doughnutCh"): [email protected]:9 
Can't bind to 'labels' since it isn't a known property of 'canvas'. (" 
    <canvas baseChart 
      [data]="doughnutChartData" 
      [ERROR ->][labels]="doughnutChartLabels" 
      [chartType]="doughnutChartType" 
      (chartHover)="char"): [email protected]:9 
Can't bind to 'chartType' since it isn't a known property of 'canvas'. (" 
      [data]="doughnutChartData" 
      [labels]="doughnutChartLabels" 
      [ERROR ->][chartType]="doughnutChartType" 
      (chartHover)="chartHovered($event)" 
      (chartClick)="): [email protected]:9 
    at SyntaxError.BaseError [as constructor] (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1595:29) [<root>] 
    at new SyntaxError (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1793:18) [<root>] 
    at TemplateParser.parse (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:11222:21) [<root>] 
    at JitCompiler._compileTemplate (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27474:70) [<root>] 
    at eval (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:64) [<root>] 
    at Set.forEach (native) [<root>] 
    at JitCompiler._compileComponents (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:21) [<root>] 
    at createResult (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27240:21) [<root>] 
    at Zone.run (http://localhost:44444/node_modules/zone.js/dist/zone.js:113:43) [<root> => <root>] 
    at http://localhost:44444/node_modules/zone.js/dist/zone.js:520:57 [<root>] 
    at Zone.runTask (http://localhost:44444/node_modules/zone.js/dist/zone.js:151:47) [<root> => <root>] 
    at drainMicroTaskQueue (http://localhost:44444/node_modules/zone.js/dist/zone.js:418:35) [<root>] 
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:44444/node_modules/zone.js/dist/zone.js:349:25) [<root>] 
    at SyntaxError.BaseError [as constructor] (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1595:29) [<root>] 
    at new SyntaxError (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1793:18) [<root>] 
    at TemplateParser.parse (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:11222:21) [<root>] 
    at JitCompiler._compileTemplate (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27474:70) [<root>] 
    at eval (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:64) [<root>] 
    at Set.forEach (native) [<root>] 
    at JitCompiler._compileComponents (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:21) [<root>] 
    at createResult (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27240:21) [<root>] 
    at Zone.run (http://localhost:44444/node_modules/zone.js/dist/zone.js:113:43) [<root> => <root>] 
    at http://localhost:44444/node_modules/zone.js/dist/zone.js:520:57 [<root>] 
    at Zone.runTask (http://localhost:44444/node_modules/zone.js/dist/zone.js:151:47) [<root> => <root>] 
    at drainMicroTaskQueue (http://localhost:44444/node_modules/zone.js/dist/zone.js:418:35) [<root>] 
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:44444/node_modules/zone.js/dist/zone.js:349:25) [<root>] 
    at resolvePromise (http://localhost:44444/node_modules/zone.js/dist/zone.js:486:31) [<root>] 
    at resolvePromise (http://localhost:44444/node_modules/zone.js/dist/zone.js:471:17) [<root>] 
    at http://localhost:44444/node_modules/zone.js/dist/zone.js:520:17 [<root>] 
    at Zone.runTask (http://localhost:44444/node_modules/zone.js/dist/zone.js:151:47) [<root> => <root>] 
    at drainMicroTaskQueue (http://localhost:44444/node_modules/zone.js/dist/zone.js:418:35) [<root>] 
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:44444/node_modules/zone.js/dist/zone.js:349:25) [<root>] 
consoleError @ zone.js:407 
_loop_1 @ zone.js:434 
drainMicroTaskQueue @ zone.js:438 
ZoneTask.invoke @ zone.js:349

出典

2017-05-10 SimplyZ

チャートを使用したいコンポーネントのmodule.tsファイルにChartModuleをインポートする必要がありました。もともとはapp.module.tsにインポートされていました。

出典

2017-05-11 19:15:30 SimplyZ

あなたは他の変更を行っていますか？私はまったく同じ問題を抱えていますが、あなたのソリューションは私のために働いていません。 –

この作品。どうも。 – DanielGatti

結合するための属性構文を使用してみてください：

代わりに：

[data]="doughnutChartData"

試してみてください。

attr.data="{{doughnutChartData}}"

これはあなたのケースで動作するかどうかは定かではないんだけど、これは属性対DOMプロパティだし、どの角度の両方に結合ハンドル何に関係しています。

出典

2017-05-11 01:35:44 chrispy

ありがとうございました。これでエラーは解消されましたが、グラフは描画されません。 – SimplyZ

ええと、残念ながらAngularが関わったときのキャンバスの仕組みはわかりません。たぶん、npmパッケージか何かありますか？ Angular 4.2には新しいアニメーションが必要です。 – chrispy

それを考え出した。現在のコンポーネントのmodule.tsファイルにChartModuleをインポートしなければなりませんでした。 – SimplyZ

'canvas'の既知のプロパティではないため、 'data'にバインドできません。

答えて

関連する問題