我的 chart.js 画布在 hide() 函数后消失了答案

【问题标题】：My chart.js canvas disappears after hide() function我的 chart.js 画布在 hide() 函数后消失了
【发布时间】：2019-07-31 17:02:53
【问题描述】：

我试图找出为什么我的代码中的画布（在这种情况下是折线图）在 toggle() 之后不再出现。
div 出现并在单击“隐藏”按钮时消失，这会导致 toggle() 功能，但 div 是空的，因为画布没有出现。当我在“.library”div 之外制作相同的图表并且不使用任何toggle() 或hide() 函数时，它可以工作。

（我正在使用 chart.js - 是的，我已经下载了 chart.js，即使它不在我下面的代码中）

$(".library").hide();
$("#hide").on("click", () => {
  $(".library").toggle();
});


var lineData = {
  labels: ["January", "February", "March", "April", "May", "June"],
  datasets: [{
    fillColor: "rgba(172,194,132,0.4)",
    strokeColor: "#ACC26D",
    pointColor: "#fff",
    pointStrokeColor: "#9DB86D",
    data: [186, 156, 251, 144, 305, 236]
  }]
}
var line = document.getElementById('line').getContext('2d');
new Chart(line).Line(lineData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>

<button id="hide">hide</button>
<div class="library" id="chart">
    <canvas id="line" width="600" height="400"></canvas>
</div>

【问题讨论】：

您好，如果以下回答解决了您的问题，请考虑点击旁边的灰色勾号接受它:)

标签： javascript jquery chart.js toggle hide

【解决方案1】：

发生这种情况的原因是您的画布的父级 .library 在初始化时被隐藏，这会将画布的高度和宽度设置为 0。请参阅此答案 Canvas height/width 0

解决方法是先初始化canvas，然后隐藏.librarydiv。见以下代码：

$(function() {
  
  $("#hide").on("click", () => {
    $(".library").toggle();
  });


  var lineData = {
    labels: ["January", "February", "March", "April", "May", "June"],
    datasets: [{
      fillColor: "rgba(172,194,132,0.4)",
      strokeColor: "#ACC26D",
      pointColor: "#fff",
      pointStrokeColor: "#9DB86D",
      data: [186, 156, 251, 144, 305, 236]
    }]
  }
  var line = document.getElementById('line').getContext('2d');
  new Chart(line).Line(lineData);
  
  $(".library").hide();

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>


<button id="hide">hide</button>
<div class="library" id="chart">

  <canvas id="line" width="600" height="400"></canvas>

</div>

【讨论】：