highcharts图表type:column事例的格式是这样的:
(不论接口返回什么格式,需要转换的):
xAxis: { categories: ['一月','二月'], }, series: [ {name: '东京',data: [49, 71]}, {name: '纽约',data: [39, 71]}, {name: '伦敦',data: [65, 59]}, {name: '柏林',data: [60, 47]} ]
我们最终要得到 xAxis和series
接口返回的:column:[ {notValidCount: 1, time: "2020-03-30", validCount: 0}, {notValidCount: 4, time: "2020-03-31", validCount: 0}, {notValidCount: 7, time: "2020-04-01", validCount: 0}, {notValidCount: 6, time: "2020-04-02", validCount: 0}, {notValidCount: 0, time: "2020-04-03", validCount: 0}, {notValidCount: 6, time: "2020-04-04", validCount: 0}, {notValidCount: 5, time: "2020-04-05", validCount: 0}, ]
我们要转换的格式,xAxis是time:
{ notValidCount: [1, 4, 7, 6, 0, 6, 5], time:["2020-03-30", "2020-03-31", "2020-04-01", "2020-04-02", "2020-04-03","2020-04-04","2020-04-05"], validCount:[0, 0, 0, 0, 0, 0, 0] }
------------------------------------------------------------------
代码实现:
var column =[ {notValidCount: 1, time: "2020-03-30", validCount: 1}, {notValidCount: 4, time: "2020-03-31", validCount: 1}, {notValidCount: 7, time: "2020-04-01", validCount: 2}, {notValidCount: 6, time: "2020-04-02", validCount: 2}, {notValidCount: 2, time: "2020-04-03", validCount: 2}, {notValidCount: 6, time: "2020-04-04", validCount: 2}, {notValidCount: 5, time: "2020-04-05", validCount: 3}, ]; var xAxis = []; var dataNew = {}; var series = []; for(var el in column[0]){ dataNew[el] = []; //el 每个分类字段名 column.forEach(function(item,index){ //循环7次notValidCount里值 ,再time值 dataNew[el].push(item[el]) }) } xAxis = dataNew.time; var tableinfo = { 'keliu':[ {key:'notValidCount',name:'无效客流'}, {key:'validCount',name:'有效客流'}, ], } var originData = tableinfo['keliu']; var colors = ['#A10D30','#E98353','#F2C65C','#EC808D','#53B3E9']; originData.forEach(function(item,index){ var type = 'column'; series.push({ type:type, name:item.name, color:colors[index], data:dataNew[item.key] }) }) console.log(xAxis,series,'希望的值')
下边是xAxis和series的值:
图表: