javascript - 点击按钮显示图表，再次点击关闭图表

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

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

编辑

在 Fiddle 中的代码中添加以下内容。基本上将 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();
         }
     });
});