我正在尝试用jquery.flot创建一个系谱时间轴。 当我徘徊一个点时，我想显示正确的标签，即当我徘徊在一个人的婚姻点时，标签“婚姻 - 结婚日期”出现。 但显而易见的是，我无法构建一系列标签，因为它可以为数据做到这一点。
只是一些代码：
<div id="placeholder" style="width:800px;height:300px"></div>
<script language="javascript" type="text/javascript">
$(function () {
var data = [
{
label: [["Birth Pierre MARTIN (1756)"], ["Marriage Pierre MARTIN (1781)"], ["Death Pierre MARTIN (1812)"]],
data: [[1756, 20.0], [1781, 20.0], [1812, 20.0]]
},
{
label: [["Birth Marie DUPONT (1761)"], ["Marriage Marie DUPONT (1781)"], ["Death Marie DUPONT (1833)"]],
data: [[1761, 19.0], [1781, 19.0], [1833, 19.0]]
},
{
label: [["Birth Charles MARTIN (1782)"], ["Marriage Charles MARTIN (1810)"], ["Death Charles MARTIN (1855)"]],
data: [[1782, 18.0], [1810, 18.0], [1855, 18.0]]
},
{
label: [["Birth Catherine MARTIN (1790)"], ["Marriage Catherine MARTIN (1810)"], ["Death Catherine MARTIN (1868)"]],
data: [[1790, 17.0], [1810, 17.0], [1868, 17.0]]
},
{
label: [["Birth Louis MARTIN (1813)"], ["Death Louis MARTIN (1876)"]],
data: [[1813, 16.0], [1876, 16.0]]
}
];
var options = {
series: {
lines: { show: true, lineWidth: 5},
points: { show: true, radius: 4 }
},
legend: { show: false },
xaxis: { min:1745, max:1885, tickDecimals: 0, ticks: [[1750, "1750"], [1760, "1760"], [1770, "1770"], [1780, "1780"], [1790, "1790"], [1800, "1800"], [1810, "1810"], [1820, "1820"], [1830, "1830"], [1840, "1840"], [1850, "1850"], [1860, "1860"], [1870, "1870"], [1880, "1880"]] },
yaxis: { show: true, color:null, min:14, max:22, ticks: [[20, "Pierre MARTIN (1756-1812)"], [19, "Marie DUPONT (1761-1833)"], [18, "Charles MARTIN (1782-1855)"], [17, "Catherine MARTIN (1790-1868)"], [16, "Louis MARTIN (1813-1876)"]] },
selection: { mode: "x" },
grid: { borderWidth: 2, clickable: true, hoverable: true, autoHighlight: true
}};
var placeholder = $("#placeholder");
placeholder.bind("plotselected", function (event, ranges) {
$("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));
var zoom = $("#zoom").attr("checked");
if (zoom)
plot = $.plot(placeholder, data,
$.extend(true, {}, options, {
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
}));
});
placeholder.bind("plotunselected", function (event) {
$("#selection").text("");
});
var plot = $.plot(placeholder, data, options);
$("#clearSelection").click(function () {
plot.clearSelection();
});
function showTooltip(x, y, contents) {
$('' + contents + '').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#eef',
opacity: 0.80
}).appendTo("body").fadeIn(20);
}
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);
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
});
</script>
当我将鼠标悬停在图表的结婚点上时，而不是显示：
“婚姻皮埃尔·马丁（1781）”，
我得到整个阵列：
“出生皮埃尔·马丁（1756年）婚姻皮埃尔·马丁（1781年）死亡皮埃尔·马丁（1812年）”。
你可以在这里看到我的例子，更加解释一下（你可以抓住代码）：
有没有办法在图表上每个点使用一个标签？
答案 0 :(得分：4)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Essai Flot tooltip</title>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script src="flot/jquery.flot.min.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<h1>Essai Flot tooltip</h1>
<div id="placeholder" style="width:800px;height:300px"></div>
<script id="source" language="javascript" type="text/javascript">
$(function () {
var data = [
{
label: [["Birth Pierre MARTIN (1756)"], ["Marriage Pierre MARTIN (1781)"], ["Death Pierre MARTIN (1812)"]],
data: [[1756, 20.0], [1781, 20.0], [1812, 20.0]]
},
{
label: [["Birth Marie DUPONT (1761)"], ["Marriage Marie DUPONT (1781)"], ["Death Marie DUPONT (1833)"]],
data: [[1761, 19.0], [1781, 19.0], [1833, 19.0]]
},
{
label: [["Birth Charles MARTIN (1782)"], ["Marriage Charles MARTIN (1810)"], ["Death Charles MARTIN (1855)"]],
data: [[1782, 18.0], [1810, 18.0], [1855, 18.0]]
},
{
label: [["Birth Catherine MARTIN (1790)"], ["Marriage Catherine MARTIN (1810)"], ["Death Catherine MARTIN (1868)"]],
data: [[1790, 17.0], [1810, 17.0], [1868, 17.0]]
},
{
label: [["Birth Louis MARTIN (1813)"], ["Death Louis MARTIN (1876)"]],
label: "Louis MARTIN (1813-1876)",
data: [[1813, 16.0], [1876, 16.0]]
}
];
var options = {
series: {
lines: { show: true, lineWidth: 5},
points: { show: true, radius: 4 }
},
legend: { show: false },
xaxis: { min:1745, max:1885, tickDecimals: 0, ticks: [[1750, "1750"], [1760, "1760"], [1770, "1770"], [1780, "1780"], [1790, "1790"], [1800, "1800"], [1810, "1810"], [1820, "1820"], [1830, "1830"], [1840, "1840"], [1850, "1850"], [1860, "1860"], [1870, "1870"], [1880, "1880"]] },
yaxis: { show: true, color:null, min:14, max:22, ticks: [[20, "<strong>Pierre MARTIN</strong> (1756-1812)"], [19, "<strong>Marie DUPONT</strong> (1761-1833)"], [18, "<strong>Charles MARTIN</strong> (1782-1855)"], [17, "<strong>Catherine MARTIN</strong> (1790-1868)"], [16, "<strong>Louis MARTIN</strong> (1813-1876)"]] },
selection: { mode: "x" },
grid: { borderWidth: 2, clickable: true, hoverable: true, autoHighlight: true
}
};
var placeholder = $("#placeholder");
placeholder.bind("plotselected", function (event, ranges) {
$("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));
var zoom = $("#zoom").attr("checked");
if (zoom)
plot = $.plot(placeholder, data,
$.extend(true, {}, options, {
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
}));
});
placeholder.bind("plotunselected", function (event) {
$("#selection").text("");
});
var plot = $.plot(placeholder, data, options);
$("#clearSelection").click(function () {
plot.clearSelection();
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#eef',
opacity: 0.80
}).appendTo("body").fadeIn(20);
}
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();
console.log(item);
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY,
item.series.label[item.dataIndex]);
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
});
</script>
</body>
</html>
请注意我改变了这个：
showTooltip(item.pageX, item.pageY,
item.series.label);
为此：
showTooltip(item.pageX, item.pageY,
item.series.label[item.dataIndex]);