flot图上的引导弹出
flot图上的引导弹出
提问于 2016-02-11 20:49:26
我正试图在我的图表上添加弹出器。它不起作用。
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 epoch = new Date(item.datapoint[0]);
var percent = item.datapoint[1].toFixed(0);
$('#tooltip').attr("data-original-title", item.series.label);
$('#tooltip').attr("data-content", (percent) + "<br>Total: " + item.datapoint[1]);
$("#tooltip").popover("show");
$("#tooltip").popover({
html: true,
title : function() {
return $(".popover-title").html();
},
content : function() {
return $(".popover-content").html();
}
});
$(".popover").css({
top : item.pageY,
left : item.pageX + 10
});
$(".popover.right>.arrow").css({
top : "20%",
});
} else {
$('#tooltip').attr("title","");
$('#tooltip').attr("data-content", "");
$("#tooltip").popover("hide");
}
});<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="choices_CAGraph"></div>
<div id="CAGraph" style="width:910px;height:400px"></div>
<div id=tooltip class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-02-12 20:50:00
好的，任何解决方案都必须考虑Bootstrap的popover功能的异步行为，正如雷德里在前几个评论中正确指出的那样。此外，它还必须考虑到这样一个事实，即plothover事件的触发速度要比异步弹出显示/隐藏调用完成速度快得多。换句话说，你必须特别注意系统的状态。
这使我了解到，作为悬停事件处理程序的一部分，一次又一次地创建popover对象是不可能的。它必须创建一次，然后只是显示和隐藏。
我还注意到，在您的最新代码中，您再次忽略了我前面的观点，即标题和内容属性要么是字符串，要么是返回字符串的函数。您正在返回来自您的jQuery对象--错误。
首先，我创建了一个新的jQuery函数。这将帮助我维护闭包中所需的状态，包括popover对象。
$.fn.popoverTooltip = function (selector, popoverSelector) {
// the rest of the code forming a nice closure
}
$.plot('#CAGraph', datasets, options);
$("#tooltip").popoverTooltip("#CAGraph", ".popover");作为这个封闭代码的一部分，我在顶部创建了一些局部变量：
var barIdShown = null;
var chart = $(selector);
var tooltip = $(this);
var popoverProcessor = function () {
// mysterious code maintaining state
}();然后是一个名为popoverProcessor (稍后将显示的代码)的新对象，它将完成大部分实际工作，并维护状态。
在这段代码之后，我创建了实际的弹出程序并绑定了一些事件处理程序。首先:我需要知道popover隐藏/显示功能何时真正完成，所以我将处理程序添加到相关的BS popover事件中。第二:我将处理程序绑定到plothover事件以处理显示或隐藏工具提示。
//create popover
tooltip.popover({
html: true,
title : popoverProcessor.getTitle,
content : popoverProcessor.getContent
});
// bind events to know when shown or hidden
tooltip.on("hidden.bs.popover", popoverProcessor.hideDone);
tooltip.on("shown.bs.popover", popoverProcessor.showDone);
// bind hover event to chart
chart.bind("plothover", function(event, pos, item) {
var thisBarId;
if (item) {
thisBarId = seriesIndex * 10000 + dataIndex;
if (thisBarId !== barIdShown) {
if (barIdShown) {
popoverProcessor.hide();
}
popoverProcessor.setItem(item);
popoverProcessor.show();
barIdShown = thisBarId;
}
}
else {
if (barIdShown) {
popoverProcessor.hide();
barIdShown = null;
}
}
});首先注意，我在popoverProcessor中使用函数返回工具提示的标题和内容。然后，为了知道光标是否悬停在另一个条形段上，而不移出该条，我创建了一个特殊的“bar标识符”。(如果它改变了，在重新显示之前，我会隐藏弹出窗口。)注意，在这个处理程序中，所有这些都是很好的“同步”；异步部分是在这个神秘的popoverProcessor对象中处理的。
var popoverProcessor = function () {
var item = null;
var state = "hidden";
var taskQueue = [];
var showPopover = function () {
tooltip.popover("show");
$(popoverSelector).css({
top : item.pageY,
left : item.pageX + 10
});
$(".popover.right > .arrow").css({
top : "20%",
});
state = "showing";
};
var hidePopover = function () {
tooltip.popover("hide");
state = "hiding";
};
var processNextTask = function () {
var task;
if (taskQueue.length > 0) {
task = taskQueue.shift();
if (task === "show") {
showPopover();
}
else {
hidePopover();
}
}
};
return {
setItem: function (newItem) { item = newItem; },
getTitle: function () {
if (item) {
return item.series.label;
}
return "unknown item";
},
getContent: function () {
var percent;
if (item) {
percent = item.datapoint[1].toFixed(0);
return percent.toString() + "<br />Total: " + item.datapoint[1];
}
return "unknown item";
},
hideDone: function () {
state = "hidden";
processNextTask();
},
showDone: function () {
state = "shown";
processNextTask();
},
hide: function () {
if (state === "shown") {
hidePopover();
}
else {
taskQueue.push("hide");
}
},
show: function () {
if (state === "hidden") {
showPopover();
}
else {
taskQueue.push("show");
}
}
};
}();公共对象有一组方法。您可以设置正在处理的项，您可以获得该弹出程序的标题和内容，您可以发出信号表明该弹出(或已经隐藏)，并且可以请求显示或隐藏该弹出项。
处理器维护popover对象的当前状态。这些是：“隐藏”、“显示”、“显示”和“隐藏”。如果调用hide()并“显示”状态，代码将立即调用内部函数hidePopover以开始隐藏popover，否则将向任务队列中添加一个项，以指示在可能的情况下应该隐藏popover。如果调用show()，也会发生类似的事情。
有趣的事情发生在事件处理程序showDone()和hideDone()中。这是下一个任务从任务队列中弹出并被处理的地方。使用此任务队列，我将在引导异步环境中维护隐藏/显示调用的顺序，确保只有在上一次更改完成后才会启动新的显示状态更改。
还请注意，在调用.popover("show")时，工具提示的标题和内容实际上是通过提供的函数计算的。
毫无疑问，这段代码可以稍微简化一些，但我已经完成了。
Stack Overflow用户
发布于 2016-02-11 23:12:50
工具提示div的id在HTML：tootltip而不是tooltip中出错。
在JavaScript中，图表容器的id是错误的：$("CAGraph").bind("plothover", ...而不是$("#CAGraph").bind("plothover",...
修复这两个错误后，popover显示但没有内容。
更新：我得到了弹出以显示一些内容，但不能使它一致工作。这可能是因为popover显示方法是：
.popover('show')显示一个元素的弹出。在实际显示之前(即在shown.bs.popover事件发生之前)返回给调用方。这被认为是一个“手动”触发弹出。标题和内容都为零长度的弹出式永远不会显示。
回到手动生成工具提示，然而，工作良好。请参阅更新的代码段：
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) {
var epoch = new Date(item.datapoint[0]);
var percent = item.datapoint[1] - item.datapoint[2];
$("#tooltip").html(item.series.label + " " + (percent) + "<br>Total: " + item.datapoint[1]).css({
top: item.pageY - 25,
left: item.pageX + 10,
padding: 5
}).fadeIn(200);
} else {
$("#tooltip").hide();
}
});<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="choices_CAGraph"></div>
<div id="CAGraph" style="width:910px;height:400px"></div>
<div id=tooltip class="popover" role="tooltip">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35349755
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号