flotr Anzeige Daten Serie Name, wenn die Maus über die Linie schwebt

Question

Ich verwende Flotr um 90 Datensätze zu grafisch darzustellen. Im Durchschnitt werden nur zwei der 90 Datensätze tatsächlich eine Grafiklinie erzeugen. Die anderen etwa 88 haben y-Werte, die so niedrig sind, dass sie kaum über die x-Achse ansteigen. Hier ist ein Beispiel ...

Mein Problem ist, dass ich weiß nicht, was Datensatz diese beiden Linien sind. Ich könnte eine Legende machen, aber diese Legende wäre riesig, weil es etwa 90 Datensätze gibt. Ich habe mich also gefragt, ob flotr eine Funktion hat, diese Datensätze zu beschriften, wenn die Maus über die Grafikdaten für diesen Datensatz fährt. Existiert eine solche Funktion? Vielen Dank.

Answer 1

Okay, ich habe meine Antwort gefunden. Ich sah dieses Beispiel ...

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

Dieser verwendete Unterstützung Tracking, aber es zeigt nur die x- und y-Werte. Ich sah diese Linie ....

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

und änderte es so weit ...

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

Dann habe ich ein Datenetikett für jeden Datensatz festgelegt und übergeben sie in einem assoziativen Flotr.draw Array. Ich tat dies, indem diese zu ändern ...

[dataset1, dataset2] 

dazu ...

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

Im Folgenden ein Beispiel für die Veränderungen, die ich gemacht. Jetzt zeigt der Mauszeiger die x- und y-Werte und die von Ihnen eingegebenen Datenbeschriftungen an.

Bevor:

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' 
      } 
     } 
    ); 

Nach:

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' 
      } 
     } 
    );