离子2-在段中使用Highchart

Question

我在该段中使用HighChart库，我的段有2个Tab仪表板和New，我的图表在仪表板选项卡中。第一次运行：我的图表运行，但我单击新选项卡并回到仪表板选项卡=>我的图表不运行？[对不起，我不好英语] - 我的代码html：

<div class="segment-chart">
    <ion-segment [(ngModel)]="pet">
        <ion-segment-button value="dashboard" (ionSelect)="selectedFriends()">
            DASHBOARD
        </ion-segment-button>
        <ion-segment-button value="new">
            NEW
        </ion-segment-button>
    </ion-segment>
</div>
<div [ngSwitch]="pet">
    <div class="chart" *ngSwitchCase="'dashboard'">
        <!--View Chart-->
        <div #chart>
            <chart type="StockChart" [options]="options"></chart>
        </div>
    </div>
    <ul *ngSwitchCase="'new'" style="list-style-type:none" class="div-new-body">
        <li class="div-new-li" *ngFor="let new of lsNews">
            <div class="div-new-detail">
                <div class="div-new-title">
                    {{new.date}}
                </div>
                <div class="div-new-content">
                    {{new.title}}
                </div>
            </div>
            <div class="div-new-nav">></div>
        </li>
    </ul>
</div>

我的代码文件TS：

export class ChartPage implements AfterViewInit, OnDestroy {
private _chart: any;
lastData: any
lstData: any = []
pet : any
lsNews : any = []
opts : any;
@ViewChild('chart') public chartEl: ElementRef;
//chartOption: any
// Destroy Chart
ngOnDestroy(): void {
    // throw new Error("Method not implemented.");
    console.log("OnDestroy run")
    var chart = this._chart
    chart.destroy();
}
// option Chart
ngAfterViewInit() {                    
    if (this.chartEl && this.chartEl.nativeElement) {
        this.opts.chart = {
            // type: 'area',
            renderTo: this.chartEl.nativeElement,   
              backgroundColor: {
        linearGradient: [0, 0, 500, 500],
        stops: [
            [0, '#3d4d64'],
            [1, '#3d4d64']
        ]         
    },
     height: '90%',
      spacingBottom: 15,
    spacingTop: 10,
    spacingLeft: 10,
    spacingRight: 10,   
        };
        console.log('chart create ss')
        this._chart = new Highcharts.StockChart(this.opts);         
    }
}
constructor(public navCtrl: NavController, public navParams: NavParams, public service: Service) {
    const me = this;
    this.pet= 'dashboard';
    setInterval(function () {
        if (me._chart) {
            me._chart['series'][0].addPoint([
                (new Date()).getTime(), // gia tri truc x
                //5// gia tri truc y
                me.getData()
            ],
                true,
                true);
        }
    }, 3000);
      this.opts = {           
        credits: {
               enabled: false
             },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,             
        labels: {
            style: {
                color: '#705f43' // color time
            }
        },
        lineColor: '#705f43' // 2 line cuoi mau trang                      
    },
          yAxis: {
        gridLineColor: '#705f43', //line gach ngang
        labels: {
            style: {
                color: '#fff'
            }
        },
        lineColor: '#ff0000',
        minorGridLineColor: '#ff0000',
        tickColor: '#fff',
        tickWidth: 1,
        title: {
            style: {
                color: '#ff0000'
            }
        }
    },
        navigator: {
                enabled: false
            },          
        rangeSelector: {
            buttons: [{
                count: 1,
                type: 'minute',
                text: '1M'
            }, {
                count: 5,
                type: 'minute',
                text: '5M'
            }, {
                type: 'all',
                text: 'All'
            }],
    inputEnabled: false,
            selected: 0,
        },
        series: [{              
            name: 'Random data',
            data: (function () {
                // generate an array of random data
                var data = [],
                    time = (new Date()).getTime(),
                    i;
                for (i = -50; i <= 0; i += 1) {
                    data.push([
                        time + i * 1000,
                        Math.round(Math.random() * 100)
                    ]);
                }
                return data;
            }()),
             zones: [{
                color: '#f8ad40'
    }]
        }]
    };     
    //end contructor
}

Answer 1

如果您无法解决此问题，我使用离子段也遇到了相同的问题，当我用[隐藏]属性替换NgSwitch时，我就可以解决它。

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

将您的HTML代码编辑为下面的代码，您应该还可以

    <div class="segment-chart">
    <ion-segment [(ngModel)]="pet">
        <ion-segment-button value="dashboard" (ionSelect)="selectedFriends()">
            DASHBOARD
        </ion-segment-button>
        <ion-segment-button value="new">
            NEW
        </ion-segment-button>
    </ion-segment>
</div>
<div >
    <div class="chart" [hidden] = "pet != 'dashboard'">
        <!--View Chart-->
        <div #chart>
            <chart type="StockChart" [options]="options"></chart>
        </div>
    </div>
    <ul  [hidden] = "pet != 'new'" style="list-style-type:none" class="div-new-body">
        <li class="div-new-li" *ngFor="let new of lsNews">
            <div class="div-new-detail">
                <div class="div-new-title">
                    {{new.date}}
                </div>
                <div class="div-new-content">
                    {{new.title}}
                </div>
            </div>
            <div class="div-new-nav">></div>
        </li>
    </ul>
</div>

应该解决问题。