Невозможно отобразить несколько гибких графиков холста на разных вкладках

Question

У меня разные графики на разных вкладках (вкладки навигационной тарелки) на моей странице. Когда я настроил график на отзывчивость, свойства ширины и высоты неактивных вкладок вычисляются как ноль, и поэтому неактивные графики не отображаются. Я попытался определить и отобразить графики в событии click, но это не сработало.

jsFiddle: http://jsfiddle.net/n2fole00/17nhjjp9/

<ul class="nav nav-pills"> 
    <li class="active"><a data-toggle="tab" href="#one" class="blue-tabs">One</a></li> 
    <li><a data-toggle="tab" href="#two" class="blue-tabs">Two</a></li> 

<div class="tab-content"> 

    <div id="one" class="tab-pane fade in active"> 
     <canvas id="myChart" width="200" height="100"></canvas> 
    </div> 

    <div id="two" class="tab-pane fade"> 
     <canvas id="myChart2" width="200" height="100"></canvas> 
    </div> 

</div> 


var data = { 
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      fillColor: "red", 
      strokeColor: "red", 
      pointColor: "red", 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "red", 
      data: [40, 35, 38, 40, 35, 40,] 
     } 
    ] 
}; 

var data2 = { 
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      fillColor: "red", 
      strokeColor: "red", 
      pointColor: "red", 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "red", 
      data: [25, 25, 25, 25, 35, 25,] 
     } 
    ] 
}; 

var ctx = document.getElementById("myChart").getContext("2d"); 
var ctx2 = document.getElementById("myChart2").getContext("2d"); 

var myLineChart = new Chart(ctx).Line(data, { responsive: true }); 
var myLineChart2 = new Chart(ctx2).Line(data2, { responsive: true }); 

Что можно сделать, чтобы исправить это?

Спасибо.

Answer 1

Кажется, вам нужно перерисовывать диаграмму каждый раз, когда вы переключались между вкладками. Если вы просто измените размер своего окна, вы увидите, что отображаемая диаграмма ...

Вызвать какой-то триггер для уничтожения myLineChart2, а затем просто запустить его еще раз.