NG2-Charts 无法绑定到“数据集”，因为它不是“画布”的已知属性
Posted
技术标签:
【中文标题】NG2-Charts 无法绑定到“数据集”，因为它不是“画布”的已知属性【英文标题】：NG2-Charts Can't bind to 'datasets' since it isn't a known property of 'canvas' 【发布时间】：2017-02-22 07:15:06 【问题描述】：我正在尝试使用 NG2-Charts (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>
但我认为那是不正确的，因为该声明如何在高效的缩小/构建应用程序中起作用？我还认为我的 webpack 导入语句已经解决了这个问题？ 我四处搜索，但遗憾的是只在 NG2 Charts 上找到了一些 Angular 2 Beta 版本的东西。
有没有人知道如何解决这个问题？
感谢和干杯， 拉斐尔·希佩
【问题讨论】：
你在 app.module.ts 中导入 ChartsModule 了吗？ 不，我没有！那是有道理的！但我在 NG2-Charts 网站上找不到关于该模块的任何内容。导入语句会是什么样子？ 已经在您的 app.module.ts 中导入了 ChartsModule 但仍然出现问题。 【参考方案1】：原因可能是：您正在直接从您的子组件/模块中使用 Ng2Charts。
解决方案：您还必须在您的父模块上导入 Ng2Charts。 （导入 Ng2Charts [ng2-charts]，到你的父子模块）
祝大家修理愉快。
谢谢。 马琼·维勒加斯
【讨论】：
【参考方案2】：我正在与ng2-chart@3.0.0-rc.2合作
看起来属性chartType现在被称为type
所以它应该看起来像这样：
<canvas
style="display: block;background-color: #3a3939;"
id="canvas"
#myCanvas
baseChart
[type]="lineChartType"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="mfChartOptions"
[legend]="lineChartLegend">
</canvas>
【讨论】：
这拯救了我的一天！【参考方案3】：就我而言，这与在多个模块中包含 ChartsModule 或导出它无关。
我创建了一个使用ng-chart 的图表组件，然后发现我需要它的另一个版本。所以我复制了组件，重命名了类和模板文件，但是忘记更新@Component装饰器中的templateUrl属性。
让两个不同的组件引用同一个模板文件会产生完全相同的错误：
无法绑定到“数据集”，因为它不是“画布”的已知属性
我将新组件更改为使用正确的 HTML 模板后，错误就解决了。
仅供参考，我在图表组件的模块中引用ChartsModule，如@sanket 的answer 所示，以及引用它们的页面组件的模块（因此在@987654327 中不需要它@)。
【讨论】：
【参考方案4】：如果您的组件在 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
【讨论】：
【参考方案5】：如果您使用的是共享模块，您还需要从那里导出 ChartsModule，以使其可用于所有使用您的共享模块的组件。
// 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
;
【讨论】：
【参考方案6】：不要将 ChartsModule 导入 App Module 中，而是将其导入您正在使用的模块内部。例如，主页模块（如果在主页中使用图表）。
【讨论】：
【参考方案7】：我正在使用 ng2-charts + Angular 7 + Ionic 4，我花了几个小时寻找解决方案。这终于对我有用（当然，在遵循最初的步骤之后，比如安装 ng2-charts 和 chart.js）。只需在以下文件中导入 ChartsModule：
app.module.ts
import ChartsModule from 'ng2-charts';
...
imports: [ChartsModule]
yourPage.module.ts
import ChartsModule from 'ng2-charts';
@NgModule(
imports: [
IonicModule,
CommonModule,
FormsModule,
RouterModule.forChild([ path: '', component: YourPagePage ]),
**ChartsModule**
]
)
我也尝试在 yourPage.page.ts 中导入它，但解决方案是在 yourPage.module.ts 中导入它！
试试看。
【讨论】：
非常感谢您的回答！它对我有用。我花了几天时间试图了解我做错了什么。 不客气，牧师。无论如何，这些天我遇到了同样的问题，而我的解决方案不足以解决它。为了解决这个问题，我还需要在 yourPage.module.ts 文件中export ChartsModule。这意味着我也需要在 exports 数组中声明它：exports: [ ... ChartsModule ...] 在 Ionic 和 Angular 项目中运行良好！谢谢！【参考方案8】：我遇到了同样的问题。我在 github 上发现您也只需在子模块中插入 ChartsModule 即可。首先你添加app.module.ts 和，在我的例子中，reports.module.ts。
【讨论】：
我也遇到了同样的问题！如果您只使用reports.module.ts 中的图表，您可能会丢失app.module.ts 中的导入。谢谢
你是我的英雄，它就像魔法一样。非常感谢。我正在使用 ionic 4 版本并添加了 import ChartsModule from 'ng2-charts';在 tab1.modules.ts 文件中，还在导入数组中添加了 ChartsModule 关键字。再次感谢。
我不知道我们的项目在结构上有何不同，但就我而言，从app.module.ts 中删除导入会导致应用程序崩溃。
我在这个问题上花了很多时间。这个答案显示了导入 ChartsModule 的两个地方，这节省了我的时间。
谢谢，我在 angular 8 中遇到了同样的问题【参考方案9】：
在我的情况下，我不得不改变我的导入方式，并在我的 html 文件标签中做一点改变：
chart.component.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" ...
chart-balance.template
<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>;
【讨论】：
【参考方案10】：尝试像这样在你的 app.module.ts 中导入 ChartsModule-
import ChartsModule from 'ng2-charts/ng2-charts';
imports: [
.....
ChartsModule
.....
]
【讨论】：
这成功了。谢谢 :) 这应该被添加到网站 (valor-software.com/ng2-charts) 以便设置说明更加清晰。 'ng2-charts' 和 'ng2-charts/ng2-charts' 有区别吗？我都试过了，但没有一个对我有用。我正在使用 ng2-charts (1.6.0) 和 chart.js (2.7.2)。 我想这应该不重要吧？？我从'ng2-charts' 导入，它工作正常。检查您是否像 André Luiz 所说的那样使用子模块。
我觉得现在不行，试试， import ChartsModule from 'ng2-charts';
从'ng2-charts'导入 ChartsModule ；但它应该在您导入要在其上显示图表的组件的模块中。以上是关于NG2-Charts 无法绑定到“数据集”，因为它不是“画布”的已知属性的主要内容，如果未能解决你的问题，请参考以下文章
Angular 7 无法绑定到“routerlink”，因为它不是“a”的已知属性