반응형
NG2-차트는 '캔버스'의 알려진 속성이 아니므로 '데이터셋'에 바인딩할 수 없습니다.
NG2-Chart(http://valor-software.com/ng2-charts/) 의 기본 예시를 사용하려고 합니다.
HTML 부분을 복사해서 붙여넣었습니다.
<div style="display: block">
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
그리고 TypeScript 부분.
private barChartOptions: any = {
scaleShowVerticalLines: false,
responsive: true
};
private barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
private barChartType: string = 'bar';
private barChartLegend: boolean = true;
private 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
private chartClicked(e: any): void {
console.log(e);
}
private chartHovered(e: any): void {
console.log(e);
}
나는 달립니다npm install ng2-charts --save,npm install chart.js --save그리고.typings install dt~chart.js --save --global
vendor.ts 파일로 chart.js도 가져왔습니다.
import 'chart.js';
내 종속성:
{
"@angular/common": "^2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"angular2-jwt": "^0.1.18",
"chart.js": "^2.3.0",
"core-js": "^2.4.0",
"json-loader": "^0.5.4",
"moment": "^2.14.1",
"ng2-charts": "^1.4.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.11",
"zone.js": "^0.6.23"
}
여기 오류가 있습니다.
Unhandled Promise rejection: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("iuminfooneoptionsTwo">
<div style="display: block">
<canvas baseChart [ERROR ->][datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLeg"): PlayerprofileComponent@39:34
Can't bind to 'labels' since it isn't a known property of 'canvas'. (" <div style="display: block">
<canvas baseChart [datasets]="barChartData" [ERROR ->][labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChart"): PlayerprofileComponent@39:60
Can't bind to 'options' since it isn't a known property of 'canvas'. ("lay: block">
<canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [ERROR ->][options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartH"): PlayerprofileComponent@39:86
Can't bind to 'legend' since it isn't a known property of 'canvas'. (" <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [ERROR ->][legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)"): PlayerprofileComponent@39:114
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("ets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [ERROR ->][chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
"): PlayerprofileComponent@39:140 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("iuminfooneoptionsTwo">
<div style="display: block">
<canvas baseChart [ERROR ->][datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLeg"): PlayerprofileComponent@39:34
Can't bind to 'labels' since it isn't a known property of 'canvas'. (" <div style="display: block">
<canvas baseChart [datasets]="barChartData" [ERROR ->][labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChart"): PlayerprofileComponent@39:60
Can't bind to 'options' since it isn't a known property of 'canvas'. ("lay: block">
<canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [ERROR ->][options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartH"): PlayerprofileComponent@39:86
Can't bind to 'legend' since it isn't a known property of 'canvas'. (" <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [ERROR ->][legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)"): PlayerprofileComponent@39:114
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("ets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [ERROR ->][chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
"): PlayerprofileComponent@39:140
at TemplateParser.parse (eval at <anonymous> (http://localhost:8080/vendor.js:623:1), <anonymous>:133:19)
at RuntimeCompiler._compileTemplate (eval at <anonymous> (http://localhost:8080/vendor.js:2103:1), <anonymous>:244:51)
at eval (eval at <anonymous> (http://localhost:8080/vendor.js:2103:1), <anonymous>:167:83)
at Set.forEach (native)
at compile (eval at <anonymous> (http://localhost:8080/vendor.js:2103:1), <anonymous>:167:47)
at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:192:28)
at Zone.run (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:85:43)
at eval (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:451:57)
at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:225:37)
at Zone.runTask (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:125:47)
at drainMicroTaskQueue (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:357:35)
NG2-Charts 웹사이트에서 HTML에 이 내용을 포함해야 한다고 합니다.
<script src="node_modules/chart.js/src/chart.js"></script>
하지만 저는 이 문구가 생산적인 미니화/빌트 앱에서 어떻게 작동할까요?저도 웹팩 수입명세서가 이미 처리될 줄 알았는데요?구글에서 검색했지만 슬프게도 NG2 차트에서 앵글 2 베타 버전에 대한 것만 찾았습니다.
그걸 어떻게 고치는지 아는 사람?
감사와 건배, 라파엘 히페
app.module.ts에서 ChartsModule을 가져오십시오.
import { ChartsModule } from 'ng2-charts/ng2-charts';
imports: [
.....
ChartsModule
.....
]
저도 똑같은 문제가 있었습니다. 모듈에 github에서 ChartsModule다.합니다를 합니다.app.module.ts 제 reports.module.ts.
ng2-chart + Angular 7 + Ionic 4로 작업하고 있는데 몇 시간 동안 해결책을 찾았습니다.그리고 이것은 마침내 저에게 효과가 있었습니다(물론 ng2-charts 및 charts.js 설치와 같은 초기 단계를 수행한 후).ChartsModule을 다음 파일에 가져오기만 하면 됩니다.
app.module.ts
import { ChartsModule } from 'ng2-charts';
...
imports: [ChartsModule]
페이지.module.ts
import { ChartsModule } from 'ng2-charts';
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
RouterModule.forChild([{ path: '', component: YourPagePage }]),
**ChartsModule**
]
})
당신의 Page.page.ts로도 가져오려고 했는데 해결책은 당신의 Page.module.ts로 가져오는 것이었습니다!
한번 해보세요.
같이 일하고 있습니다.ng2-chart@3.0.0-rc.2
로 chartType다라고 .type
그래서 다음과 같이 보여야 합니다.
<canvas
style="display: block;background-color: #3a3939;"
width="600"
height="300"
id="canvas"
#myCanvas
baseChart
[type]="lineChartType"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="mfChartOptions"
[legend]="lineChartLegend">
</canvas>
app.module.ts단순히 다음과 같은 작업을 수행하게 됩니다.
app.module.ts
import { ChartsModule } from 'ng2-charts';
...
@NgModule({
...
imports: [
...
ChartsModule,
...
]
})
export class AppModule{ }
module-where-your-component-is-declared.module.ts
import { ChartsModule } from 'ng2-charts';
...
@NgModule({
declarations: [YourComponent],
imports: [
...
ChartsModule,
...
],
...
})
export class ModuleWhereYourComponentIsDeclared { }
그 이유는 다음과 같습니다. 자식 구성 요소/모듈에서 Ng2Chart를 직접 사용하는 것입니다.
솔루션:부모 모듈에서도 Ng2Chart를 가져와야 합니다. (부모 및 자식 모듈로 Ng2Chart [ng2-Chart] 가져오기)
모두들 행복하게 잘 고쳤습니다.
감사해요.마르준 빌레가스
Shared Module(공유 모듈)을 사용하는 경우 Shared Module(공유 모듈)을 사용하는 모든 구성요소에서 사용할 수 있도록 차트 모듈을 여기서 내보내야 합니다.
// Simplified module only showing what's important for ChartsModule
import { NgModule } from '@angular/core';
import { ChartsModule } from 'ng2-charts';
@NgModule({
declarations: [],
imports: [ChartsModule],
exports: [ChartsModule]
})
export class SharedModule {
static forRoot(): ModuleWithProviders<SharedModule> {
return {
ngModule: SharedModule
};
}
}
앱 모듈에서 차트 모듈을 가져오는 대신 사용 중인 내부 모듈로 가져옵니다.예를 들어, 홈 모듈(홈 페이지에서 차트를 사용하는 경우)입니다.
제 경우에는, 다음과 같은 것들과는 아무런 관련이 없었습니다.ChartsModule여러 모듈로 구성하거나 내보낼 수 있습니다.
다음을 사용한 차트 구성 요소를 작성했습니다.ng-chart다른 버전이 필요하다는 걸 알게 됐어요그래서 구성요소를 복사하고 클래스와 템플릿 파일의 이름을 바꿨지만 업데이트하는 것을 잊었습니다.templateUrl에 있는 재산@Component장식가
동일한 템플릿 파일을 참조하는 두 개의 서로 다른 구성 요소가 있으면 정확히 동일한 오류가 발생했습니다.
'canvas'의 알려진 속성이 아니므로 'datasets'에 바인딩할 수 없습니다.
HTML 템플릿을 정확하게 사용하도록 새 구성요소를 변경하자마자 오류가 해결되었습니다.
참고로, 참고로ChartsModule@mychart components의 모듈과 이를 참조하는 페이지 components의 모듈에 있는 @sanket의 답변과 같이 (따라서 에 필요하지 않습니다).AppModule).
ANGLE 14
현재 가져오기 중인 항목은 다음과 같습니다.
import { NgChartsModule } from 'ng2-charts';
// In your App's module:
imports: [
NgChartsModule
]
Angular version 14, ng2-chart version 4 및 독립 실행형 구성 요소를 사용하는 경우 Import해야 합니다.NgChartsModule둘 다app.module.ts그리고.your.component.ts서류철
당신의.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { ChartConfiguration, ChartOptions } from 'chart.js';
import { NgChartsModule } from 'ng2-charts';
@Component({
selector: 'app-dashboard',
standalone: true,
imports: [CommonModule, NgChartsModule],
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgChartsModule } from 'ng2-charts';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
NgChartsModule,
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
제 경우에는 가져오기 방법을 변경하고 HTML 파일 태그를 약간 변경해야 했습니다.
차트.구성요소.ts
import {Component} from '@angular/core';
import {CHART_DIRECTIVES} from 'ng2-charts/ng2-charts';
@Component({
selector: 'chart-balance',
template: require('./templates/chart-balance.template'),
styles: [`.chart {display: block; width: 100%;}`],
directives: [CHART_DIRECTIVES]
})
export class ChartBalanceComponent {
public barChartOptions:any = {
scaleShowVerticalLines: false,
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: label => `${label.toLocaleString()}`
}
}]
}
};
public barChartLabels:string[] = ['2014', '2015', '2016'];
public barChartType:string = 'bar';
public barChartLegend:boolean = true;
public barChartData:any[] = [
{data: [32131, 3432, 543], label:'Test 1'},
{data: [54353, 432, 768], label:'Test 2'}
];
// events
public chartClicked(e:any):void {
console.log(e);
}
public chartHovered(e:any):void {
console.log(e);
}
}
여기에 제가 한 또 다른 변화가 있습니다.
notice -- > base-chart class="chart"...
차트로 균형
<base-chart class="chart"
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></base-chart>
ng2-
export * from './components/charts/charts';
declare var _default: {
directives: any[][];
};
export default _default;
차트로
import { OnDestroy, OnInit, OnChanges, EventEmitter, ElementRef } from '@angular/core';
export declare class BaseChartComponent implements OnDestroy, OnChanges, OnInit {
static defaultColors: Array<number[]>;
data: number[] | Array<number[]>;
datasets: any[];
labels: Array<any>;
options: any;
chartType: string;
colors: Array<any>;
legend: boolean;
chartClick: EventEmitter<any>;
chartHover: EventEmitter<any>;
private ctx;
private cvs;
private parent;
private chart;
private initFlag;
private element;
constructor(element: ElementRef);
ngOnInit(): any;
ngOnChanges(): any;
ngOnDestroy(): any;
getChartBuilder(ctx: any): any;
private refresh();
}
export interface Color {
backgroundColor?: string | string[];
borderWidth?: number | number[];
borderColor?: string | string[];
borderCapStyle?: string;
borderDash?: number[];
borderDashOffset?: number;
borderJoinStyle?: string;
pointBorderColor?: string | string[];
pointBackgroundColor?: string | string[];
pointBorderWidth?: number | number[];
pointRadius?: number | number[];
pointHoverRadius?: number | number[];
pointHitRadius?: number | number[];
pointHoverBackgroundColor?: string | string[];
pointHoverBorderColor?: string | string[];
pointHoverBorderWidth?: number | number[];
pointStyle?: string | string[];
hoverBackgroundColor?: string | string[];
hoverBorderColor?: string | string[];
hoverBorderWidth?: number;
}
export interface Colors extends Color {
data?: number[];
label?: string;
}
export declare const CHART_DIRECTIVES: Array<any>;
언급URL : https://stackoverflow.com/questions/40016333/ng2-charts-cant-bind-to-datasets-since-it-isnt-a-known-property-of-canvas
반응형
'sourcecode' 카테고리의 다른 글
| jQuery - 입력 요소가 텍스트 상자인지 선택 목록인지 확인합니다. (0) | 2023.10.16 |
|---|---|
| Centos7에 LuaSQL 설치 (0) | 2023.10.16 |
| mysqldump 및 데이터베이스 사용자 사용 (0) | 2023.10.16 |
| nuget 'packages' 요소가 경고로 선언되지 않았습니다. (0) | 2023.10.16 |
| 워드프레스 대시보드가 로드되지 않음 (0) | 2023.10.16 |