在窗口调整大小之前，ChartJS不会在引导选项卡中绘制图形

Question

我在每个选项卡中使用带有图表js图表的引导选项卡。

发生的一个问题是在我调整浏览器窗口大小之前不会绘制图形画布。这种情况在最新的Chrome和Firefox中都有发生。

---

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

不幸的是我无法在jsfiddle中复制问题，不知何故它似乎在那里工作。但除了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");
    });

});

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

Answer 1

在我的情况下，我在一个bootstrap模式中的引导选项卡中使用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 %>"
    });

  });
});

我发现了另一个问题：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>

这是加载图表