2009-11-11 3 views
6

Я немного поиграл с flot.js для создания некоторых данных, но у меня довольно много серий данных, поэтому пользователь может захотеть скрыть некоторые серии. Один из примеров флота показывает, как переключать ряды данных с помощью флажков. Я хотел бы щелкнуть маленькую коробку цветов или ярлык легенды, чтобы переключить видимость этой серии. Это возможно?Переключить серию данных, щелкнув условное обозначение на карте флота?

+0

Я думаю, что нашел ответ. http://groups.google.com/group/flot-graphs/browse_thread/thread/8c1e7c2426e47e08/5bd0129a88f92f06?lnk=gst&q=toggle+series#5bd0129a88f92f06 – pojo

+0

смотри также http://stackoverflow.com/questions/4230945/ Flot-график использования-легенда к повороту-на-офф серии – ericslaw

ответ

4

Вот пример, который использует флажки http://people.iola.dk/olau/flot/examples/turning-series.html

Это может быть изменено, чтобы поместить событие щелчка на каждый legendLabel, но вы бы только быть в состоянии показать одну легенду в то время.

используя что-то вроде этого в готовом функции


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

Я просто получаю обратно в программировании, и я не слишком хорошо знакомы с AJAX и тому подобное, поэтому я реализовал свое решение с помощью JavaScript. Вы можете использовать логику, чтобы делать то, что ищете.

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