在窗口调整大小之前，ChartJS不会在引导选项卡中绘制图形 [英] ChartJS won't draw graph inside bootstrap tab until window resize

问题描述

我正在每个标签页面中使用带有chartjs图表的bootstrap标签。

I'm using bootstrap's tabs with chartjs charts inside every tab.

但是发生的一个问题是图形画布不会被绘制，直到我调整浏览器窗口的大小。这在最新的Chrome和Firefox中都会发生。

One problem that have occurred though is that the graph canvas wont be drawn until i resize the browser window. And this is happening in both latest Chrome and Firefox.

我一直在尝试使用不同的解决方案选项卡已更改，但没有结果。

I've been trying different solutions as drawing the graph after the tab is changed but with no results.

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

Unfortunately I was unable to duplicate the problem in jsfiddle, somehow it seems to work there. But there's pretty much all the code, besides the html5 boilerplate.

有没有人知道为什么会出现这种情况？谢谢！

Does anyone know possibly why this behavior happens? Thanks!

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

推荐答案

在我的情况下我使用的是ChartJs位于bootstrap 模态内的bootstrap选项卡中。我的问题是模态，而不是标签。与Chartjs相关的代码必须设置为

In my case I was using ChartJs inside a bootstrap tab inside a bootstrap modal. The problem in my case was the modal, and not the tab. The code related with Chartjs has to be set into

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

  });
});

我发现了另一个问题的提示：带有Chart.js折线图的Bootstrap模态

I have found a hint on this other issue: Bootstrap Modal with Chart.js linechart

这篇关于在窗口调整大小之前，ChartJS不会在引导选项卡中绘制图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！