文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在flot悬停上显示条形图

问在flot悬停上显示条形图
EN

Stack Overflow用户
提问于 2016-02-16 11:47:58
回答 1查看 308关注 0票数 0

当我有多个系列的时候，我想在flot悬停上显示全部的条形。另外，我如何从0值的叠加条形线中隐藏颜色。

​

代码语言：javascript
复制
var datasets = [{
  "label": "Amend Existing Report",
  "data": [{
    "0": 1446422400000,
    "1": 0
  }, {
    "0": 1447027200000,
    "1": 0
  }, {
    "0": 1447632000000,
    "1": 0
  }, {
    "0": 1448236800000,
    "1": 0
  }, {
    "0": 1448841600000,
    "1": 0
  }, {
    "0": 1449446400000,
    "1": 1
  }, {
    "0": 1450051200000,
    "1": 0
  }, {
    "0": 1450656000000,
    "1": 0
  }, {
    "0": 1451260800000,
    "1": 0
  }, {
    "0": 1451865600000,
    "1": 0
  }, {
    "0": 1452470400000,
    "1": 0
  }, {
    "0": 1453075200000,
    "1": 1
  }, {
    "0": 1453680000000,
    "1": 1
  }, {
    "0": 1454284800000,
    "1": 0
  }],
  "idx": 0
}, {
  "label": "Investigate Report Problem",
  "data": [{
    "0": 1446422400000,
    "1": 1
  }, {
    "0": 1447027200000,
    "1": 0
  }, {
    "0": 1447632000000,
    "1": 2
  }, {
    "0": 1448236800000,
    "1": 4
  }, {
    "0": 1448841600000,
    "1": 0
  }, {
    "0": 1449446400000,
    "1": 1
  }, {
    "0": 1450051200000,
    "1": 0
  }, {
    "0": 1450656000000,
    "1": 2
  }, {
    "0": 1451260800000,
    "1": 0
  }, {
    "0": 1451865600000,
    "1": 0
  }, {
    "0": 1452470400000,
    "1": 0
  }, {
    "0": 1453075200000,
    "1": 5
  }, {
    "0": 1453680000000,
    "1": 0
  }, {
    "0": 1454284800000,
    "1": 0
  }],
  "idx": 1
}, {
  "label": "New Request (One Off Report)",
  "data": [{
    "0": 1446422400000,
    "1": 0
  }, {
    "0": 1447027200000,
    "1": 0
  }, {
    "0": 1447632000000,
    "1": 1
  }, {
    "0": 1448236800000,
    "1": 0
  }, {
    "0": 1448841600000,
    "1": 0
  }, {
    "0": 1449446400000,
    "1": 0
  }, {
    "0": 1450051200000,
    "1": 0
  }, {
    "0": 1450656000000,
    "1": 0
  }, {
    "0": 1451260800000,
    "1": 0
  }, {
    "0": 1451865600000,
    "1": 0
  }, {
    "0": 1452470400000,
    "1": 0
  }, {
    "0": 1453075200000,
    "1": 0
  }, {
    "0": 1453680000000,
    "1": 1
  }, {
    "0": 1454284800000,
    "1": 0
  }],
  "idx": 2
}, {
  "label": "New Request (Regular Report)",
  "data": [{
    "0": 1446422400000,
    "1": 4
  }, {
    "0": 1447027200000,
    "1": 0
  }, {
    "0": 1447632000000,
    "1": 2
  }, {
    "0": 1448236800000,
    "1": 2
  }, {
    "0": 1448841600000,
    "1": 0
  }, {
    "0": 1449446400000,
    "1": 1
  }, {
    "0": 1450051200000,
    "1": 0
  }, {
    "0": 1450656000000,
    "1": 0
  }, {
    "0": 1451260800000,
    "1": 1
  }, {
    "0": 1451865600000,
    "1": 1
  }, {
    "0": 1452470400000,
    "1": 0
  }, {
    "0": 1453075200000,
    "1": 3
  }, {
    "0": 1453680000000,
    "1": 2
  }, {
    "0": 1454284800000,
    "1": 0
  }],
  "idx": 3
}, {
  "label": "Other",
  "data": [{
    "0": 1446422400000,
    "1": 0
  }, {
    "0": 1447027200000,
    "1": 0
  }, {
    "0": 1447632000000,
    "1": 2
  }, {
    "0": 1448236800000,
    "1": 4
  }, {
    "0": 1448841600000,
    "1": 2
  }, {
    "0": 1449446400000,
    "1": 0
  }, {
    "0": 1450051200000,
    "1": 2
  }, {
    "0": 1450656000000,
    "1": 0
  }, {
    "0": 1451260800000,
    "1": 0
  }, {
    "0": 1451865600000,
    "1": 0
  }, {
    "0": 1452470400000,
    "1": 3
  }, {
    "0": 1453075200000,
    "1": 0
  }, {
    "0": 1453680000000,
    "1": 3
  }, {
    "0": 1454284800000,
    "1": 0
  }],
  "idx": 4
}, {
  "label": "Special Events",
  "data": [{
    "0": 1446422400000,
    "1": 0
  }, {
    "0": 1447027200000,
    "1": 0
  }, {
    "0": 1447632000000,
    "1": 0
  }, {
    "0": 1448236800000,
    "1": 1
  }, {
    "0": 1448841600000,
    "1": 0
  }, {
    "0": 1449446400000,
    "1": 3
  }, {
    "0": 1450051200000,
    "1": 1
  }, {
    "0": 1450656000000,
    "1": 0
  }, {
    "0": 1451260800000,
    "1": 0
  }, {
    "0": 1451865600000,
    "1": 0
  }, {
    "0": 1452470400000,
    "1": 0
  }, {
    "0": 1453075200000,
    "1": 0
  }, {
    "0": 1453680000000,
    "1": 0
  }, {
    "0": 1454284800000,
    "1": 0
  }],
  "idx": 5
}];

