时间戳

首页 > 解决方案 > Highchart：如何在 JSON 响应下方绘制带有线条的堆积条形图

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

问题描述

我正在使用下面的 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 来帮助我实现上面与屏幕截图类似的图表吗？

标签： htmljqueryhighcharts

解决方案

根据您的数据，您需要构建 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

推荐阅读