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"
                }
            ]

图表图像

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

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://jsfidle.net/blacklabel/40pgqn9j/

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