在准備浮點圖數據時需要幫助

Question

我從服務器獲取數據，我需要以某種方式准備這些數據，以便浮點圖可以使用它們 。

以下是我的服務器響應

"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軸上的時間戳

在這里 更新了一個鏈接

在此處嘗試映射數據時，以下代碼能夠呈現浮點圖，但是映射不正確，因此需要一些幫助。 請幫忙。

    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中添加了堆棧庫

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;

演示2