zoukankan      html  css  js  c++  java
  • 按highcharts中column形式转对象展现格式

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

     

    图表:

  • 相关阅读:
    路径
    JSTL-3
    JSTL-2
    JSTL-1
    EL和JSTL的关系
    Mybatis控制台打印SQL语句的两种方式
    centOS7安装JDK
    centOS7下安装GUI图形界面
    centOS7配置IP地址
    Office2016专业增强版永久激活
  • 原文地址:https://www.cnblogs.com/liubingyjui/p/12624686.html
Copyright © 2011-2022 走看看