大佬教程收集整理的这篇文章主要介绍了javascript – jquery flot：显示所有数据和Y轴悬停，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
//My data instance:
var datasets = {
"1st input": {
label: "1st input",data: [
[1.250208e+12,1339],[1.2502944e+12,1316],[1.2503808e+12,1379],[1.2504672e+12,1223],]
},"2nd input": {
label: "2nd input",data: [
[1.2503808e+12,1324],};
//old one,instead of displaying the selected ones from choiceContainer,I want to display all.
function showWhole() {
var data = [];
choiceContainer.find("option:selected").each(function () {
var key = $(this).attr("name");
if (key && datasets[key])
data.push(datasets[key]);
});
if (data.length > 0)
$.plot($("#placeholder"),data,{
yaxis: {},xaxis: { mode: "time",minTickSize: [1,"day"],timeformat: "%d/%m/%y"},"lines": {"show": "true"},"points": {"show": "true"},clickable:true,hoverable: true
});
}
问候
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="http://people.iola.dk/olau/flot/examples/layout.css" rel="stylesheet" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/excanvas.pack.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<style> #tooltip { font-size:8pt; } </style>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p>Here is an example with real data: military budgets for
varIoUs countries in constant (2005) million US dollars (source: <a href="http://www.sipri.org/">SIPRI</a>).</p>
<script id="source" language="javascript" type="text/javascript">
$(function () {
var datasets = {
"usa": {
label: "USA",data: [[1988,483994],[1989,479060],[1990,457648],[1991,401949],[1992,424705],[1993,402375],[1994,377867],[1995,357382],[1996,337946],[1997,336185],[1998,328611],[1999,329421],[2000,342172],[2001,344932],[2002,387303],[2003,440813],[2004,480451],[2005,504638],[2006,528692]]
},"russia": {
label: "Russia",218000],203000],171000],42500],37600],36600],21700],19200],21300],13600],14000],19100],23600],25100],26100],31100],34700]]
},"uk": {
label: "UK",62982],62027],60696],62348],58560],56393],54579],50818],50554],48276],47691],47529],47778],48760],50949],57452],60234],60076],59213]]
},"germany": {
label: "Germany",55627],55475],58464],55134],52436],47139],43962],43238],42395],40854],40993],41822],41147],40474],40604],40044],38816],38060],36984]]
},};
// define an empty array
var data = [];
// use this existing loop...
var i = 0;
$.each(datasets,function(key,val) {
val.color = i;
++i;
// ... and add this line - so the data array is populated (row by row)
data.push(datasets[key]);
});
// plot the graph with the newly populated data array
$.plot($("#placeholder"),{
yaxis: { min: 0 },xaxis: { tickDecimals: 0 },grid: { hoverable: true,clickable: true },points: { show: true },lines: { show: true },});
// add some hovering logic to each point...
var prevIoUsPoint = null;
$("#placeholder").bind("plothover",function (event,pos,item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (prevIoUsPoint != item.datapoint) {
prevIoUsPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX,item.pageY,item.series.label + " of " + x + " = " + y);
}
}
else {
$("#tooltip").remove();
prevIoUsPoint = null;
}
});
// show the tooltip
function showTooltip(x,y,contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',display: 'none',top: y - 35,left: x + 5,border: '1px solid #fdd',padding: '2px','background-color': '#fee',opacity: 0.80
}).appendTo("body").fadeIn(200);
}
});
</script>
</body>
</html>
以上是大佬教程为你收集整理的javascript – jquery flot：显示所有数据和Y轴悬停全部内容，希望文章能够帮你解决javascript – jquery flot：显示所有数据和Y轴悬停所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。