ChartJS non disegnerà il grafico all'interno della scheda bootstrap fino al ridimensionamento della finestra

Question

Sto usando le schede di bootstrap con i grafici chartjs all'interno di ogni scheda.

Un problema che si è verificato è che la tela del grafico non verrà disegnata prima di ridimensionare la finestra del browser. E questo sta accadendo in entrambe le ultime versioni di Chrome e Firefox.

---

Ho provato diverse soluzioni come disegnare il grafico dopo che la scheda è stata modificata ma senza risultati.

Purtroppo non è stato possibile duplicare il problema in jsfiddle, in qualche modo sembra funzionare lì. Ma c'è praticamente tutto il codice, oltre al boiler html5.

Qualcuno sa forse perché questo comportamento si verifica? Grazie!

/** 
* ChartJS using JSON data and moment.js for time display 
* Code is quite ugly due to experimentation 
*/ 

function getJSON(){ 

    $.getJSON("data.json", function(data){ 
     var dataArray = []; 
     console.log(data); 
     var series = {}; 

     for (var x in data.Series) { 
      var dates = []; 
      var values = []; 
      // Loop across all the measurements for every serie. 
      for (var i = 0; i < data.Series[x].length; i++) { 
       var obj = data.Series[x][i]; 
       dates.push(moment(obj.Date).format("MMMM Mo")); 
       values.push(obj.Value); 
      } 
      // Keep the list of dates and values by serie name. 
      series[x] = { 
       dates: dates, 
       values: values 
      }; 
     } 
    //some debug stuff 
    console.log(series.height.dates); 
    console.log(series.height.values); 

    var dataArray = { 
     labels: series.height.dates, 
     datasets: [ 
     { 
      label: "Height", 

      strokeColor: "rgb(26, 188, 156)", 
      pointColor: "rgba(220,220,220,1)", 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(220,220,220,1)", 
      data: series.height.values 
     } 
     ] 
    }; 

    function chartFunc(dataArray) { 

     var ctx = document.getElementById("heightChart").getContext("2d"); 
     var myLineChart = new Chart(ctx).Line(dataArray, { 
      scaleShowGridLines : true, 
      bezierCurve : true, 
      bezierCurveTension : 0.4, 
      datasetStroke : false, 
      fillColor: "rgba(0,0,0,0)", 
      datasetFill : false, 
      responsive: true, 
      showTooltips: true, 
      animation: false, 
     }); 
    } //chartFunc 

    chartFunc(dataArray); 

    }); //JQ getJSON 

}//getJSON 


$(document).ready(function() { 

    getJSON(); 

    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) { 
     console.log("TAB CHANGED"); 
    }); 

}); 

http://jsfiddle.net/woqsazau/1/

Answer 1

Nel mio caso usavo ChartJs all'interno di una scheda di bootstrap all'interno di un bootstrap modale. Il problema nel mio caso era il modale e non il tab. Il codice correlato con Chartjs deve essere impostato in

$('#modal').on('shown.bs.modal', function (event) { 
    $.getJSON(http://whatever.com/file.js, function(data) { 
    var ctx = document.getElementById("heightChart").getContext("2d"); 
    window.myNewChart = new Chart(ctx).StackedBar(data, { 
     responsive : true, 
     animation: true, 
     showScale: true, 
     multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>" 
    }); 

    }); 
}); 

ho trovato un suggerimento su questo altro problema: Bootstrap Modal with Chart.js linechart

Answer 2

I pannelli accessibili dai riquadri tabulari definiti dovrebbero avere l'attributo active:

<ul> 
    <li role="presentation" class="active col-sm-3"> 
    <a href="#tab3primary" data-toggle="tab">Sample</a> 
    </li> 
</ul> 

<div class="tab-pane fade in active" id="tab3primary"> 
    <canvas>---displays the image here ---</canvas> 
</div> 

Questo è il caricamento del grafico