如何使用堆栈显示条形图

Question

我的条形图没有堆叠，而且它还显示额外的 2 个柱线

var datasets = [{"label":"Amend Existing Report","data":[{"0":-61666272000000,"1":2},{"0":-61665667200000,"1":6},{"0":-61665062400000,"1":1},{"0":-61664457600000,"1":1},{"0":-61663852800000,"1":1},{"0":-61663248000000,"1":3},{"0":-61662643200000,"1":1},{"0":-61661433600000,"1":2},{"0":-61660828800000,"1":7},{"0":-61660224000000,"1":3},{"0":-61659619200000,"1":4},{"0":-61659014400000,"1":4}],"idx":0},{"label":"Investigate Report Problem","data":[{"0":-61659014400000,"1":1}],"idx":1},{"label":"New Request (One Off Report)","data":[{"0":-61666876800000,"1":4},{"0":-61666272000000,"1":19},{"0":-61665667200000,"1":7},{"0":-61665062400000,"1":5},{"0":-61664457600000,"1":2},{"0":-61663852800000,"1":3},{"0":-61662038400000,"1":8},{"0":-61661433600000,"1":2},{"0":-61660828800000,"1":8},{"0":-61660224000000,"1":6},{"0":-61659619200000,"1":4},{"0":-61659014400000,"1":5}],"idx":2},{"label":"New Request (Regular Report)","data":[{"0":-61666272000000,"1":4},{"0":-61665667200000,"1":2},{"0":-61665062400000,"1":3},{"0":-61664457600000,"1":1},{"0":-61662038400000,"1":1},{"0":-61660828800000,"1":2},{"0":-61659619200000,"1":2},{"0":-61659014400000,"1":1}],"idx":3},{"label":"Other","data":[{"0":-61665667200000,"1":1},{"0":-61665062400000,"1":1},{"0":-61664457600000,"1":4},{"0":-61663852800000,"1":1},{"0":-61660224000000,"1":2}],"idx":4},{"label":"Special Events","data":[{"0":-61666272000000,"1":1}],"idx":5}];
var options = {"legend":{"position":"ne","noColumns":6},"yaxis":{"min":0},"xaxis":{"mode":"time","timeformat":"%d %b"},"grid":{"clickable":true,"hoverable":true},"series":{"stack":true,"bars":{"show":true,"barWidth":181440000.00000003,"align":"center"}}};
$.plot($('#CAGraph'), datasets, options);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://rawgit.com/flot/flot/master/jquery.flot.js"></script>
<script src="https://rawgit.com/Codicode/flotanimator/master/jquery.flot.animator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.js"></script>
<div id = "choices_CAGraph">
</div>
<div id="CAGraph" style="width:910px;height:400px">
  
  

如何为未定义添加0，如下答案所述

for (i = 0; i < data.length; i++) {
        var val = parseInt(data[i].COUNT);
        var to_seconds = moment(data[i].TIMESTAMP, 'YYYY-MM-DD').unix() * 1000;
        if (typeof arr[data[i][id]] == 'undefined' && !(arr[data[i][id]] instanceof Array) ) {
            arr[data[i][id]] = [];
        }
        if (typeof arr[data[i][id]][to_seconds] == 'undefined' && !(arr[data[i][id]][to_seconds] instanceof Array)) {
            arr[data[i][id]][to_seconds] = [];
        }
        old_value = arr[data[i][id]][to_seconds];
        arr[data[i][id]][to_seconds] = null;
        if (typeof old_value === "object") // required for 0 values
            old_value = 0;
        arr[data[i][id]][to_seconds] = (parseInt(old_value) + val);     
    }

data由具有时间戳、ID 和值的记录组成。 某些 ID 可能并非都具有时间戳。 这是来自数据库。

Answer 1

要使堆叠正常工作，所有数据系列的每个 x 值（时间戳）都必须有一个 y 值。如果没有可用数据，则使用零。否则，flot 使用类似 bar3bottom = 2 + 4 + undefined = undefined 的内容计算堆栈图表的顶部和底部值，然后条形从零开始。

您可以将零值添加到服务器端的数据系列中，也可以使用某些 JavaScript 循环。请参阅下面的更新代码片段。