var ticks = [];
for (var i = 0; i < datasets[0].data.length; i++) {
  ticks.push(datasets[0].data[i][0]);
}

var options = {
  "legend": {
    "position": "ne",
    "noColumns": 6
  },
  "yaxis": {
    "min": 0
  },
  "xaxis": {
    "mode": "time",
    "timeformat": "%d %b",
    //    "tickSize": [7, "day"],
    ticks: ticks,
    "min": 1446163200000,
    "max": 1454544000000 // 1454284800000
  },
  "grid": {
    "clickable": true,
    "hoverable": true
  },
  "series": {
    "stack": true,
    "bars": {
      "show": true,
      "barWidth": 181440000.00000003,
      align: 'center'
    }
  }
};

$.plot($('#CAGraph'), datasets, options);




$("#CAGraph").bind("plothover", function(event, pos, item) {

  if (item) {

    console.log(item);
    var percent = item.datapoint[1].toFixed(0) - item.datapoint[2].toFixed(0);
    var total = item.datapoint[1].toFixed(0);
    
   
    $("#tooltip").show();
    $("#tooltip").html(
        item.series.label + " " + (percent) + "<br>Total: " + total)
      .css({
        top: item.pageY - 25,
        left: item.pageX + 10
      }).fadeIn(200);

  } else {
    $("#tooltip").hide();
  }

});
代码语言：javascript
复制
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.8.5/jquery.flot.tooltip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw=="
crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>




<div id="CAGraph" style="width:910px;height:400px"></div>
<div id=tooltip></div>

​

flot
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-02-16 12:25:55

要获得每个栏的总值，对所有数据值运行一个循环，并将它们放在一个hashmap中，然后在工具提示生成中使用。就像这样：

代码语言：javascript
复制
var totals = {};
for (var i = 0; i < datasets.length; i++) {
  var dataset = datasets[i];
  for (var j = 0; j < dataset.data.length; j++) {
    var timestamp = dataset.data[j][0];
    var value = dataset.data[j][1];

    if (totals['_' + timestamp]) {
      totals['_' + timestamp] += value;
    } else {
      totals['_' + timestamp] = value;
    }
  }
}

