按highcharts中column形式转对象展现格式

2020-04-03 10:02:43 阅读：303 来源： 互联网

标签：03 notValidCount 04 column validCount 2020 time 格式 highcharts

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的值：

图表：

标签：03,notValidCount,04,column,validCount,2020,time,格式,highcharts
来源： https://www.cnblogs.com/liubingyjui/p/12624686.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

按highcharts中column形式转对象展现格式