我在这种模式下有 API 响应，我想将这些数据动态添加到 highcharts 中。我还想为每一列制作一个单独的数组，然后将每个数组传递到 Highcharts。谁能帮我解决这个问题。当我尝试遍历 API 结果时，结果将是未定义的。示例 API 响应：{ "data": [ [ { "name": "Time", "unit":"Y-m-d" }, { "location": "XYZ", "name": "ABC", "unit": "kmh", }, { "location": "A1", "name": "xcds", "unit": "kmh", }, { "location": "A2", "name": "efg", "unit": "avg", }, { "location": "A3", "name": "fgf", "unit": "avg", }, { "location": "A1", "name": "klm", "unit": "kmh", }, { "location": "A5", "name": "ABCDE", "unit": "kmh", }],[ "2020-08-05T10:00:00", 43.8 67 65.2 56 6765],[ "2020-08-05T10:05:00", 2.69924, 65.8, 7. 136, 11.5, 19],[ "2020-08-05T10:10:00", 18.3 93.6, 21, 23, 26, 15,],[ "2020-08-05T10:15:00", 39, 26, 24 89, 70.48, 1.10], ], }如何将每个索引值传递到数组中？感谢您的帮助。
2 回答
慕斯王
TA贡献1864条经验 获得超2个赞
第一个 for 循环创建一个对象数组，名称作为键和值，下一个 for 循环创建一个对象，名称作为键和值数组
const headers = res.data[0];
const final = [];
const columArr = {};
for (let i = 1; i < res.data.length; i++){
let obj = {};
headers.forEach((head, index)=>{
obj[head.name] = res.data[i][index]
});
final.push(obj);
}
for (let j = 1; j < res.data.length; j++){
headers.forEach((head, index)=>{
if(columArr[head.name]){
columArr[head.name].push(res.data[j][index])
} else {
columArr[head.name] = [res.data[j][index]]
}
});
}
console.dir(final,{depth:null})
console.dir(columArr,{depth:null})
const dataArray = [];
for(let key of Object.keys(columArr)){
dataArray.push({
data:columArr[key].reverse(),
type: 'line',
name: key
});
}
var chart = new Highcharts.Chart({
chart: {
type: 'spline',
renderTo: "container"
},
colors: ['#6e9fc5', '#ffdf51', '#a6ca6d', '#ad46d6', '#f26a2e', '#00adef', '#f4bb90'],
title: {
text: ' values'
},
subtitle: {
text: ' Data'
},
xAxis: {
categories: columArr['Time'].reverse() //.reverse() to have the min year on the left
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
tooltip: {
valueDecimals: 2,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>'
},
series:dataArray
})
守着星空守着你
TA贡献1799条经验 获得超8个赞
var chart = new Highcharts.Chart({
chart: {
type: 'spline',
renderTo: "container"
},
colors: ['#6e9fc5', '#ffdf51', '#a6ca6d', '#ad46d6', '#f26a2e', '#00adef', '#f4bb90'],
title: {
text: ' values'
},
subtitle: {
text: ' Data'
},
xAxis: {
categories: dataArray.reverse() //.reverse() to have the min year on the left
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
tooltip: {
valueDecimals: 2,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>'
},
series: [{
type: 'line',
name: 'ABC',
data : array_final.reverse()
}, {
name: 'XYx',
data: array_final1.reverse()
}, {
name: 'xyz',
data: array_final2.reverse()
}, {
name: 'klm',
data: array_final3.reverse()
}, {
name: 'ddd',
data: array_final4.reverse()
}, {
name: ''ABCD",
data: array_final5.reverse()
}]
添加回答
举报
0/150
提交
取消