在Ionic2项目中的段内使用它时的图表问题

时间:2017-09-06 01:27:27

标签: ionic-framework ionic2 chart.js segment

我尝试使用由Ionic2中的细分受控制的图表(从Chart.js导入),但是当我将图表放入细分市场条件时,会发生以下错误:

  

运行时错误    this.barCanvas未定义

在细分控制之外,图表效果很好。

这是我的home.ts和home.html文件:



//home.ts file
import {
  Component,
  ViewChild
} from '@angular/core';
import {
  NavController,
  Platform
} from 'ionic-angular';
import {
  Chart
} from 'chart.js';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  @ViewChild('public barCanvas') public barCanvas;

  public barChart: any;

  tipoGrafico: string = "geral";
  isAndroid: boolean = false;

  constructor(platform: Platform) {
    this.isAndroid = platform.is('android');
  }




  ionViewDidLoad() {

    this.barChart = new Chart(this.barCanvas.nativeElement, {

      //parameters of my graphic...

    });

  }

}

    <!-- home.html file -->
    <ion-header>
      <ion-navbar no-border-bottom>
        <ion-title>
          Segments
        </ion-title>
      </ion-navbar>

      <ion-toolbar no-border-top>
        <ion-segment [(ngModel)]="tipoGrafico">
          <ion-segment-button value="geral">
            Geral
          </ion-segment-button>
          <ion-segment-button value="dipositivo">
            Dispositivo
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <div [ngSwitch]="tipoGrafico">
        <div *ngSwitchCase="'dispositivo'">
          -->
          <ion-card>
            Grafico semana -->
            <ion-card-content>
              <canvas #barCanvas></canvas>
            </ion-card-content>
          </ion-card>
        </div>
      </div>

    </ion-content>

    <ion-content>
      <div [ngSwitch]="tipoGrafico">
        <ion-list *ngSwitchCase="'geral'">
          <ion-item>
            <ion-thumbnail item-start>
              <img src="assets/img/teste.jpg">
            </ion-thumbnail>
            <h2>Geral</h2>
          </ion-item>
        </ion-list>
      </div>
    </ion-content>
&#13;
&#13;
&#13;

我没有多少能力使用这些语言,所以欢迎任何帮助!

0 个答案:

没有答案