ChartJS赢得't在引导选项卡中绘制图形，直到窗口调整大小

ChartJS won't draw graph inside bootstrap tab until window resize

本文关键字：图形 绘制 窗口 调整 赢得 选项 ChartJS      更新时间：2023-09-26

我使用引导程序的选项卡，每个选项卡中都有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/

在我的案例中，我在引导模式中的引导选项卡中使用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 %>"
    });
  });
});

我发现了另一个问题的提示：使用Chart.js linechart 的Bootstrap Modal

定义的选项卡式窗格访问的面板应具有属性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>

这是加载图形

相关文章：