若要删除条形图的宽度高度为零，请将条形图的lineWidth选项设置为零：

代码语言：javascript
复制
  "series": {
    "stack": true,
    "bars": {
      "show": true,
      "barWidth": 181440000.00000003,
      align: 'center',
      lineWidth: 0
    }
  }

这两个更改都包含在下面更新的代码片段中：

​

代码语言：javascript
复制
var datasets = [{
  "label": "Amend Existing Report",
  "data": [{
    "0": 1446422400000,
    "1": 0
  }, {
    "0": 1447027200000,
    "1": 0
  }, {
    "0": 1447632000000,
    "1": 0
  }, {
    "0": 1448236800000,
    "1": 0
  }, {
    "0": 1448841600000,
    "1": 0
  }, {
    "0": 1449446400000,
    "1": 1
  }, {
    "0": 1450051200000,
    "1": 0
  }, {
    "0": 1450656000000,
    "1": 0
  }, {
    "0": 1451260800000,
    "1": 0
  }, {
    "0": 1451865600000,
    "1": 0
  }, {
    "0": 1452470400000,
    "1": 0
  }, {
    "0": 1453075200000,
    "1": 1
  }, {
    "0": 1453680000000,
    "1": 1
  }, {
    "0": 1454284800000,
    "1": 0
  }],
  "idx": 0
}, {
  "label": "Investigate Report Problem",
  "data": [{
    "0": 1446422400000,
    "1": 1
  }, {
    "0": 1447027200000,
    "1": 0
  }, {
    "0": 1447632000000,
    "1": 2
  }, {
    "0": 1448236800000,
    "1": 4
  }, {
    "0": 1448841600000,
    "1": 0
  }, {
    "0": 1449446400000,
    "1": 1
  }, {
    "0": 1450051200000,
    "1": 0
  }, {
    "0": 1450656000000,
    "1": 2
  }, {
    "0": 1451260800000,
    "1": 0
  }, {
    "0": 1451865600000,
    "1": 0
  }, {
    "0": 1452470400000,
    "1": 0
  }, {
    "0": 1453075200000,
    "1": 5
  }, {
    "0": 1453680000000,
    "1": 0
  }, {
    "0": 1454284800000,
    "1": 0
  }],
  "idx": 1
}, {
  "label": "New Request (One Off Report)",
  "data": [{
    "0": 1446422400000,
    "1": 0
  }, {
    "0": 1447027200000,
    "1": 0
  }, {
    "0": 1447632000000,
    "1": 1
  }, {
    "0": 1448236800000,
    "1": 0
  }, {
    "0": 1448841600000,
    "1": 0
  }, {
    "0": 1449446400000,
    "1": 0
  }, {
    "0": 1450051200000,
    "1": 0
  }, {
    "0": 1450656000000,
    "1": 0
  }, {
    "0": 1451260800000,
    "1": 0
  }, {
    "0": 1451865600000,
    "1": 0
  }, {
    "0": 1452470400000,
    "1": 0
  }, {
    "0": 1453075200000,
    "1": 0
  }, {
    "0": 1453680000000,
    "1": 1
  }, {
    "0": 1454284800000,
    "1": 0
  }],
  "idx": 2
}, {
  "label": "New Request (Regular Report)",
  "data": [{
    "0": 1446422400000,
    "1": 4
  }, {
    "0": 1447027200000,
    "1": 0
  }, {
    "0": 1447632000000,
    "1": 2
  }, {
    "0": 1448236800000,
    "1": 2
  }, {
    "0": 1448841600000,
    "1": 0
  }, {
    "0": 1449446400000,
    "1": 1
  }, {
    "0": 1450051200000,
    "1": 0
  }, {
    "0": 1450656000000,
    "1": 0
  }, {
    "0": 1451260800000,
    "1": 1
  }, {
    "0": 1451865600000,
    "1": 1
  }, {
    "0": 1452470400000,
    "1": 0
  }, {
    "0": 1453075200000,
    "1": 3
  }, {
    "0": 1453680000000,
    "1": 2
  }, {
    "0": 1454284800000,
    "1": 0
  }],
  "idx": 3
}, {
  "label": "Other",
  "data": [{
    "0": 1446422400000,
    "1": 0
  }, {
    "0": 1447027200000,
    "1": 0
  }, {
    "0": 1447632000000,
    "1": 2
  }, {
    "0": 1448236800000,
    "1": 4
  }, {
    "0": 1448841600000,
    "1": 2
  }, {
    "0": 1449446400000,
    "1": 0
  }, {
    "0": 1450051200000,
    "1": 2
  }, {
    "0": 1450656000000,
    "1": 0
  }, {
    "0": 1451260800000,
    "1": 0
  }, {
    "0": 1451865600000,
    "1": 0
  }, {
    "0": 1452470400000,
    "1": 3
  }, {
    "0": 1453075200000,
    "1": 0
  }, {
    "0": 1453680000000,
    "1": 3
  }, {
    "0": 1454284800000,
    "1": 0
  }],
  "idx": 4
}, {
  "label": "Special Events",
  "data": [{
    "0": 1446422400000,
    "1": 0
  }, {
    "0": 1447027200000,
    "1": 0
  }, {
    "0": 1447632000000,
    "1": 0
  }, {
    "0": 1448236800000,
    "1": 1
  }, {
    "0": 1448841600000,
    "1": 0
  }, {
    "0": 1449446400000,
    "1": 3
  }, {
    "0": 1450051200000,
    "1": 1
  }, {
    "0": 1450656000000,
    "1": 0
  }, {
    "0": 1451260800000,
    "1": 0
  }, {
    "0": 1451865600000,
    "1": 0
  }, {
    "0": 1452470400000,
    "1": 0
  }, {
    "0": 1453075200000,
    "1": 0
  }, {
    "0": 1453680000000,
    "1": 0
  }, {
    "0": 1454284800000,
    "1": 0
  }],
  "idx": 5
}];

