[英]Ionic2 Angular2: I can't seem to get an ng2-chart to appear in my app
我有一個最初有2頁的標簽項目。 我試圖讓一個條形圖顯示在其中一個頁面上但沒有出現。 所以,我創建了第三頁,僅用於圖表測試。 我直接從ng-2charts文檔中提取了示例代碼,然后將其放在離子組件中。 但是,即使在新標簽中也沒有顯示任何內容。
這是我的代碼:
在app.ts / html中顯示我正確包含頁面:
//html file
<ion-tabs greenTheme [selectedIndex]="index">
<ion-tab tabIcon="people" #content tabTitle="My Roster" [root]="tab2"></ion-tab>
<ion-tab tabIcon="stats" #content tabTitle="Wage Overview" [root]="tab1"></ion-tab>
<ion-tab tabIcon='stats' #content tabTitle='Chart test' [root]='tab3'></ion-tab>
</ion-tabs>
//.ts file
import {MetricLandingPage} from './pages/metric-landing/metric-landing';
import {Roster} from './pages/roster/roster';
import {GlobalService} from './providers/global-service/global-service';
import {BarChartDemoComponent} from './pages/chart-test/chart-test';
....
//in the constructor
this.tab2 = Roster;
this.tab1 = MetricLandingPage;
this.tab3 = BarChartDemoComponent;
我在實際頁面中的代碼可以在我上面的鏈接中找到,但為了簡便起見,我將把它放在這里:
在chart-test.ts / html中顯示我剛剛添加必要的離子標簽時復制並粘貼:
<ion-navbar *navbar greenTheme>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>TEST</ion-title>
<ion-buttons menuToggle='right' end>
<button>
<ion-icon name='add'></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-content>
<base-chart class="chart"
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></base-chart>
</ion-content>
import {Component} from '@angular/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';
import {CHART_DIRECTIVES} from 'ng2-charts/ng2-charts';
// webpack html imports
@Component({
selector: 'bar-chart-demo',
templateUrl: 'build/pages/chart-test/chart-test.html',
directives: [CHART_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class BarChartDemoComponent {
public barChartOptions:any = {
scaleShowVerticalLines: false,
responsive: true
};
public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
public barChartType:string = 'bar';
public barChartLegend:boolean = true;
public 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
public chartClicked(e:any):void {
console.log(e);
}
public chartHovered(e:any):void {
console.log(e);
}
}
以下是圖表選項卡的結果:
確保您還完成了以下操作:
npm install chart.js --save
import'../node_modules/chart.js/dist/Chart.bundle.min.js';
.chart {display:block; 身高:100%; }
然后你的圖表應該工作。
看起來你正在使用ng2-charts遇到這個問題 。 嘗試使用上面帖子中幾個人所說的顯示風格。 display:block
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.