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()
}]
添加回答
舉報