【问题标题】:How to create data in Json format for highcharts如何为highcharts创建Json格式的数据
【发布时间】:2017-12-11 12:54:53
【问题描述】:

我通过 ajax 得到低于结果,而我在 ajax 成功中得到的数据是

[{
  "plants_ref_id": "1",
  "plant_name": "MCW",
  "employees_data": "6,6,80,70,60,30,2,3,12,12,37.00,60.00,64666.666667,8000.0000"
},{
  "plants_ref_id": "3",
  "plant_name": "SJCPL",
  "employees_data": "4,5,6,7,7,7,6,4,4,5,20.00,3.00,176923.076923,38461.5385"
}]

我正在尝试将此数据转换为格式

[{
  name: 'MCW',
  data: [6,6,80,70,60,30,2,3,12,12,37.00,60.00,64666.666667,8000.0000
]},{
  name: 'SJCPL',  
  data: [4,5,6,7,7,7,6,4,4,5,20.00,3.00,176923.076923,38461.5385]
}]

我正在尝试转换为这种格式以生成高图为https://jsfiddle.net/mcj075jf/

如何在 jQuery 中使用 for 循环或 $.each 转换为上述格式。请帮忙。

【问题讨论】:

    标签: javascript jquery json highcharts


    【解决方案1】:

    你可以使用map如下:

    var plants = [{
      "plants_ref_id": "1",
      "plant_name": "MCW",
      "employees_data": "6,6,80,70,60,30,2,3,12,12,37.00,60.00,64666.666667,8000.0000"
    },{
      "plants_ref_id": "3",
      "plant_name": "SJCPL",
      "employees_data": "4,5,6,7,7,7,6,4,4,5,20.00,3.00,176923.076923,38461.5385"
    }];
    
    var formattedData = plants.map((plant) => ({
      name: plant.plant_name,
      data: plant.employees_data.split(',').map((data) => parseFloat(data))
    }));
    
    console.log(formattedData);

    【讨论】:

    • 如果我将相同的数据传递给 highcharts 图表不会显示。请在此处查看jsfiddle.net/mcj075jf/1
    • @rjirji 我想我们需要将该字符串数组转换为数字。检查我编辑的答案:)
    • 我更改了您的 jsfiddle 以使用我编辑的答案进行修复,它现在正在工作!jsfiddle.net/17rf4ugt
    【解决方案2】:

    这里有解决方案https://jsfiddle.net/z10jheo2/

    var data = [{
      "plants_ref_id": "1",
      "plant_name": "MCW",
      "employees_data": "6,6,80,70,60,30,2,3,12,12,37.00,60.00,64666.666667,8000.0000"
    },{
      "plants_ref_id": "3",
      "plant_name": "SJCPL",
      "employees_data": "4,5,6,7,7,7,6,4,4,5,20.00,3.00,176923.076923,38461.5385"
    }];
    
    var newData = [];
    
    for(var i=0; i<data.length; i++) {
       var tempData = {};
       tempData.name = data[i].plant_name;
       tempData.data = data[i].employees_data.split(',');
       newData.push(tempData); 
       console.log(newData);
    }
    

    【讨论】:

    • 如果我将相同的数据传递给 highcharts 图表不会显示。请在此处查看jsfiddle.net/z10jheo2/1
    • 这里有解决方案 jsfiddle.net/17rf4ugt 。由于我是根据逗号拆分数据,我们需要恢复为浮点数来填充图表。
    猜你喜欢
    • 2014-07-10
    • 1970-01-01
    • 2014-12-01
    • 2013-02-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-08-06
    • 1970-01-01
    相关资源
    最近更新 更多