Ionic V6 和 highchart-angular 無法正確顯示

Question

我正在使用 highchart-angular 庫在 ionic 6 應用程序中實現 highcharts，當我加載組件時，圖表不適應頁面大小

我正在使用空白離子模板並使用 highchart-angular 的默認示例

這是我的代碼https://stackblitz.com/edit/angular-ivy-asdse6?file=src%2Fapp%2Fhome%2Fhome.page.scss

我的 html 是這個

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title> Blank </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <highcharts-chart
      [Highcharts]="highcharts"
      [options]="chartOptions"
      class="chart"
      (chartInstance)="setChart($event)"
      (resized)="chart?.reflow()"
    >
    </highcharts-chart>
  </div>
</ion-content>

和組件 typescript 是這個

import {
  AfterViewInit,
  Component,
  ElementRef,
  OnInit,
  ViewChild,
} from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit, AfterViewInit {
  @ViewChild('chart', { static: false })
  container: ElementRef<HTMLDivElement>;
  chart: Highcharts.Chart;
  stack: Highcharts.OptionsStackingValue = undefined;
  chartType = 'bar';
  highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    chart: {
      type: this.chartType,
    },
    title: {
      text: '',
    },
    legend: {
      enabled: false,
    },
    plotOptions: {
      series: {
        stacking: this.stack,
      },
    },
    series: [
      {
        data: [10, 3],
        type: undefined,
      },
      {
        data: [100, 3],
        type: undefined,
      },
    ],
  };

  constructor() {}

  ngAfterViewInit(): void {}

  setChart(chart: Highcharts.Chart) {
    this.chart = chart;
  }

  ngOnInit() {}
}

Answer 1

我發現了代碼的問題

為了使圖表適合容器，我必須添加事件並調用 the.reflow(); 像這樣的方法

  chartCallback(chart): void {
    setTimeout(() => {
      chart.reflow();
    }, 0);
  }

在這樣的組件中

  <highcharts-chart
    class="chart"
    [Highcharts]="highcharts"
    [options]="chartOptions"
    (chartInstance)="setChart($event)"
    [callbackFunction]="chartCallback"
    (resized)="chart?.reflow()"
  >
  </highcharts-chart>

我還更新了 stackblitz 代碼