バージョン:Cordova:6.3.1、Gulp CLI:1.2.2、Ionic framework:2.0。 0-rc.0、イオンCLIバージョン:2.1.0ng2-charts - 'base-chart'の既知のプロパティではないため、 'datasets'にバインドできません。
私は私のionic2アプリケーションでng2-chartsを使用しています。なぜなら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 { }
ChartComponentの
インポートないimport {ChartsModule} from "ng2-charts";
しかしimport {ChartsModule} from "ng2-charts/components/charts/charts;"
:
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
の問題です。そして私はnode_modules/chart.js/src/chart.js
として私index.html
でそれを参照するときに、NPMでインストールchart.js
は、404が得られたことがわかりました。
これは私がChart.js
自体をダウンロードしようとしました動作しませんでした後だから私はChart.bundle.min.js
をダウンロードしました。 (src/assets/js/...
に置きます)。
この問題は、ng2-charts\ng2-charts.js does not export ChartsModuleのコメント欄で取り上げました。しかし、答えが提供されておらず、これが根本的な質問ではないので、私はこれを投稿しました。
エラー:(私のアプリの読み込みを停止しているのでエラーメッセージが表示されないようにしてください)。
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"
"): [email protected]: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"
"): [email protected]:4
それが今ではもう、エラーを投げていないが、チャートのISNに属性として使用する必要があります「tはあなたが私にはわからない、それにサイズを追加する必要があるかもしれない – Ivaro18
を表示します。 CSSクラスの幅/高さはありますか? –
はこのplunkerを使用して、それを修正しました。病気は質問に答えたので答えを受け入れる。 https://plnkr.co/edit/MWE0umGfN3nZM6zLPPVI?p=preview – Ivaro18