如何使用具有动态值的 highchart.js 创建堆积柱形图

Question

Table

： 数组(4) 0 ： {MonthsName: '四月', AUTOLIV: 0, 大陆集团: 0, Herman miller: 0, REL: 0, …} 1 ： {MonthsName: '七月', AUTOLIV: 0, 大陆集团: 4, 赫尔曼米勒: 0, REL: 0, …} 2 ： {MonthsName: '六月', 奥托立夫: 1, 大陆: 0, 赫尔曼米勒: 0, REL: 0, …} 3 ： {MonthsName: '五月', AUTOLIV: 1, 大陆: 0, Herman miller: 1, REL: 1, …} 长度 ： 4 [[原型]] ： 数组(0) [[原型]] ： 对象

这是我在执行 PIVOT 函数后从数据库获取的结果

月份名称应作为 x 轴，其他列应作为堆叠值及其计数。

提前致谢。

Answer 1

您需要将数据映射到 Highcharts 所需的系列结构。例如，您可以这样做：

const data = [{
    MonthsName: 'April',
    AUTOLIV: 0,
    Continental: 0,
    'Herman miller': 0,
    REL: 0
  },
  ...
];

const xKey = 'MonthsName';
const series = {};
const chartSeries = [];

data.forEach((dataObj, index) => {
  for (let key in dataObj) {
    if (key !== xKey) {
      if (index === 0) {
        series[key] = {
          name: key,
          data: []
        };
      }
      series[key].data.push({
        name: dataObj[xKey],
        y: dataObj[key]
      });
    }
  }
});

for (let key in series) {
  chartSeries.push(series[key]);
}

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  xAxis: {
    type: 'category'
  },
  plotOptions: {
    column: {
      stacking: 'normal'
    }
  },
  series: chartSeries
});

---

现场演示：https://jsfiddle.net/BlackLabel/esj6hun5/

API 参考： https://api.highcharts.com/highcharts/series.column.data