如何使用动态数据在 highcharts 中绘制堆积条形图？

Question

您好，我正在研究 highcharts 堆积图，所以我从 api 获取的数据是这样的：

[{
        name: "john",
        task: "Project - 1",
        units: 88.25,
      },
      {
        name: "john",
        task: "Others",
        units: 79.75,
      },
      {
        name: "joe",
        task: "Others",
        units: 120,
      },
      {
        name: "jane",
        task: "Others",
        units: 88.75,
      },
      {
        name: "jane",
        task: "Project - 1",
        units: 4,
      }

    ]

这是 jsfiddle link Demo

如何用动态数据绘制堆积条形图？ TIA.

Answer 1

您需要将您的数据映射到 Highcharts 所需的系列结构，并将 x 轴与类别一起使用。

const series = [];
const categories = [];

data.forEach(function(dataEl) {
    const existingSeries = series.find(s => s.name === dataEl.name);
    const existingCategory = categories.find(c => c === dataEl.task);

    if (!existingCategory) {
        categories.push(dataEl.task);
    }

    if (existingSeries) {
        existingSeries.data.push([categories.indexOf(dataEl.task), dataEl.units]);
    } else {
        series.push({
            name: dataEl.name,
            data: [
                [categories.indexOf(dataEl.task), dataEl.units]
            ]
        });
    }
});

Highcharts.chart('container', {
    ...,
    xAxis: {
        categories,
        ...
    },,
    series
});

现场演示： http://jsfiddle.net/BlackLabel/Lutyq4e6/

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

如何使用动态数据在 highcharts 中绘制堆积条形图？

How to plot stacked bar chart in highcharts with dynamic data?

javascript

highcharts

angular