在窗口resize之前，ChartJS不会在引导选项卡中绘制图形
我正在每个标签页面中使用带有chartjs图表的bootstrap选项卡。
发生的一个问题是在我调整浏览器窗口大小之前不会绘制图形canvas。 这种情况在最新的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/
在我的情况下，我在一个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 %>" }); }); });
我在另一个问题上找到了一个提示： 带有Chart.js线图的Bootstrap Modal