var datasets = [{
  "label": "Amend Existing Report",
  "data": [{
    "0": -61666876800000,
    "1": 0
  }, {
    "0": -61666272000000,
    "1": 2
  }, {
    "0": -61665667200000,
    "1": 6
  }, {
    "0": -61665062400000,
    "1": 1
  }, {
    "0": -61664457600000,
    "1": 1
  }, {
    "0": -61663852800000,
    "1": 1
  }, {
    "0": -61663248000000,
    "1": 3
  }, {
    "0": -61662643200000,
    "1": 1
  }, {
    "0": -61661433600000,
    "1": 2
  }, {
    "0": -61660828800000,
    "1": 7
  }, {
    "0": -61660224000000,
    "1": 3
  }, {
    "0": -61659619200000,
    "1": 4
  }, {
    "0": -61659014400000,
    "1": 4
  }],
  "idx": 0
}, {
  "label": "Investigate Report Problem",
  "data": [{
    "0": -61666876800000,
    "1": 0
  }, {
    "0": -61659014400000,
    "1": 1
  }],
  "idx": 1
}, {
  "label": "New Request (One Off Report)",
  "data": [{
    "0": -61666876800000,
    "1": 4
  }, {
    "0": -61666272000000,
    "1": 19
  }, {
    "0": -61665667200000,
    "1": 7
  }, {
    "0": -61665062400000,
    "1": 5
  }, {
    "0": -61664457600000,
    "1": 2
  }, {
    "0": -61663852800000,
    "1": 3
  }, {
    "0": -61662038400000,
    "1": 8
  }, {
    "0": -61661433600000,
    "1": 2
  }, {
    "0": -61660828800000,
    "1": 8
  }, {
    "0": -61660224000000,
    "1": 6
  }, {
    "0": -61659619200000,
    "1": 4
  }, {
    "0": -61659014400000,
    "1": 5
  }],
  "idx": 2
}, {
  "label": "New Request (Regular Report)",
  "data": [{
    "0": -61666272000000,
    "1": 4
  }, {
    "0": -61665667200000,
    "1": 2
  }, {
    "0": -61665062400000,
    "1": 3
  }, {
    "0": -61664457600000,
    "1": 1
  }, {
    "0": -61662038400000,
    "1": 1
  }, {
    "0": -61660828800000,
    "1": 2
  }, {
    "0": -61659619200000,
    "1": 2
  }, {
    "0": -61659014400000,
    "1": 1
  }],
  "idx": 3
}, {
  "label": "Other",
  "data": [{
    "0": -61665667200000,
    "1": 1
  }, {
    "0": -61665062400000,
    "1": 1
  }, {
    "0": -61664457600000,
    "1": 4
  }, {
    "0": -61663852800000,
    "1": 1
  }, {
    "0": -61660224000000,
    "1": 2
  }],
  "idx": 4
}, {
  "label": "Special Events",
  "data": [{
    "0": -61666272000000,
    "1": 1
  }],
  "idx": 5
}];
var options = {
  "legend": {
    "position": "ne",
    "noColumns": 6
  },
  "yaxis": {
    "min": 0
  },
  "xaxis": {
    "mode": "time",
    "timeformat": "%d %b"
  },
  "grid": {
    "clickable": true,
    "hoverable": true
  },
  "series": {
    "stack": true,
    "bars": {
      "show": true,
      "barWidth": 181440000.00000003,
      "align": "center"
    }
  }
};
var allXvalues = [];
for (var i = 0; i < datasets.length; i++) {
  for (var j = 0; j < datasets[i].data.length; j++) {
    if (allXvalues.indexOf(datasets[i].data[j][0]) < 0) {
      allXvalues.push(datasets[i].data[j][0]);
    }
  }
}
for (var i = 0; i < datasets.length; i++) {
  for (var j = 0; j < allXvalues.length; j++) {
    var datasetHasXvalue = false;
    for (var k = 0; k < datasets[i].data.length; k++) {
      if (datasets[i].data[k][0] == allXvalues[j]) {
        datasetHasXvalue = true;
        break;
      }
    }
    if (!datasetHasXvalue) {
      datasets[i].data.push([allXvalues[j], 0]);
    }
  }
  datasets[i].data.sort(dataSort);
}
function dataSort(d1, d2) {
  return d2[0] - d1[0];
}
var plot = $.plot($('#CAGraph'), datasets, options);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://rawgit.com/flot/flot/master/jquery.flot.js"></script>
<script src="https://rawgit.com/Codicode/flotanimator/master/jquery.flot.animator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.js"></script>
<div id="choices_CAGraph"></div>
<div id="CAGraph" style="width:910px;height:400px">