在为 flot 图表准备数据时需要帮助

Question

我正在从服务器获取数据，我需要以 flot chart 可以使用的方式进行准备。

下面是我的服务器响应

"date_task_ids_relation_query": {
    "1420761600000": {
      "\"ODBC\"": 0,
      "\"Oracle\"": 10,
      "\"Salesforce\"": 10
    },
    "1414281600000": {
      "\"ODBC\"": 0,
      "\"Oracle\"": 1,
      "\"Salesforce\"": 1
    },
    "1414972800000": {
      "\"ODBC\"": 0,
      "\"Oracle\"": 10,
      "\"Salesforce\"": 10
    },
    "1414713600000": {
      "\"ODBC\"": 0,
      "\"Oracle\"": 3,
      "\"Salesforce\"": 3
    },
    "1413504000000": {
      "\"ODBC\"": 0,
      "\"Oracle\"": 1,
      "\"Salesforce\"": 1
    }
}

需要准备以下格式的服务器数据，以便图表使用。或者还有其他方法吗？

[
  {
    "data": [
      [
        1420588800000,
        150
      ],
      [
        1420675200000,
        149
      ],
      [
        1420761600000,
        140
      ],
      [
        1420848000000,
        91
      ]
    ],
    "label": "ODBC",
    "bars": {
      "show": "true",
      "barWidth": 36000000,
      "fillColor": "#8CC051",
      "order": 1,
      "align": "center"
    },
    "stack": true
  },
  {
    "data": [
      [
        1420502400000,
        30
      ],
      [
        1420588800000,
        32
      ],
      [
        1420675200000,
        31
      ],
      [
        1420761600000,
        26
      ]
    ],
    "label": "Oracle",
    "bars": {
      "show": "true",
      "barWidth": 36000000,
      "fillColor": "#967BDC",
      "order": 1,
      "align": "center"
    },
    "stack": true
  },
  {
    "data": [
      [
        1420502400000,
        14
      ],
      [
        1420588800000,
        19
      ],
      [
        1420675200000,
        9
      ],
      [
        1420761600000,
        5
      ]
    ],
    "label": "Salesforce",
    "bars": {
      "show": "true",
      "barWidth": 36000000,
      "fillColor": "#5D9CEC",
      "order": 1,
      "align": "center"
    },
    "stack": true
  }
]

请帮忙准备图表数据。

注意：1420761600000是x轴上的时间戳

已更新 plunker link here

尝试在此处映射数据，下面的代码可以渲染图表，但映射不正确，因此需要一些帮助。请帮忙。

    var colorCodes = ["#8CC051","#967BDC","#5D9CEC","#FB6E52","#EC87BF","#46CEAD","#FFCE55","#193441","#193441","#BEEB9F","#E3DB9A","#917A56";
    angular.forEach(buckets, function(value, key) {            
        var objectSize = Object.size(value);
        var dataArray = [], index = 0, label = "";
        angular.forEach(value, function(val, k) {
            var dataArr = [];
            dataArr.push('['+key+', '+val+']');
            dataArray.push(dataArr);
            //console.log(val+"..."+k);

            label = k.replace("\"", ""); //Updated
            label = label.replace("\"", "");
        })
        var barObject = '"bars": {"show": "true", "barWidth":36000000, "fillColor": "'+colorCodes[idx]+'", "order": 1, "align": "center"}, "stack": true';
        var object = '{ "data": ['+dataArray+'], "label": "'+label+'", '+barObject+'}';
        //console.log(object);
        mainArray.push(JSON.parse(object));
        idx++;            
    });

在 plunker here

中添加了堆栈库

Answer 1

对于初学者来说，会将其映射到一个临时对象，该对象具有作为键的类型，并且每个属性都有一个 x,y 值数组

var tmp={};
for(time in data){
   var  unix = 1*time;
  for(type in data[time]){
    if(!tmp[type]){
      tmp[type] = [];
    }
    tmp[type].push([unix, data[time][type]])
  }
}

tmp 长得像

{
 "ODBC": [
    [
      1420761600000,
      0
    ]
}

DEMO

然后遍历tmp对象来映射flot需要的数据

var flot=[], ctr=0;
for(type in tmp){
  var typeData={
    label: type,
    bars:{
      "show": "true",
      "barWidth": 36000000,
      "fillColor": colorCodes[ctr],
      "order": 1,
      "align": "center"
    },
    data:tmp[type]
  }
  flot.push(typeData);
  ctr++;
}
$scope.flotData=flot;

DEMO 2

在为 flot 图表准备数据时需要帮助

Need help in preparing data for flot chart

javascript

json

angularjs

flot