Cách hiển thị chú giải công cụ trên biểu đồ hình tròn jqplot

Question

Tôi có biểu đồ hình tròn jqplot với chú giải và tôi muốn văn bản chú giải xuất hiện dưới dạng chú giải công cụ khi di chuột trên bánh nướng. Tôi không chắc chắn làm thế nào để làm điều đó. Có ai có kinh nghiệm làm tương tự không?

mã ví dụ:

$(document).ready(function(){ 
    var data = [['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],['Out of home', 16],['Commuting', 7], ['Orientation', 9]]; 
    var plot1 = jQuery.jqplot ('chart1', [data], 
    { 
     seriesDefaults: { 
     renderer: jQuery.jqplot.PieRenderer, 
     rendererOptions: { 
      showDataLabels: true 
     } 
     }, 
     legend: { show:true, location: 'e' } 
    } 
); 
}); 

Answer 1

Bạn cần liên kết dữ liệu jqplot các sự kiện highligh và unhighligh, lấy dữ liệu bạn muốn hiển thị và đặt biểu đồ chứa thuộc tính tiêu đề của div.

Các mã sau đây hiển thị tiêu đề trong các định dạng của "x: y", trong đó x là nhãn huyền thoại và y là giá trị:

var plot = $.jqplot('plotDivId',...); 

$("#plotDivId").bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) { 
      var $this = $(this);     

      $this.attr('title', data[0] + ": " + data[1]);        
     }); 

$("#plotDivId").bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) { 
      var $this = $(this);     

      $this.attr('title',""); 
}); 

Đoạn mã này đang được sử dụng trong hệ thống của tôi mà không có vấn đề gì.

Answer 2

Tôi không tin rằng có được tích hợp sẵn trong cho việc này. Bạn sẽ cần phải liên kết các trình xử lý với các sự kiện 'jqplotDataHighlight' và 'jqplotDataUnhighlight'. Xem ví dụ ở cuối số page này. Điều này là làm điều đó với các ô bong bóng, nhưng nó cũng nên chuyển sang các ô hình tròn.

Answer 3

Tôi đang sử dụng phiên bản mới nhất của jqPlot và đã nhận được chú giải công cụ để làm việc bằng cách chỉ sử dụng "seriesDefaults" bên trong phần sau:

highlighter: { 
    show: true, 
    formatString:'%s', 
    tooltipLocation:'sw', 
    useAxesFormatters:false 
} 

Phần quan trọng là "useAxesFormatters: false" vì không có các trục trong biểu đồ hình tròn. Vui lòng thay đổi "formatString" thành bất kỳ thứ gì bạn muốn, nhưng đối với tôi, chỉ "% s" hiển thị chính xác cùng một chuỗi hiển thị trong các truyền thuyết.

Answer 4

Tôi đang sử dụng các phiên bản của các plugin highlighter vào liên kết sau:

https://github.com/tryolabs/jqplot-highlighter

Các thông số Tôi đang sử dụng:

highlighter: { 
    show:true, 
    tooltipLocation: 'n', 
    tooltipAxes: 'pieref', // exclusive to this version 
    tooltipAxisX: 20, // exclusive to this version 
    tooltipAxisY: 20, // exclusive to this version 
    useAxesFormatters: false, 
    formatString:'%s, %P', 
} 

Các thông số mới đảm bảo một vị trí cố định nơi tooltip sẽ xuất hiện. Tôi thích đặt nó ở góc trên bên trái để tránh các vấn đề với việc thay đổi kích thước div container.

Answer 5

Vì tôi không thể làm cho Highlighter hoạt động - nó không hiển thị bất cứ thứ gì cho tôi trên biểu đồ hình tròn - tôi đã kết thúc với giải pháp để hiển thị chú giải công cụ trình duyệt dựa trên sự kiện highligter.

var plot1 = jQuery.jqplot ('chart1', [data], { 
seriesDefaults: { 
    renderer: jQuery.jqplot.PieRenderer 
    } 
} 
); 

$('#chart1').bind('jqplotDataHighlight', function (ev, seriesIndex, pointIndex, data) { 
    document.getElementById('chart1').title = data; 
    //alert('series: '+seriesIndex+', point: '+pointIndex+', data: '+data); 
    });