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

Question

图表消失离子切换到另一段的时候，如何解决这个问题呢？我在新的离子

当我打开这个页面就显示正常图表，但是当我改变段并返回，图表变得不可见，请解决这个问题 这是我的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
                        }
                    }]
                }
            }

        });
    }
}

Answer 1

如果你还没有能够解决这个问题，我不得不使用离子段同样的问题，我能够通过与[隐藏]属性替换ngSwitch来解决它。

问题是，在画布上只能获得一次呈现。一旦你的段之间进行切换的画布也失去了，唯一的办法就是段之间切换时可以隐藏你段

编辑HTML代码的离子内容部分下面的一个，你应该没问题

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

这应该解决的问题。但是，我不知道的[隐藏]属性可以用DIV，如果没有，删除DIV并把[隐藏]属性在离子卡

Answer 2

这让我抓我的头的年龄。但是，以及改变属性ngSwitch隐藏你也有你的Chartjs选项来指定响应属性为假。

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

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

Answer 3

我喜欢固定在下面的代码我的应用程序使用区段事件和重新加载，而切换

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