2012-05-31 9 views
7

पर माउस hovers जब मैं 90 डेटा सेट ग्राफ करने के लिए flotr का उपयोग कर रहा हूँ। औसतन, डेटा के 9 0 सेटों में से केवल दो ही ग्राफिक लाइन का उत्पादन करेंगे। अन्य 88 या तो वाई मान इतने कम होंगे कि वे एक्स अक्ष से ऊपर की ओर चोटी नहीं करेंगे। यहाँ एक उदाहरण है ...फ़्लोटर डेटा श्रृंखला का नाम प्रदर्शित करता है जब माउस

enter image description here

मेरे समस्या मैं नहीं जानता कि क्या डेटा सेट उन दो लाइनें हैं है। मैं एक किंवदंती बना सकता था, लेकिन वह किंवदंती बहुत बड़ी होगी क्योंकि लगभग 9 0 डेटा सेट हैं। इसलिए मैं सोच रहा था कि फ़्लोटर के पास इन डेटा सेट को लेबल करने के लिए कोई फ़ंक्शन है, जब माउस उस डेटा सेट के लिए डेटा को घुमाएगा। क्या ऐसा कोई कार्य मौजूद है? धन्यवाद।

उत्तर

9

ठीक है, मुझे मेरा जवाब मिला। मैं इस उदाहरण देखा ...

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'}] 

नीचे जो परिवर्तन किए हैं का एक उदाहरण है। अब माउस होवर एक्स और वाई मान दिखाता है और जो भी डेटा लेबल दर्ज करता है।

से पहले:

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' 
      } 
     } 
    ); 
संबंधित मुद्दे