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

【问题标题】：ChartJS won't draw graph inside bootstrap tab until window resize在调整窗口大小之前，ChartJS 不会在引导选项卡内绘制图形
【发布时间】：2014-10-03 11:48:09
【问题描述】：

我正在使用 bootstrap 的选项卡，每个选项卡内都有 chartjs 图表。

发生的一个问题是图形画布不会在我调整浏览器窗口大小之前被绘制。最新的 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/

【问题讨论】：

您需要调用图表库的“重绘”方法，而不是console.log("TAB CHANGED");。
嗨@carl 我有同样的问题，你能解决吗？谢谢
嘿@AgustinHaller 很抱歉我还没有解决它。我目前正在从事其他项目。

标签： javascript jquery html twitter-bootstrap chart.js

【解决方案1】：

在我的例子中，我在引导 modal 内的引导选项卡内使用 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

【讨论】：

【解决方案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>

这是加载图表

【讨论】：

使用 'in active' 而不是 active