HighCharts叠加列图：“plotOptions.series.stacking”是不兼容的类型

Question

尝试用HighCharts和角创建一个堆叠的列图，这看起来像这个例子

​

​

但是得到以下错误：

The types of 'plotOptions.series.stacking' are incompatible between these types.
    Type 'string' is not assignable to type 'OptionsStackingValue | undefined'.

在使用下列选项时：

dashboard.component.ts

  columnChart: any;
  columnUpdateFromInput = false;
  columnHighcharts = Highcharts;
  columnChartConstructor = "chart";
  columnChartCallback: any;
  columnChartOptions = {

    chart: {
      type: 'column'
    },
    title: {
      text: 'Stacked column chart'
    },
    tooltip: {
      split: true,
      valueSuffix: ' pers'
    },
    plotOptions: {
      series: {
        stacking: 'normal'
      }
    },
    exporting: {
      enabled: true
    },
    xAxis: {
      categories: this.columnCategories
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Total doses'
      },
      stackLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold',
          color: 'gray'
        }
      }
    },
    series: this.columnData
  };

dashboard.component.html

<div>
  <highcharts-chart
    id="columnStackedContainer"
    [Highcharts]="columnHighcharts"
    [constructorType]="columnChartConstructor"
    [options]="columnChartOptions"
    [callbackFunction]="columnChartCallback"
    [(update)]="columnUpdateFromInput"
    [oneToOne]="true"
    style="width: 100%; height: 400px; display: block;"
  >
  </highcharts-chart>
</div>

移除plotOptions工作，但列不堆叠(但并排显示)：

​

​

有什么可能是错的？我正在使用最新的HighCharts

Answer 1

找到解决方案如下(省略了无关的其他选项)：

dashboard.component.ts

plotOptions = {};

columnChartConstructor = "chart";
columnChartOptions = {
    chart: {
      type: 'column'
    },
    plotOptions: this.plotOptions,
    series: this.columnData
};

public ngOnInit(): void {
  this.dataService.getDoseStacked() {
    this.updateDoseStackedData(doseStackedApi);
  }

  setTimeout(() => { // trick for the chart to adapt itself
     window.dispatchEvent(
       new Event('resize')
     );
  }, 300);

}

updateDoseStackedData(doseStackedApi : DoseStackedApi) {
      this.columnChartOptions.plotOptions = {
        column: {
          stacking: 'normal'
        }
      };
      this.columnChart.hideLoading();
      this.columnUpdateFromInput = true;
}

dashboard.component.html

<div>
  <highcharts-chart
    id="columnStackedContainer"
    [constructorType]="columnChartConstructor"
    [options]="columnChartOptions"
  >
  </highcharts-chart>
</div>

​

​