使用带有工具提示插件的多个标签

我正在尝试用jquery.flot创建一个系谱时间轴。 当我徘徊一个点时，我想显示正确的标签，即当我徘徊在一个人的婚姻点时，出现标签“婚姻 – 结婚日期”。 但显而易见的是，我无法构建一系列标签，因为它可以为数据做到这一点。

只是一些代码：

 
 

 
 $（function（）{
   var data = [
     {
      标签：[[“出生皮埃尔马丁（1756）”]，[“婚姻皮埃尔马丁（1781）”]，[“死皮埃尔马丁（1812）”]，
      数据：[[1756,20.0]，[1781,20.0]，[1812,20.0]]
     }，
     {
       label：[[“Birth Marie DUPONT（1761）”]，[“Marriage Marie DUPONT（1781）”]，[“Death Marie DUPONT（1833）”]]，
      数据：[[1761,19.0]，[1781,19.0]，[1833,19.0]]
     }，
     {
      标签：[[“出生Charles MARTIN（1782）”]，[“Marriage Charles MARTIN（1810）”]，[“Death Charles MARTIN（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]]
     }
     ]。
   var options = {
    系列：{
       lines：{show：true，lineWidth：5}，
      分：{show：true，radius：4}
     }，
    传奇：{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，“ 查尔斯马丁 （1782-1855）”]，[17，“ 凯瑟琳马丁 （1790-1868）”，[16，“ 路易斯马丁 （1813-1876）”]}，
    选择：{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”）;
  如果（缩放）
     plot = $ .plot（占位符，数据，
     $ .extend（true，{}，options，{
       xaxis：{min：ranges.xaxis.from，max：ranges.xaxis.to}
       }））;
     }）;

   placeholder.bind（“plotunselected”，function（event）{
     $（ “＃选择”）文本（ “”）。
   }）;

   var plot = $ .plot（占位符，数据，选项）;
   $（“＃clearSelection”）。click（function（）{
     plot.clearSelection（）;
   }）;

   function showTooltip（x，y，contents）{
     $（''+ contents +''）。css（{
      位置：'绝对'，
      显示：'无'，
      上：y + 5，
      左：x + 5，
       border：'1px solid #fdd'，
      填充：'2px'，
       'background-color'：'＃eef'，
      不透明度：0.80
     }）appendTo（ “正文”）淡入（20）。。
   }

   var previousPoint = null;
     $（“＃placeholder”）。bind（“plothover”，function（event，pos，item）{
         $（ “＃X”）文本（pos.x.toFixed（2））。
         $（ “＃Y”）文本（pos.y.toFixed（2））。
         if（item）{
             if（previousPoint！= item.datapoint）{
                 previousPoint = item.datapoint;
                  $（ “＃提示”），删除（）。
                 var x = item.datapoint [0] .toFixed（2），
                     y = item.datapoint [1] .toFixed（2）;
                  showTooltip（item.pageX，item.pageY，
                             item.series.label）;
             }
         }
        其他{
             $（ “＃提示”），删除（）。
             previousPoint = null;
         }
     }）;

 }）;
 

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

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

我得到整个arrays：

“ 出生皮埃尔马丁（1756年）婚姻皮埃尔马丁（1781年）死皮埃尔马丁（1812年） ”。

你可以在这里看到我的例子，更加解释一下（你可以抓住代码）：

我的时间线图的演示

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

Answer 1

           
Essai Flot tooltip
 
    

请注意，我改变了这个：

 showTooltip(item.pageX, item.pageY, item.series.label); 

为了这：

 showTooltip(item.pageX, item.pageY, item.series.label[item.dataIndex]);