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

问题描述

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

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/

推荐答案

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

  });
});

我在其他问题上找到了提示:Bootstrap Modal with Chart.js linechart

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

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