切换图表

Question

我在一个 HTML 文件中分布了 9 个工作图表图，但其中 7 个不如第一个和第二个相关，所以我想 "Toggle" 它们为了能够 Hide/Show 仅在需要时才提供它们，如 "extra" 信息。我一直在寻找信息，但我刚刚找到有关如何在情节上切换系列的信息，我想要的是 show/hide 整个情节区域以保留网页 "clean".

我试过以下方法：

<script>
    // Flot Charts code...
</script>
<div id="placeholder">
</div>
<script>
  $( "#button" ).click(function() {
     $( "#placeholder" ).toggle();
  });
</script>
<button id="button">Show/Hide</button>

但它只显示按钮和绘图，但是当我单击按钮时，绘图并没有消失...有什么想法吗？谢谢！

Answer 1

我以前遇到过这样的事情。我所做的只是切换 div.

<div id="userchart">
      <center>
          <canvas id="barchart" height="450" width="600"></canvas>
      </center>
</div>

jQuery

$("#toggle-user").click(function()
    {
        $('#userchart').slideToggle(500);
    });

Answer 2

在 HTML 中包含按钮之前，您将点击事件绑定到按钮。

在 DOM 完全加载后，交换这些或在 jQuery 中使用 $(function() { ... }); 到运行绑定。

切换图表

Toggle Flot Charts

javascript

jquery

html

toggle

flot