當鼠標懸停在線上時，flotr顯示數據系列名稱

Question

我使用flotr來繪製90個數據集。平均而言，90組數據中只有兩組實際上會產生可繪製線條。另外88個左右的y值會很低，幾乎不會在x軸上方達到峯值。下面是一個例子...

我的問題是我不知道的數據集什麼的兩行。我可以創造一個傳奇，但是那個傳奇將會是巨大的，因爲有大約90個數據集。所以我想知道當鼠標懸停在該數據集的圖形數據上時，flotr是否具有標記這些數據集的功能。這樣的功能是否存在？謝謝。

Answer 1

好的，我找到了我的答案。我看到這個例子...

http://phenxdesign.net/projects/flotr/examples/prototype/mouse-tracking.html

這一次使用的跟蹤支持，但只顯示x和y的值。我看到這條線....

trackFormatter: function(obj){ return 'x = ' + obj.x +', y = ' + obj.y; } 

，並把它改成這個...

trackFormatter: function(obj){ return 'x = ' + obj.x +', y = ' + obj.y +', Data Series = ' + obj.series.label; } 

然後我指定了每個數據集的數據標籤，並通過他們的聯想到Flotr.draw陣列。我這樣做是通過改變這個...

[dataset1, dataset2] 

這個...

[{data:dataset1,label:'label_for_dataset1'}, {data:dataset2,label:'label_for_dataset2'}] 

下面是我所做的變化的例子。現在鼠標懸停顯示x和y值以及您輸入的任何數據標籤。

前：

var dataset1 = [[100, 4.09453e-29], [99, 1.41672e-28],...... ]; 
var dataset2 = [[100, 9.48582e-19], [99, 1.88215e-18],...... ]; 

var f = Flotr.draw(
     $('container'), 
     [dataset1, dataset2], 
     { 
      mouse:{ 
       track: true, 
       lineColor: 'purple', 
       relative: true, 
       position: 'ne', 
       sensibility: 1, // => The smaller this value, the more precise you've to point 
       trackDecimals: 2, 
       trackFormatter: function(obj){ return 'x = ' + obj.x +', y = ' + obj.y; } 
      }, 
      crosshair:{ 
       mode: 'xy' 
      } 
     } 
    ); 

後：

var dataset1 = [[100, 4.09453e-29], [99, 1.41672e-28],...... ]; 
var dataset2 = [[100, 9.48582e-19], [99, 1.88215e-18],...... ]; 

var f = Flotr.draw(
     $('container'), 
     [{data:dataset1,label:'enter_label_for_dataset1_here'}, {data:dataset2,label:'enter_label_for_dataset2_here'}], 
     { 
      mouse:{ 
       track: true, 
       lineColor: 'purple', 
       relative: true, 
       position: 'ne', 
       sensibility: 1, // => The smaller this value, the more precise you've to point 
       trackDecimals: 2, 
       trackFormatter: function(obj){ return 'x = ' + obj.x +', y = ' + obj.y +', Data Series = ' + obj.series.label; } 
      }, 
      crosshair:{ 
       mode: 'xy' 
      } 
     } 
    );