Come visualizzare i suggerimenti sul grafico a torta jqplot

Question

Ho un grafico a torta jqplot con una legenda e vorrei che il testo della legenda appaia come suggerimento quando il mouse si posiziona sulle torte. Non sono sicuro di come farlo. Qualcuno ha qualche esperienza simile?

codice di esempio:

$(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

È necessario associare gli eventi highligh e unhighligh ai dati jqplot, acquisire i dati che si desidera visualizzare e impostare il grafico contenente l'attributo titolo div.

Il codice seguente illustra il documento nel formato "x: y", dove x è l'etichetta legenda ed y è il valore:

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

Questo pezzo di codice viene utilizzato nel mio sistema che funziona senza problemi

Answer 2

Non credo v'è una costruito in per questo. È necessario associare i gestori agli eventi "jqplotDataHighlight" e "jqplotDataUnhighlight". Vedere l'esempio in fondo a questo page. Lo sta facendo con i grafici a bolle, ma dovrebbe anche tradurre in grafici a torta.

Answer 3

sto utilizzando l'ultima versione di jqPlot e ottenuto i suggerimenti per lavorare da solo utilizzando la seguente sezione "seriesDefaults" all'interno:

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

La parte importante è "useAxesFormatters: true" dal momento che non ci sono assi in un grafico a torta. Sentiti libero di cambiare "formatString" in qualsiasi modo tu voglia, ma per me, solo "% s" mostra la stessa stringa che appare nelle legende.

Answer 4

Sto usando la versione del plugin evidenziatore sul seguente link:

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

I parametri che sto usando:

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

I nuovi parametri assicurano una posizione fissa in cui il tooltip apparirà. Preferisco posizionarlo nell'angolo in alto a sinistra per evitare problemi con il ridimensionamento del contenitore div.

Answer 5

Come non ho potuto ottenere il Highlighter di lavorare - non visualizza nulla per me sul grafico a torta - ho finito con la soluzione di visualizzare la descrizione del browser in base all'evento 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); 
    });