2009-11-11 19 views
6

Ich habe ein wenig mit flot.js gespielt, um einige Daten zu zeichnen, aber ich habe ziemlich viele Datenreihen, so dass der Benutzer einige Serien verstecken möchte. Eines der Beispiele von flot zeigt, wie Datenreihen mithilfe von Kontrollkästchen umgeschaltet werden. Ich möchte das kleine Farbfeld der Legende oder das Etikett anklicken, um die Sichtbarkeit dieser Serie umzuschalten. Ist das möglich?Datenreihen umschalten, indem Sie im Flotendiagramm auf die Legende klicken?

+0

Ich denke, ich fand die Antwort. http://groups.google.com/group/flot-graphs/browse_thread/thread/8c1e7c2426e47e08/5bd0129a88f92f06?lnk=gst&q=toggle+series#5bd0129a88f92f06 – pojo

+0

siehe auch http://stackoverflow.com/questions/4230945/ flot-graph-use-legende-um-an-aus-series – ericslaw

Antwort

4

Hier ist ein Beispiel, das Kontrollkästchen http://people.iola.dk/olau/flot/examples/turning-series.html

verwendet Es modifiziert werden könnte, ein Click-Ereignis auf jedem legendLabel zu platzieren, aber Sie würden nur in der Lage sein, eine Legende zu einem Zeitpunkt, zu zeigen.

so etwas wie dies in der Ready-Funktion mit


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

ich gerade bin immer wieder in der Programmierung und bin nicht allzu vertraut mit Ajax und dergleichen, so implementiert ich meine Lösung mit Javascript. Sie können möglicherweise zu Logik zu tun, was Sie suchen.

<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> 
Verwandte Themen