0

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

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

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

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

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

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

如果您觉得上述问题有比 flot 更好的解决方案，也兼容 IE8，请告诉我。

非常感谢您的帮助！

4

2 回答 2

1

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

您可以在 draw 或（更好的）drawSeries 挂钩上注册一个函数，该挂钩遍历您的数据并创建绝对定位的 div 元素以充当每个点的标签。其他一切——多个标签、颜色编码、超链接等，都只是你在这些 div 中放入的内容的问题。

于 2013-04-13T20:10:06.273 回答
0

基于@DNS 的想法，我整理了一个简单的例子。在示例中，您将看到我将“标签”信息直接包含到我的数据数组中。如果存在此信息，则代码会在带有标签的点旁边添加一个 div（它是一个超链接）。我还没有对你的愿望清单上的所有内容进行编码，但希望这会让你继续前进。

在这里拉小提琴。

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

});
于 2013-04-14T15:25:03.133 回答