通过单击图表中的图例来切换数据系列？答案

【问题标题】：Toggle data series by clicking legend in flot chart?通过单击图表中的图例来切换数据系列？
【发布时间】：2009-11-11 13:56:02
【问题描述】：

我使用 flot.js 绘制了一些数据，但我有很多数据系列，所以用户可能想要隐藏一些系列。 flot 的示例之一展示了如何使用复选框来切换数据系列。我想单击图例的小颜色框或标签，以切换该系列的可见性。这可能吗？

【问题讨论】：

我想我找到了答案。 groups.google.com/group/flot-graphs/browse_thread/thread/…
另见stackoverflow.com/questions/4230945/…

标签： jquery flot

【解决方案1】：

这是一个使用复选框http://people.iola.dk/olau/flot/examples/turning-series.html的示例

可以修改为在每个 legendLabel 上放置一个点击事件，但您一次只能显示一个图例。

在 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 }
           }); 

}
);

【讨论】：

【解决方案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>

【讨论】：