Javascript 沙特斯旺'；在窗口调整大小之前，不要在引导选项卡内绘制图形

我使用bootstrap的选项卡，每个选项卡中都有chartjs图表

但是出现的一个问题是，在我调整浏览器窗口的大小之前，图形画布无法绘制。最新的Chrome和Firefox都出现了这种情况

---

我一直在尝试不同的解决方案，在选项卡更改后绘制图形，但没有结果

不幸的是，我无法在JSFIDLE中复制这个问题，不知何故，它似乎在那里工作。但是除了html5样板之外，还有几乎所有的代码

有人知道为什么会发生这种行为吗？谢谢

/**
 * 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");
    });

});

/**
*ChartJS使用JSON数据和moment.js显示时间
*由于实验，代码非常难看
*/
函数getJSON（）{
$.getJSON（“data.json”），函数（数据）{
var dataArray=[]；
控制台日志（数据）；
var级数={}；
用于（数据系列中的var x）{
var日期=[]；
var值=[]；
//循环每个系列的所有测量值。
对于（var i=0；i

---

在我的例子中，我在引导模式中的引导选项卡中使用ChartJs。在我的案例中，问题是模态，而不是选项卡。与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 %>"
    });

  });
});

$（'#modal'）.on（'show.bs.modal'，函数（事件）{
$.getJSON(http://whatever.com/file.js，函数（数据）{
var ctx=document.getElementById（“heightChart”）.getContext（“2d”）；
window.myNewChart=新图表（ctx）.StackedBar（数据、{
回答：是的，
动画：没错，
showScale：没错，
多工具模板：“-”
});
});
});

---

我发现了关于另一个问题的提示：

由定义的选项卡式窗格访问的面板应该具有属性

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>

---在此处显示图像---

---

这是加载图形的过程，而不是加载控制台.log（“选项卡已更改”），你需要调用任何图表库的“重画”方法。嗨@carl，我有同样的问题，你能解决吗？谢谢@AgustinHaller很抱歉，我还没有解决这个问题。我目前正在处理其他项目。使用“在活动中”而不是“活动”