Question

My columns are overlapping when I am using order bars plugin on flot.

var datasets = [{"label":"","bars":{"order":6},"color":"green","idx":0,"data":[{"0":1462057200000,"1":98,"3":1462472152593.5654},{"0":1459465200000,"1":98,"3":1459880152593.5654},{"0":1456790400000,"1":98,"3":1457205352593.5654},{"0":1454284800000,"1":98,"3":1454699752593.5654},{"0":1451606400000,"1":98,"3":1452021352593.5654},{"0":1448928000000,"1":98,"3":1449342952593.5654}]},{"label":"Combined","bars":{"order":1},"idx":1,"data":[{"0":1462057200000,"1":98.83,"3":1461383047406.4346},{"0":1459465200000,"1":98.46,"3":1458791047406.4346},{"0":1456790400000,"1":98.57,"3":1456116247406.4346},{"0":1454284800000,"1":98.18,"3":1453610647406.4346},{"0":1451606400000,"1":96.01,"3":1450932247406.4346},{"0":1448928000000,"1":94.44,"3":1448253847406.4346}]},{"label":"Fixed","bars":{"order":2},"idx":2,"data":[{"0":1462057200000,"1":99.62,"3":1461607764937.623},{"0":1459465200000,"1":99.52,"3":1459015764937.623},{"0":1456790400000,"1":99.92,"3":1456340964937.623},{"0":1454284800000,"1":98.92,"3":1453835364937.623},{"0":1451606400000,"1":99.53,"3":1451156964937.623},{"0":1448928000000,"1":100,"3":1448478564937.623}]},{"label":"IT","bars":{"order":4},"color":"#808080","idx":3,"data":[{"0":1462057200000,"1":97.63,"3":1462022717531.1885},{"0":1459465200000,"1":97.85,"3":1459430717531.1885},{"0":1456790400000,"1":96.91,"3":1456755917531.1885},{"0":1454284800000,"1":96.96,"3":1454250317531.1885},{"0":1451606400000,"1":97.79,"3":1451571917531.1885},{"0":1448928000000,"1":98.49,"3":1448893517531.1885}]},{"label":"Mobile","bars":{"order":3},"idx":4,"data":[{"0":1462057200000,"1":98.33,"3":1461832482468.8115},{"0":1459465200000,"1":97.97,"3":1459240482468.8115},{"0":1456790400000,"1":98.14,"3":1456565682468.8115},{"0":1454284800000,"1":97.93,"3":1454060082468.8115},{"0":1451606400000,"1":94.93,"3":1451381682468.8115},{"0":1448928000000,"1":94.41,"3":1448703282468.8115}]},{"label":"Network","bars":{"order":5},"color":"#f00","idx":5,"data":[{"0":1462057200000,"1":99.04,"3":1462247435062.377},{"0":1459465200000,"1":97.73,"3":1459655435062.377},{"0":1456790400000,"1":96.97,"3":1456980635062.377},{"0":1454284800000,"1":97.53,"3":1454475035062.377},{"0":1451606400000,"1":98.68,"3":1451796635062.377},{"0":1448928000000,"1":98.42,"3":1449118235062.377}]}];

var options = {"series":{"stack":false,"lines":{"show":false,"steps":false},"bars":{"show":true,"fill":1,"align":"center","barWidth":259200000,"lineWidth":0},"points":{"show":false}},"xaxis":{"mode":"time","tickSize":[1,"month"],"timeformat":"%b %y","format":"%m %y"},"yaxis":{"max":100,"min":93},"grid":{"clickable":true,"hoverable":true},"legend":{"noColumns":5,"position":"se"}};


$.plot($("#success-graph"), datasets, options);

#success-graph,
#mi-graph {
  height: 500px;
  margin: 0 auto;
  text-align: center;
  width: 80%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/flot/flot/master/jquery.flot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<script src="http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js"></script>

<div class="container-fluid" id="main_content">

  <div class="row">
    <div id="success-graph" class=""></div>
  </div>
  <div class="row">
    <div id="mi-graph" class=""></div>
  </div>

</div>
<!-- #main_content -->

flot orderbars overlapping columns on time graph

0 个答案: