如何在Highcharts中创建带动态系列的堆叠柱形图

实现方案 #

你之前的写法不符合Highcharts对series结构的要求：第一种直接把series映射为数值数组，第二种把系列名称设为了所有容器名组成的数组，只会生成一个不符合预期的系列。
你只需要先对扁平化的原始数据集按Container分组，再生成符合要求的series数组即可，具体实现如下：

第一步：预处理原始数据

// 按Container归集同个容器的所有月份数据
const containerMap = this.data.reduce((result, item) => {
  if (!result[item.Container]) {
    result[item.Container] = {}
  }
  // 以月份为key存储对应Scheduled_Open值，方便后续匹配x轴顺序
  result[item.Container][item.RPTNG_Months] = item.Scheduled_Open
  return result
}, {})

// 生成Highcharts要求的series结构
const dynamicSeries = Object.keys(containerMap).map(containerName => {
  // 按x轴已定义的rptng_months顺序填充数据，保证月份顺序对应
  const seriesData = this.rptng_months.map(month => {
    return containerMap[containerName][month] ?? 0
  })
  return {
    name: containerName,
    type: 'column',
    cursor: 'pointer',
    data: seriesData
  }
})

第二步：替换配置中的series项

把你原来Highcharts配置里的series字段替换为上面预处理得到的dynamicSeries即可：

Highcharts.chart(this.chartElement.nativeElement, {
  // 其余配置保持不变
  // ...
  series: dynamicSeries
});

注意事项

• 请保证this.rptng_months数组中的月份格式和原始数据中RPTNG_Months的格式完全一致，否则会匹配不到对应值，自动填充为0
• 你当前xAxis同时配置了type: 'datetime'和categories，如果使用分类轴的话可以去掉datetime类型声明，不影响堆叠效果

内容的提问来源于stack exchange，提问作者FlyFish