通過單擊flot chart中的圖例來切換數據系列？

Question

我已經使用flot.js來繪制一些數據，但是我有很多數據系列，所以用戶可能想要隱藏一些系列。 flot的一個示例顯示了如何使用復選框切換數據系列。 我想點擊圖例的小顏色框或標簽，以切換該系列的可見性。 那可能嗎？

Answer 1

以下是使用復選框http://people.iola.dk/olau/flot/examples/turning-series.html的示例

可以修改它以在每個legendLabel上放置一個click事件，但是您一次只能顯示一個圖例。

在ready函數中使用這樣的東西


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

}
);

Answer 2

我剛剛回到編程中，並且對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>

通過單擊flot chart中的圖例來切換數據系列？

問題描述

2 個解決方案

解決方案1
4

解決方案2
0 2013-07-28 08:55:48

通過單擊flot chart中的圖例來切換數據系列？

問題描述

2 個解決方案

解決方案1 4

解決方案2 0 2013-07-28 08:55:48

解決方案1
4

解決方案2
0 2013-07-28 08:55:48