Flot 弗洛特“；要点；图表功能

有人能告诉我以下哪项是可能的吗

-1-我想在Flot中创建一个散点图，并相信这样做的方法是通过“点”。图形中的每个点都需要在图表中始终显示自己的标签，即，不仅仅是在悬停/鼠标悬停期间。我想这相当容易做到

-2-是否有办法使每个数据点都有“两个”标签？换句话说，假设我想画出美国的城市和犯罪率的逐年变化。我能把积分标为“波士顿+5.3%”和“圣地亚哥-7.1%”吗？（请记住，第二个值（犯罪率的变化）不会成为任一轴的一部分。）

-3-如果上述情况可行，标签的第二部分（犯罪率变化）是否可以根据值进行颜色编码？例如，正犯罪率以红色显示，负犯罪率以绿色显示

-4-点的标签可以作为超链接使用吗

-5-对于鼠标悬停在这些点上时出现的悬停弹出窗口，是否能够包含比轴中包含的数据更多的数据？例如，如果我们希望在工具提示中包含多个数据点，以便向用户提供更多信息，这可能吗

如果您觉得有一个比flot更好的解决方案也兼容IE8，请告诉我

---

非常感谢你的帮助

Flot的默认选项不支持您正在查找的内容。但是，该库确实提供了可用于扩展其基本功能的功能

---

您可以在draw或（更好的）drawSeries钩子上注册一个函数，该函数迭代您的数据并创建绝对定位的div元素作为每个点的标签。其他的一切——多个标签、颜色编码、超链接等等，都只是你在这些div中添加了什么的问题。

基于@DNS的想法，我给出了一个简单的例子。在本例中，您将看到我将“标签”信息直接包含到数据数组中。如果存在此信息，则代码会在带有标签的点旁边添加一个div（这是一个超链接）。我还没有把你愿望清单上的所有东西都编码好，但希望这能让你走

小提琴

$（函数（）{
函数divByPointHook（绘图、画布上下文、系列）{
$.each（series.data，function（）{
如果（this.length==3）{
var divStr=''
divStr+=''+''；
$（“#占位符”）.append（divStr）；
}
});
};
变量d1=[0,1，“一”]，[3,8，“两”]，[5,4，]，[2,10]，[1.2,9]，[9,2]，[46,41]，
[22,14]，[20,12，“三”]，[20,25]，[7,5]，[18,11]，[31,20]，[50,40，“四”]，[24,36]，
[20,42]，[33,41]，[51,39]，[11,28，“五”]，[32,16]，[38,40]，[35,22]，[41,30]，
[21,18]];
$.plot（$（“#占位符”）[{
数据：d1，
要点：{
半径：3，
秀：没错，
填充：正确
}}],
{hooks:{drawSeries:[divByPointHook]}
);
});

鉴于此评论来自刚刚开始使用Flot的人，我认为您提到的所有事情都是可能的。我正计划做一些类似的事情，我相信我的期望并不是不合理的。不过，到目前为止，我实际编写的代码只是在鼠标悬停时显示每个点的坐标。我最感兴趣的是看看那些有经验的人的答案。

$(function () {

     function divByPointHook(plot, canvascontext, series){
         $.each(series.data, function(){
             if (this.length == 3){
                 var divStr = '<div style="border:1px solid black; position:absolute; ';
                 var pos = plot.p2c({'x':this[0],'y':this[1]});
                 divStr += 'left:' + pos.left + 'px;';
                 divStr += 'top:' + pos.top + 'px; ">'
                 divStr += '<a href="#">'+this[2]+'</a>' + '</div>';
                $('#placeholder').append(divStr);   
             }
         });

     };

    var d1 = [[0,1,"one"],[3,8,"two"],[5,4,],[2,10],[1.2,9],[9,2],[46,41],
[22,14],[20,12,"three"],[20,25],[7,5],[18,11],[31,20],[50,40,"four"],[24,36],
[20,42],[33,41],[51,39],[11,28,"five"],[32,16],[38,40],[35,22],[41,30],
[21,18]];

    $.plot($("#placeholder"), [{
            data: d1,
            points: {
                radius: 3,
                show: true,
                fill: true
            }}],
           { hooks: { drawSeries: [divByPointHook] } }
    );

});