चार्टजेएस बूटस्ट्रैप टैब के अंदर ग्राफ नहीं खींचेगा जब तक कि विंडो का आकार बदल न जाए

Question

मैं प्रत्येक टैब के अंदर चार्टज चार्ट के साथ बूटस्ट्रैप के टैब का उपयोग कर रहा हूं।

एक समस्या यह है कि यद्यपि हुआ है कि ग्राफ कैनवास अभ्यस्त जब तक मैं ब्राउज़र विंडो का आकार बदलने तैयार किया जा रहा है। और यह नवीनतम क्रोम और फ़ायरफ़ॉक्स दोनों में हो रहा है।

---

मैं ग्राफ ड्राइंग के बाद टैब बदल गया है के रूप में है, लेकिन कोई परिणाम के साथ अलग अलग समाधान की कोशिश कर रहा हूँ।

दुर्भाग्य से मैं jsfiddle में समस्या को डुप्लिकेट करने में असमर्थ था, किसी भी तरह यह वहां काम करता प्रतीत होता है। लेकिन एचटीएमएल 5 बॉयलरप्लेट के अलावा, बहुत सारे कोड हैं।

क्या कोई यह जानता है कि यह व्यवहार क्यों होता है? धन्यवाद!

/** 
* 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

मेरे मामले में मैं एक बूटस्ट्रैप मोडल अंदर एक बूटस्ट्रैप टैब के अंदर ChartJs उपयोग कर रहा था। मेरे मामले में समस्या मोडल थी, न कि टैब। Bootstrap Modal with Chart.js linechart

Answer 2

पैनलों परिभाषित विशेषता 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> 

Chartjs के साथ संबंधित कोड मैं इस मुद्दे पर अन्य एक संकेत पाया है

$('#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 %>" 
    }); 

    }); 
}); 

में स्थापित किया जाना है `, आप कॉल करने के लिए जो कुछ भी चार्टिंग पुस्तकालय की 'पुनः बनाने" की जरूरत मुलाकात की;

यह ग्राफ

इसके बजाय `console.log की