2009-11-11 6 views
6

Ho giocato un po 'con flot.js per tracciare alcuni dati, ma ho un bel po' di serie di dati, quindi l'utente potrebbe voler nascondere alcune serie. Uno degli esempi di flot mostra come commutare le serie di dati usando le checkbox. Vorrei fare clic sulla piccola scatola dei colori della leggenda o sull'etichetta per attivare la visibilità di quella serie. È possibile?Attiva o disattiva le serie di dati facendo clic sulla legenda nel grafico a torta?

+0

Penso di aver trovato la risposta. http://groups.google.com/group/flot-graphs/browse_thread/thread/8c1e7c2426e47e08/5bd0129a88f92f06?lnk=gst&q=toggle+series#5bd0129a88f92f06 – pojo

+0

vedere anche http://stackoverflow.com/questions/4230945/ flot-grafico-use-legenda-to-turn-on-off-serie – ericslaw

risposta

4

Ecco un esempio che utilizza le caselle di controllo http://people.iola.dk/olau/flot/examples/turning-series.html

potrebbe essere modificato per inserire un evento click su ogni legendLabel, ma si sarebbe solo in grado di mostrare una leggenda alla volta.

usando qualcosa di simile nella funzione pronti


$('.legendLabel').click(
function(d){ 
    var country = $(this).html().toLowerCase(); 
      var data = [ ]; 
    //alert(country); 
    data.push(datasets[country]); 

     if (data.length > 0) 
      $.plot($("#placeholder"), data, { 
       yaxis: { min: 0 }, 
       xaxis: { tickDecimals: 0 } 
      }); 

} 
);
0

Sto solo tornare in programmazione e non sono troppo familiarità con l'Ajax e simili, così ho implementato la mia soluzione con javascript. Potresti essere in grado di usare la logica per fare ciò che stai cercando.

<html> 
<head> 
<script type="text/javascript"> 
<!-- 
    function toggle_visibility(id) { 
     var e = document.getElementById(id); 
     if(e.style.display == 'block') 
      e.style.display = 'none'; 
     else 
      e.style.display = 'block'; 
    } 
//--> 
</script> 
</head> 

<body> 

<fieldset> 
    <legend onclick="toggle_visibility('cm1');">Click Me</legend> 
    <div id="cm1"> 
     <p>I toggle when the legend is clicked.</p> 
     <p>But I'm a recalcitrant text node and refuse to toggle.</p> 
    </div> 
</fieldset> 

<fieldset> 
    <legend onclick="toggle_visibility('cm2');">Click Me 2</legend> 
    <div id="cm2"> 
     <p>Toggle me too when the legend is clicked.</p> 
     <p>But I'm a recalcitrant text node and refuse to toggle.</p> 
    </div> 
</fieldset> 
</body> 
</html> 
Problemi correlati