Bất kỳ ví dụ nào về Flot có chú giải nổi?

Question

Tôi hiện đang làm việc trên một đồ thị Flot, các API mà có vẻ khá mạnh mẽ tổng thể, mặc dù các ví dụ về sử dụng nâng cao không được tài liệu rộng rãi.

API đề xuất có nhiều cách để đặt có thể di chuột trên biểu đồ, không phải là tôi chắc chắn chính xác điều đó có nghĩa là tôi có thể làm gì với nó.

Tôi muốn biết nếu có ai có thể đóng góp một số ví dụ mà họ đã đi qua, hoặc mã cho rằng vấn đề, trong đó thể hiện ví dụ về bất cứ điều nào sau đây: tooltips

• động kích hoạt bởi di chuột qua các sự kiện trên Flot yếu tố biểu đồ
• tooltips Tick (lơ lửng trên các Xaxis cho thấy chi tiết)
• Bất kỳ loại di chuột trên/sự kiện động ràng buộc mà đã được sử dụng w Flot

Hiệu ứng tôi đang tìm kiếm tương tự như this Ví dụ về Biểu đồ Flash Mở

Answer 1

Hãy xem this flot example minh họa chú giải công cụ cho các điểm lô trên biểu đồ. (Đảm bảo bạn chọn hộp kiểm Bật chú giải công cụ.)

Answer 2

http://data.worldbank.org được tạo bằng cách sử dụng Flot và chú giải công cụ sử dụng.

Answer 3

http://craigsworks.com/projects/qtip2/demos/#flot là thư viện chú thích công cụ JS yêu thích của tôi. Badass khá của nó và có tích hợp flot.

Answer 4

Ngoài ra còn có một plugin tooltip đơn giản cho nó, bạn có thể tìm thấy nó here

Và tôi cũng thêm một số tính năng để các plugin, bạn có thể tìm thấy nó trên github. https://github.com/skeleton9/flot.tooltip

Answer 5

Bạn có thể thêm dữ liệu tùy chỉnh vào mảng dữ liệu và sử dụng dữ liệu đó để hiển thị chú giải công cụ.

Xem câu trả lời của tôi và ví dụ đầy đủ ở đây: displaying custom tooltip when hovering over a point in flot

Answer 6

Kiểm tra thư viện này cho tooltip và hội nhập flot

https://github.com/krzysu/flot.tooltip

Answer 7

Các liên kết trong câu trả lời của Simon đã làm việc rất tốt để cung cấp một cái móc để sử dụng với chú giải nổi nổi. Tuy nhiên, tôi thấy rằng tôi phải đào bới và cắt mã để hoàn thành ảnh hưởng di chuột. Đây là kết quả (về cơ bản nguyên văn từ http://people.iola.dk/olau/flot/examples/interacting.html).

Cài đặt duy nhất cần thay đổi trong khởi tạo kho là trong đối tượng tùy chọn. Nó cần phải bao gồm điều này như một trong các tùy chọn:

var options = { 
//... : {}, 
grid: { hoverable: true } 
}; 

Hàm này xây dựng và hiển thị phần tử tooltip khi được gọi. Các tham số x và y là các offset nằm bên trong flot, do đó các vị trí tooltip đúng.Nội dung được hiển thị trong chú giải công cụ

function showTooltip(x, y, contents) { 
     $('<div id="tooltip">' + contents + '</div>').css({ 
      position: 'absolute', 
      display: 'none', 
      top: y + 5, 
      left: x + 5, 
      border: '1px solid #fdd', 
      padding: '2px', 
      'background-color': '#fee' 
     }).appendTo("body").fadeIn(200); 
    } 

Đây là sự ràng buộc, nó chỉ nên được gọi một lần khi phần tử được dùng làm trình giữ chỗ cho sẵn có. Nó nối trình xử lý sự kiện. previousPoint được sử dụng làm cờ để hiển thị chú giải công cụ

var previousPoint = null; 
    $("#flotPlaceHolder").bind("plothover", function (event, pos, item) { 
     if (item) { 
      if (previousPoint != item.dataIndex) { 
       previousPoint = item.dataIndex; 

       $("#tooltip").remove(); 
       var x = item.datapoint[0].toFixed(0), 
        y = item.datapoint[1].toFixed(0); 

       showTooltip(item.pageX, item.pageY, "(" + x + "," + y + ")"); 
      } 
     } 
     else { 
      $("#tooltip").remove(); 
      previousPoint = null; 
     } 
    });