var ticks = [];
for (var i = 0; i < datasets[0].data.length; i++) {
  ticks.push(datasets[0].data[i][0]);
}

var totals = {};
for (var i = 0; i < datasets.length; i++) {
  var dataset = datasets[i];
  for (var j = 0; j < dataset.data.length; j++) {
    var timestamp = dataset.data[j][0];
    var value = dataset.data[j][1];

    if (totals['_' + timestamp]) {
      totals['_' + timestamp] += value;
    } else {
      totals['_' + timestamp] = value;
    }
  }
}

var options = {
  "legend": {
    "position": "ne",
    "noColumns": 6
  },
  "yaxis": {
    "min": 0
  },
  "xaxis": {
    "mode": "time",
    "timeformat": "%d %b",
    //    "tickSize": [7, "day"],
    ticks: ticks,
    "min": 1446163200000,
    "max": 1454544000000 // 1454284800000
  },
  "grid": {
    "clickable": true,
    "hoverable": true
  },
  "series": {
    "stack": true,
    "bars": {
      "show": true,
      "barWidth": 181440000.00000003,
      align: 'center',
      lineWidth: 0
    }
  }
};

$.plot($('#CAGraph'), datasets, options);


$("#CAGraph").bind("plothover", function(event, pos, item) {

  if (item) {

    var percent = item.datapoint[1].toFixed(0) - item.datapoint[2].toFixed(0);
    var total = totals['_' + item.datapoint[0]]; //item.datapoint[1].toFixed(0);

    $("#tooltip").show();
    $("#tooltip").html(
        item.series.label + " " + (percent) + "<br>Total: " + total)
      .css({
        top: item.pageY - 25,
        left: item.pageX + 10
      }).fadeIn(200);

  } else {
    $("#tooltip").hide();
  }

});
代码语言：javascript
复制
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.8.5/jquery.flot.tooltip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw=="
crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>


<div id="CAGraph" style="width:910px;height:400px"></div>
<div id=tooltip></div>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/35431766

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档