2

我正在尝试使用 jquery.flot 制作家谱时间表。我想在悬停一个点时显示正确的标签，即当我悬停一个人的结婚点时，会出现标签“结婚 - 结婚日期”。但显然，我无法构建标签数组，因为可以为数据做到这一点。

只需一点代码：

<div id="placeholder" style="width:800px;height:300px"></div>

<script language="javascript" type="text/javascript">
$（函数（）{
  变量数据 = [
    {
      标签：[[“出生 Pierre MARTIN (1756)”]，[“婚姻 Pierre MARTIN (1781)”]，[“死亡 Pierre MARTIN (1812)”]]，
      数据：[[1756, 20.0], [1781, 20.0], [1812, 20.0]]
    },
    {
      标签：[[“出生玛丽杜邦（1761）”]，[“玛丽杜邦（1781）”]，[“玛丽杜邦（1833）”]]，
      数据：[[1761, 19.0], [1781, 19.0], [1833, 19.0]]
    },
    {
      标签：[[“出生查尔斯马丁（1782）”]，[“婚姻查尔斯马丁（1810）”]，[“死亡查尔斯马丁（1855）”]]，
      数据：[[1782, 18.0], [1810, 18.0], [1855, 18.0]]
    },
    {
      标签：[[“出生凯瑟琳马丁（1790）”]，[“婚姻凯瑟琳马丁（1810）”]，[“死亡凯瑟琳马丁（1868）”]]，
      数据：[[1790, 17.0], [1810, 17.0], [1868, 17.0]]
    },
    {
      标签：[[“出生路易斯马丁（1813）”]，[“死亡路易斯马丁（1876）”]]，
      数据：[[1813, 16.0], [1876, 16.0]]
    }
    ];
  变量选项 = {
    系列： {
      线：{显示：真，线宽：5}，
      点数：{ 显示：真，半径：4 }
    },
    图例：{显示：假}，
    xaxis: { min:1745, max:1885, tickDecimals: 0, tick: [[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：{显示：真，颜色：null，最小：14，最大：22，刻度：[[20，“皮埃尔马丁（1756-1812）”]，[19，“玛丽杜邦（1761-1833）”]， [18，“查尔斯·马丁(1782-1855)”]，[17，“凯瑟琳·马丁(1790-1868)”]，[16，“路易斯·马丁(1813-1876)”]]] }，
    选择：{模式：“x”}，
    网格：{borderWidth：2，可点击：true，可悬停：true，autoHighlight：true
  }};
  var 占位符 = $("#placeholder");
  placeholder.bind("plotselected", function (event, range) {
  $("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + range.xaxis.to.toFixed(1));
  var zoom = $("#zoom").attr("checked");
  如果（缩放）
    plot = $.plot（占位符，数据，
    $.extend(true, {}, 选项, {
      xaxis：{ min：ranges.xaxis.from，max：ranges.xaxis.to }
      }));
    });

  placeholder.bind("plotunselected", function (event) {
    $("#selection").text("");
  });

  var plot = $.plot（占位符，数据，选项）；
  $("#clearSelection").click(function () {
    plot.clearSelection();
  });

  功能显示工具提示（x，y，内容）{
    $('' + 内容 + '').css( {
      位置：'绝对'，
      显示：'无'，
      顶部：y + 5，
      左：x + 5，
      边框：'1px 实心#fdd'，
      填充：'2px'，
      '背景色'：'#eef'，
      不透明度：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 (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,
                            项目.系列.标签）；
            }
        }
        别的 {
            $("#tooltip").remove();
            上一个点 = null;
        }
    });

});
</脚本>

当我将鼠标悬停在图表的结合点上时，而不是显示：

“婚姻皮埃尔马丁（1781） ”，

我得到了整个数组：

“出生 Pierre MARTIN (1756) 婚姻 Pierre MARTIN (1781) 死亡 Pierre MARTIN (1812) ”。

您可以在此处查看我的示例，以便更清楚地说明（您可以获取代码）：

我的时间线图演示

有没有办法在图表上的每个点使用一个标签？

4

1 回答 1

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]);
于 2011-04-14T09:31:23.610 回答