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

如果您无法解决此问题，我使用离子段时遇到了同样的问题，我可以通过用 [hidden] <替换 ngSwitch 来解决它/ em>财产。

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

将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] 属性，如果没有，请删除div并将 [hidden] 属性放入离子卡

Answer 2

这使我ing了好多年。但是，除了将属性 ngSwitch 更改为隐藏外，您还必须在Chartjs选项中将响应属性指定为false。

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

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

Answer 3

我为我的APP Use 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 个答案: