usa - ionic sin angular

Ionic2 Angular2: parece que no puedo obtener un gráfico ng2 para que aparezca en mi aplicación

Question

Tengo un proyecto de pestañas que originalmente tenía 2 páginas. Estaba intentando que apareciera un gráfico de barras en una de las páginas, pero no aparecía nada. Entonces, creé una tercera página simplemente para las pruebas de gráfico. Saqué el código de muestra directamente de la documentación de ng-2charts , y luego lo puse dentro de los componentes iónicos. Sin embargo, nada aparece aún en la nueva pestaña.

Aquí está el código que tengo:

En la aplicación.ts / html para mostrar que estoy incluyendo las páginas correctamente:

//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;

El código que tengo en la página actual se puede encontrar en el enlace que puse arriba, pero para abreviar, lo pondré aquí para:

En el chart-test.ts / html para mostrar que acabo de copiar y pegar al agregar las etiquetas iónicas necesarias:

<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);
  }
}

Aquí se muestra el resultado de la pestaña del gráfico:

Answer 1

Asegúrese de haber hecho lo siguiente:

• Instalar Chart.js

npm instalar chart.js --save

• En su archivo app.ts , asegúrese de importar chart.js

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

• En el archivo scss de la página que muestra la pestaña, inserte lo siguiente:

.chart {display: bloque; altura: 100%; }

Entonces su tabla debería funcionar.

Answer 2

Parece que te encuentras con este problema con ng2-charts. Intenta usar el estilo de visualización tal como lo mencionan algunas personas en la publicación anterior. display:block