Highchart：如何绘制堆叠条形图，下方 JSON 响应

Question

我在下面使用 Json 绘制带线的堆叠图（如下图所示）

[{
                    "TD": "2",
                    "TE": "5",
                    "TI": "3",
                    "TLI": "2",
                    "TR": "2",
                    "hour": "0",
                    "totalCount": "14"
                },
                {
                    "FINGERVERIFY": "4",
                    "LI": "1",
                    "TD": "3",
                    "TE": "9",
                    "TI": "4",
                    "TLI": "3",
                    "TLIP": "2",
                    "TR": "3",
                    "hour": "1",
                    "totalCount": "29"
                },
                {
                    "LI": "1",
                    "LIP": "1",
                    "LLI": "1",
                    "LLIP": "1",
                    "LR": "1",
                    "LRP": "1",
                    "hour": "2",
                    "totalCount": "6"
                },
                {
                    "FE": "2",
                    "TE": "2",
                    "hour": "8",
                    "totalCount": "4"
                }
            ]

Chart Image

基于以下几点的图表描述：-

1. x 轴：来自 Json 属性
的“小时”
2. 行尾显示“totalCount”
3. 堆积条显示 Json 的另一个 属性。

任何人都可以通过使用上面的 Json 帮助我获得与屏幕截图类似的上图吗？

Answer 1

根据您的数据，您需要构建Highcharts需要的系列结构。示例：

const series = [];

data.forEach(dataEl => {
    for (const key in dataEl) {
        if (key === 'hour') continue;

        const existingSeries = series.find(s => s.name === key);

        if (!existingSeries) {
            series.push({
                name: key,
                type: key === 'totalCount' ? 'line' : 'column',
                data: [[Number(dataEl.hour), Number(dataEl[key])]]
            });

        } else {
            existingSeries.data.push([Number(dataEl.hour), Number(dataEl[key])]);
        }
    }
});

---

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

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