Переключить ряд данных, щелкнув легенду на диаграмме? - PullRequest
Новая
       25

Переключить ряд данных, щелкнув легенду на диаграмме?

6 голосов
/ 11 ноября 2009

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

Ответы [ 2 ]

4 голосов
/ 03 декабря 2009

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

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

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


$('.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 голосов
/ 28 июля 2013

Я только что вернулся к программированию и не очень знаком с 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>
...