如果单击按钮则显示图表，如果再次单击则关闭它

Question

我从插件中获取此代码以显示图表，我只想在单击按钮时显示此图表，然后再次关闭它并再次单击该按钮。图表的代码是：

$(function(){
  $("#doughnutChart").drawDoughnutChart([
    { title: "Tokyo",         value : 100,  color: "#2C3E50" },
    { title: "San Francisco", value:  80,   color: "#FC4349" },
    { title: "New York",      value:  70,   color: "#6DBCDB" },
    { title: "London",        value : 50,   color: "#F7E248" },
    { title: "Sydney",        value : 40,   color: "#D7DADB" },
    { title: "Berlin",        value : 20,   color: "#FFF" }
  ]);
});

HTML

<div id="doughnutChart" class="chart"></div>

Answer 1

一些简单的jQuery可以解决问题。

$(document).ready(function(){
     $("button").click(function(){
         $("#doughnutChart").toggle();
     });
});

这应显示/隐藏您的图表。

修改

在小提琴中添加以下代码。基本上用javascript代替第307行：

$(document).ready(function(){
     $("#something").click(function(){
         if($('#doughnutChart').is(':visible')) {
             $(".doughnutChartwrap").hide();
             $(".doughnutChartwrap").html("<div id=\"doughnutChart\" class=\"chart\"></div>");
         }
         else{
             $("#doughnutChart").drawDoughnutChart([
                 { title: "Tokyo",         value : 100,  color: "#2C3E50" },
                 { title: "San Francisco", value:  80,   color: "#FC4349" },
                 { title: "New York",      value:  70,   color: "#6DBCDB" },
                 { title: "London",        value : 50,   color: "#F7E248" },
                 { title: "Sydney",        value : 40,   color: "#D7DADB" },
                 { title: "Berlin",        value : 20,   color: "#FFF" }
             ]);
             $(".doughnutChartwrap").show();
         }
     });
});