Flot「點數」圖表功能

有人可以告訴我哪些是可能的嗎？Flot「點數」圖表功能

-1-我想創建海軍報散點圖，並認爲要做到這一點的方式是通過「點」。我們圖表中的每個點都需要始終有自己的標籤出現在圖表內 - 即，不僅僅是在懸停/鼠標懸停期間。我認爲這很容易做到？

-2-有沒有辦法讓每個數據點都有「兩個」標籤？換句話說，假設我想繪製美國的城市和犯罪年度的變化。我能否擁有標記爲「波士頓+ 5.3％」和「聖地亞哥-7.1％」的積分？（請記住第二個值（犯罪率變化）不會成爲任一軸的一部分。）

-3-如果以上是可能的，可以在標籤的第二部分（犯罪變化利率）是基於價值的顏色編碼？例如，正面犯罪率顯示爲紅色，負面犯罪率顯示爲綠色？

-4-點的標籤可以用作超鏈接嗎？

-5-對於出現，當你將鼠標放置這些點懸停彈出窗口，你可以包括比這包含在軸線更多的數據？例如，如果我們想在工具提示中包含多個數據點以便向用戶提供更多信息，這是可能的嗎？

如果您覺得有是上述比海軍報一個更好的解決方案，同時兼容IE8，請讓我知道。

非常感謝您的幫助！

來源

2013-04-13 a b

對於這個評論來自剛剛開始使用Flot自己的人的評論，我認爲您提到的所有內容都是可能的。我打算做一些相同類型的事情，我相信我的期望不是不合理的。然而，迄今爲止，我實際編碼的只是顯示鼠標懸停點上每個點的座標。我會很樂意看到有經驗人士的答案。 – Terry

Flot的默認選項不支持您正在查找的內容。但是，該庫提供了可用於擴展其基本功能的hooks。

可以註冊在任一平局或（更好）drawSeries功能掛鉤，超過你的數據迭代並創建絕對定位的div元素作爲標籤的每個點。其他的一切 - 多個標籤，顏色編碼，超鏈接等等，只是你投入這些div的問題。

來源

2013-04-13 20:10:06 DNS

關於@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] } } 
    ); 

});

來源

2013-04-14 15:25:03 Mark

Flot「點數」圖表功能

回答

相關問題