我正在使用下面的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"
}
]
图表图像
基于以下要点的图表描述:-
有没有人能帮我用上面的JSON来实现上面的图形,这是类似于屏幕截图的?
基于您的数据,您需要构建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