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