切换到离子中的另一个细分市场时，图表消失了，如何解决此问题

Question

图表在切换到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
                        }
                    }]
                }
            }
        });
    }
}

Answer 1

如果您无法解决此问题，我使用离子段也遇到了相同的问题，并且可以通过用 ngswitch 来解决它 [hidden] 属性。

问题是画布只能渲染一次。一旦您在各个细分之间切换后，帆布也会丢失，唯一的解决方案是在段之间切换时隐藏细分市场

将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 上提供 [hidden] 属性 ion-card

Answer 2

我固定了以下代码的应用程序，请使用细分事件，然后在切换时再次重新加载

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

Answer 3

这让我抓了很久了。但是，除了将属性 ngswitch 更改为 hidden 外，您还必须在ChartJS选项中将响应属性指定为false。

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

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