Highchart：如何在 JSON 响应下方绘制带有线条的堆积条形图答案

【问题标题】：Highchart : How to plot Stacked bar graph with line by below JSON responsHighchart：如何在 JSON 响应下方绘制带有线条的堆积条形图
【发布时间】：2021-04-28 14:10:24
【问题描述】：

我正在使用下面的 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

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

x 轴：来自 Json 属性的“小时”
行的尖端显示“totalCount”
堆叠条显示 Json 的其他属性。

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

【问题讨论】：

标签： html jquery highcharts

【解决方案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

【讨论】：