通過點擊圖表中的圖例來切換數據系列？

我用flot.js繪製了一些數據，但我有很多數據系列，所以用戶可能想要隱藏一些系列。 flot的例子之一顯示瞭如何使用複選框切換數據序列。我想點擊圖例的小彩盒或標籤，切換該系列的可見性。那可能嗎？通過點擊圖表中的圖例來切換數據系列？

2009-11-11 pojo

我想我找到了答案。 http://groups.google.com/group/flot-graphs/browse_thread/thread/8c1e7c2426e47e08/5bd0129a88f92f06?lnk=gst&q=toggle+series#5bd0129a88f92f06 – pojo 2009-11-12 07:54:34

又見http://stackoverflow.com/questions/4230945/海軍報-圖表 - 使用 - 圖例到導通斷系列 – ericslaw 2011-09-27 19:45:00

下面是一個使用複選框http://people.iola.dk/olau/flot/examples/turning-series.html

它可以被改造成將每個legendLabel click事件的例子，但你只能夠在時間顯示一個傳奇。

使用這樣的事情在準備功能


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

} 
);

來源

2009-12-02 21:30:22 P4ul

我剛剛回到編程和我不是太熟悉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>

來源

2013-07-28 08:55:48

通過點擊圖表中的圖例來切換數據系列？

回答

相關問題