使用 flot 堆叠的时间条形图

Question

以 http://www.flotcharts.org/flot/examples/stacking/ 中的示例为例，我正在尝试实现相同的功能，但 x 轴是 time

https://jsfiddle.net/shorif2000/u6kvfjzc/

processData(json.rows.incidents.data, json.rows.incidents.tab);

function processData(rows, tab) {

  p_start = new Date().getTime();
  console.log("start  process: " + p_start);


  var arr = filterData(rows);

  p_end = new Date().getTime();
  console.log("finish  process: " + p_end);
  console.log("process  duration : " + ((p_end - p_start) / 1000) + "s");

  plot_graph(arr, tab);

}


function filterData(data) {
  var arr = [];
  for (i = 0; i < data.length; i++) {

    var to_seconds = moment(data[i].TIMESTAMP, 'YYYY-MM-DD').unix() * 1000; 
    if (typeof arr[data[i].PRIORITY] == 'undefined' && !(arr[data[i].PRIORITY] instanceof Array)) {
      arr[data[i].PRIORITY] = [];
    }
    arr[data[i].PRIORITY].push({
      0: to_seconds,
      1: parseInt(data[i].VALUE)
    });
  }

  return arr;
}






function plot_graph(arr, id) {
  var stack = 0,
    bars = true,
    lines = false,
    steps = false;
  var data = [{
    stack: stack,
    lines: {
      show: lines,
      fill: true,
      steps: steps
    },
    bars: {
      show: bars,
      barWidth: 0.6
    },
    "points": {
      "show": false
    },
    data: arr
  }];
  console.log(data);
  $.plot("#" + id + "network-graph", data, {
    series: {
      stack: stack,
      lines: {
        show: lines,
        fill: true,
        steps: steps
      },
      bars: {
        show: bars,
        barWidth: 0.6
      }
    },
    xaxis: {
      mode: "time",
      timeformat: "%y/%m/%d"
    }
  });
}

Answer 1

我设法修复了它。 https://jsfiddle.net/shorif2000/epnv9wrw/。我必须循环数组对象并为其创建标签

var datasets = [];  
    var i = 0;
    for (var key in arr) {      
       datasets.push({label:key,data:arr[key],color:i});
       ++i;
    }

使用 flot 堆叠的时间条形图

time bar graph that is stacked using flot

flot