ng2-charts - 无法绑定到“数据集",因为它不是“基本图表"的已知属性 [英] ng2-charts - Can't bind to 'datasets' since it isn't a known property of 'base-chart'
问题描述
版本:Cordova:6.3.1,Gulp CLI:1.2.2,Ionic 框架:2.0.0-rc.0,Ionic CLI 版本:2.1.0
我在我的 ionic2 应用程序中使用 ng2-charts.
I'm using ng2-charts in my ionic2 application.
Import not import {ChartsModule} from "ng2-charts";
但是 import {ChartsModule} from "ng2-charts/components/charts/charts;"
因为 这个(问题 #440)
Import not import {ChartsModule} from "ng2-charts";
but import {ChartsModule} from "ng2-charts/components/charts/charts;"
because of this (issue #440)
我的整个 app.module.ts
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ChartsModule } from 'ng2-charts/components/charts/charts';
import { MyApp } from './app.component';
import { EventsPage } from '../pages/events/events.component';
import { ChartComponent } from '../pages/chart/chart.component';
import { APICaller } from '../services/APICaller.service';
import { EventDetailComponent } from '../pages/event-detail/event-detail.component';
import { ParticipantDetail } from '../pages/participant-detail/participant-detail.component';
import { ParticipantFeedComponent } from '../pages/participant-feed/participant-feed.component';
@NgModule({
declarations: [
MyApp,
EventsPage,
EventDetailComponent,
ParticipantDetail,
ParticipantFeedComponent,
ChartComponent
],
imports: [
IonicModule.forRoot(MyApp),
ChartsModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
EventsPage,
EventDetailComponent,
ParticipantDetail,
ParticipantFeedComponent,
ChartComponent
],
providers: [APICaller]
})
export class AppModule { }
图表组件:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'pie-chart',
template: `
<base-chart
class="chart"
[datasets]="datasets"
[labels]="labels"
[options]="options"
[chartType]="'doughnut'">Titel?
</base-chart>
`
})
export class ChartComponent implements OnInit {
private datasets = [
{
label: "# of Votes",
data: [12,19,3,5,2,3]
}
];
private labels = ['Red', 'blue', 'yellow', 'green', 'purple', 'orange'];
private options = {
scales: {
yAxes: [{
beginAtZero: true
}]
}
};
constructor() {
}
ngOnInit() { }
}
我认为这可能是 Chart.js
的问题.我发现与 npm 一起安装的 chart.js
在我的 index.html
中将其引用为 node_modules/chart.js/src/时会导致 404chart.js
.
I thought this might be an issue with Chart.js
. And I found that the chart.js
installed with npm was resulting in a 404 when referencing it in my index.html
as node_modules/chart.js/src/chart.js
.
所以我下载了 Chart.bundle.min.js
在这不起作用之后我尝试下载 Chart.js
本身.(将其放在 src/assets/js/...
中).
So I downloaded the Chart.bundle.min.js
after this didn't work I tried downloading the Chart.js
itself. (placing it in src/assets/js/...
).
ng2-charts g2 中也解决了这个问题-charts.js 不导出 ChartsModule 的评论部分.但由于没有提供答案,而且这不是根本问题,所以我发布了这个.
This problem was also addressed in ng2-charts g2-charts.js does not export ChartsModule 's comment section. But since no answer has been provided and this wasn't the root question, I posted this one.
错误:(抑制错误消息无济于事,因为它会阻止我的应用加载).
Error: (suppressing the errormessage won't help since it's stopping my app from loading).
polyfills.js:3 Unhandled Promise rejection: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'datasets' input, then verify that it is part of this module.
2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
("
class="chart"
[ERROR ->][datasets]="datasets"
[labels]="labels"
"): ChartComponent@4:4
Can't bind to 'labels' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'labels' input, then verify that it is part of this module.
2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
("
[datasets]="datasets"
[ERROR ->][labels]="labels"
[options]="options"
"): ChartComponent@6:4
推荐答案
我没用过这个库,只是看了看最新(1.4.1)版本的源代码,它应该用作画布上的属性<代码>@Directive({selector: 'canvas[baseChart]'})
I've never used this library, but from just looking at the latest (1.4.1) version's source code, it should be used as an attribute on a canvas @Directive({selector: 'canvas[baseChart]'})
<canvas baseChart
class="chart"
[data]="datasets"
[labels]="labels"
[options]="options"
[chartType]="'doughnut'">
</canvas>
这篇关于ng2-charts - 无法绑定到“数据集",因为它不是“基本图表"的已知属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!