离子切换到另一个段时图表消失，如何解决这个问题？答案

【问题标题】：Chart disappear when switching to another segment in ionic, how to solve this issue?离子切换到另一个段时图表消失，如何解决这个问题？
【发布时间】：2018-08-07 00:46:46
【问题描述】：

在ionic中切换到另一个段时图表消失，如何解决这个问题？我是离子新手

当我打开此页面时，它显示正常图表，但当我更改段并返回时，图表变得不可见，请解决此问题
这是我的 HTML 代码

<ion-header>
  <ion-navbar  color="darkblue">
    <ion-title class = "header">Lead</ion-title>
  </ion-navbar>

  <ion-toolbar no-border-top color="primary">
    <ion-segment [(ngModel)]="target" color="white">
        <ion-segment-button value="report">
            Report
        </ion-segment-button>
        <ion-segment-button value="graph">
            Graph
        </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content>
    <div [ngSwitch]="target">

            <div *ngSwitchCase = "'report'" >
        <ion-card padding-top=10px>
          <ion-card-header>
              Bar Chart
          </ion-card-header>
                <ion-card-content>
                    <canvas #barCanvas></canvas>
                </ion-card-content>
        </ion-card>
            </div>


      <div *ngSwitchCase = "'graph'" >
        <ion-card padding-top=10px>
        <ion-card-header>Report</ion-card-header>
        <ion-card-content>

        </ion-card-content>
      </ion-card>
    </div>
  </div>
</ion-content>

这是我的打字稿代码

这是我实现所有图表细节的打字稿。

import { Component, ViewChild } from '@angular/core';
import { Chart } from 'chart.js';

@Component({
    templateUrl: 'mytarget.html'
})

export class MyTarget {
    @ViewChild('barCanvas') barCanvas;

    barChart: any;
    target: any;

    constructor() {
        this.target = "report";
    }

    ionViewDidLoad() {

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

            type: 'bar',
            data: {
                labels: ["Target", "Achieved"],
                datasets: [{
                    label: ' of Students',
                    data: [10, 8],
                    backgroundColor: [
                        // 'rgba(255, 99, 132, 0.2)',
                        // 'rgba(54, 162, 235, 0.2)'
                        'rgba(255,0,0,0.3)',
                        'rgba(0,255,0,0.3)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: false,

                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }

        });
    }
}

【问题讨论】：

标签： html ionic-framework ionic2

【解决方案1】：

如果您无法解决此问题，我在使用 ion-segment 时遇到了同样的问题，我可以通过将 ngSwitch 替换为 [hidden] 属性。

问题是画布只被渲染一次。一旦你在段之间切换，画布也会丢失，唯一的解决方案是在段之间切换时隐藏你的段

将您的 HTML 代码的 ion-content 部分编辑为下面的部分，您应该没问题

<ion-content>
  <div [hidden] = "target != 'report'" >
    <ion-card padding-top=10px>
      <ion-card-header>Bar Chart</ion-card-header>
        <ion-card-content>
          <canvas #barCanvas></canvas>
        </ion-card-content>
    </ion-card>
  </div>
  <div  [hidden] = "target != 'graph'" >
    <ion-card padding-top=10px>
    <ion-card-header>Report</ion-card-header>
    <ion-card-content>    </ion-card-content>      
  </div>
</ion-content>

这应该可以解决问题。但是，我不确定 [hidden] 属性在 div 上是否可用，如果没有，请删除 div 并将 [hidden] 属性放在离子卡

【讨论】：

非常感谢您的回答，我当时尝试了很多，终于我使用了ion-tab。

【解决方案2】：

我为我的 APP 使用 Segment 事件修复了如下代码，并在切换时再次重新加载

 <ion-toolbar no-border-top color="primary">
    <ion-segment [(ngModel)]="type" (ionChange)="segmentChanged($event)">
      <ion-segment-button value="loan">
        Loan
      </ion-segment-button>
      <ion-segment-button value="claim">
        Claim
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

在你的组件中

segmentChanged(ev: any) {
    if (ev._value != "claim") {
      setTimeout(() => {
        this.doughnutChart = this.getDoughnutChart();
        this.doughnutChart1 = this.getDoughnutChart1();
      }, 150);
    }
}

【讨论】：

【解决方案3】：

这让我挠了很久。但是除了将属性 ngSwitch 更改为 hidden 之外，您还必须在 Chartjs 选项中将 responsive 属性指定为 false。

   options: {
        responsive: false,
        maintainAspectRatio: false,
        layout: {
          padding: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0
          }
        },
        animation: {
          duration: 5000
        }
      }

否则，当您的图表元素显示状态从隐藏变为显示时，图表的高度将设置为 0，反之亦然。

【讨论】：