Ionic2 Angular2：我似乎无法在我的应用程序中显示ng2图表

Question

我有一个最初有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);
  }
}

以下是图表选项卡的结果：

Answer 1

确保您还完成了以下操作：

• 安装Chart.js

npm install chart.js --save

• 在app.ts文件中，确保导入chart.js

import'../node_modules/chart.js/dist/Chart.bundle.min.js';

• 在显示选项卡的页面的scss文件中，插入以下内容：

.chart {display：block; 身高：100％; }

然后你的图表应该工作。

Answer 2

看起来你正在使用ng2-charts遇到这个问题 。 尝试使用上面帖子中几个人所说的显示风格。 display:block