2012-05-31 33 views
7

Tôi đang sử dụng flotr để vẽ biểu đồ 90 tập hợp dữ liệu. Trung bình, chỉ có hai trong số 90 bộ dữ liệu thực sự sẽ tạo ra một dòng có thể vẽ được. 88 khác hoặc như vậy sẽ có giá trị y quá thấp đến mức chúng sẽ không đạt đỉnh trên trục x. Dưới đây là một ví dụ ...tên chuỗi dữ liệu hiển thị flotr khi di chuột qua đường

enter image description here

Vấn đề của tôi là tôi không biết những gì dữ liệu thiết lập hai dòng là. Tôi có thể tạo ra một huyền thoại, nhưng truyền thuyết đó sẽ rất lớn vì có khoảng 90 bộ dữ liệu. Vì vậy, tôi đã tự hỏi liệu flotr có chức năng gắn nhãn các tập dữ liệu này khi chuột di chuột qua dữ liệu được vẽ đồ thị cho tập dữ liệu đó hay không. Liệu một hàm như vậy tồn tại? Cảm ơn.

Trả lời

9

OK, tôi đã tìm thấy câu trả lời của mình. Tôi thấy ví dụ này ...

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

một này sử dụng theo dõi hỗ trợ nhưng nó chỉ cho thấy các giá trị x và y. Tôi thấy dòng này ....

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

và thay đổi nó để này ...

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

Sau đó, tôi đã chỉ định một nhãn dữ liệu cho mỗi tập dữ liệu và thông qua họ để Flotr.draw trong một kết hợp mảng. Tôi đã làm điều này bằng cách thay đổi này ...

[dataset1, dataset2] 

này ...

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

Dưới đây là một ví dụ về những thay đổi tôi thực hiện. Bây giờ di chuột cho thấy các giá trị x và y và bất kỳ nhãn dữ liệu nào bạn nhập vào.

Trước:

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

Sau:

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' 
      } 
     } 
    ); 
Các vấn đề liên quan