绘制“点”图表功能

时间:2013-04-13 10:43:11

标签: flot

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

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

-2-每个数据点都有一种方法可以有“两个”标签吗?换句话说,假设我想描绘美国的城市和犯罪的逐年变化。我能否得到标有“波士顿+ 5.3%”和“圣地亚哥-7.1%”的分数? (请记住,第二个值(犯罪率的变化)不会成为任何一个轴的一部分。)

-3-如果上述情况可能,标签的第二部分(犯罪率的变化)是否可以根据价值进行颜色编码?例如,正面犯罪率以红色显示,而负面犯罪率以绿色显示?

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

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

如果你觉得上面有一个比IE8兼容的flot有更好的解决方案,请告诉我。

非常感谢你的帮助!

2 个答案:

答案 0 :(得分:1)

Flot的默认选项不支持您要查找的内容。但是,该库提供了hooks,您可以使用它来扩展其基本功能。

您可以在draw或(更好)drawSeries钩子上注册一个函数,该钩子迭代您的数据并创建绝对定位的div元素以充当每个点的标签。其他一切 - 多个标签,颜色编码,超链接等等只是你放入这些div的问题。

答案 1 :(得分:0)

建立@DNS理念,我举了一个简单的例子。在示例中,您将看到我将“标签”信息直接包含在我的数据数组中。如果存在此信息,则代码会在带有标签的点旁边添加div(并且它是超链接)。我没有在您的愿望清单上编码所有内容,但希望这会让您前进。

小提琴here

$(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] } }
    );

});