Мой холст chart.js исчезает после функции hide () - PullRequest
Новая
       20

Мой холст chart.js исчезает после функции hide ()

1 голос
/ 10 марта 2019

Я пытаюсь выяснить, почему холст в моем коде, в данном случае - линейная диаграмма, не появляется снова после toggle().
. div появляется и исчезает при нажатии кнопки «Скрыть».кнопка, которая вызывает функцию toggle(), но div пуста, потому что холст не появляется.Когда я делаю ту же диаграмму вне div ".library" и не использую функции 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>

1 Ответ

1 голос
/ 10 марта 2019

Причина, по которой это происходит, в том, что родительский элемент вашего холста, .library скрыт во время инициализации, который устанавливает высоту и ширину холста равными 0. Смотрите этот ответ Высота / ширина холста 0

Решение состоит в том, чтобы сначала инициализировать canvas, а затем скрыть .library div.Смотрите код ниже: 

$(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>
...