HighCharts堆积柱形图：'plotOptions.series.stacking'是不相容的型别

rks48beu 于 2022-11-10 发布在 Highcharts

关注(0)|答案(1)|浏览(200)

尝试使用HighCharts和Angular创建一个堆叠柱形图，看起来像this example：

但收到以下错误：

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

同时使用以下选项：

Jmeter 板.组件.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
  };

Jmeter 板.组件.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>

移除绘图选项起作用，但列不堆叠（而是并排显示）：

怎么会有问题呢？我用的是最新的高排行榜

highcharts

来源：https://stackoverflow.com/questions/72201635/highcharts-stacked-column-chart-plotoptions-series-stacking-are-incompatible

1条答案

按热度按时间

nr7wwzry1#

发现解决方案如下（省略无关其他选项）：

Jmeter 板.组件.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;
}

Jmeter 板.组件.html

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

赞(0）回复(0）举报 2022-11-10

我来回答

HighCharts堆积柱形图：'plotOptions.series.stacking'是不相容的型别

1条答案

相关问题

热门标签

最新问答