如何使用堆栈显示条形图

时间：2016-02-10 16:13:49

标签： flot

我的条形图不是堆叠加上它还显示额外的2条

＆＃13;
＆＃13; 
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);
＆＃13; 
<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">
＆＃13;
＆＃13;
＆＃13;

如何为未定义添加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可能并非都有时间戳。这来自db。

1 个答案:

答案 0 :(得分：1)

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

您可以在服务器端或使用一些JavaScript循环向数据系列添加零值。请参阅下面的更新代码段。

＆＃13;
＆＃13; 
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);
＆＃13; 
<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">
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题