Chart.js渲染隐藏的Bootsrap选项卡

这使我疯了，我在我的引导选项卡中使用Chart.js，但他们不会呈现，因为当DOM加载时宽度设置为零。我试图弄清楚为什么我的图表不在那里！Chart.js渲染隐藏的Bootsrap选项卡

我在网上搜索并没有什么似乎解决我的问题，任何人可以请帮助我，我想我需要一些脚本的时候使用这个JS选择了选项卡，并成功加载进出口呈现的图形：

var data = [ 
{ 
    value: 300, 
    color:"#F7464A", 
    highlight: "#FF5A5E", 
    label: "Red" 
}, 
{ 
    value: 50, 
    color: "#46BFBD", 
    highlight: "#5AD3D1", 
    label: "Green" 
}, 
{ 
    value: 100, 
    color: "#FDB45C", 
    highlight: "#FFC870", 
    label: "Yellow" 
} 
]; 
var options = { 
    responsive : true, 
    animation: true, 
}; 

var ctx1 = $("#invest-chart").get(0).getContext("2d"); 
var invest_chart; 
new Chart(ctx1).Doughnut(data, { 
    responsive : true, 
    animation: true, 
});

随着我的标签这个网站片：

<canvas id="invest-chart"></canvas>

谢谢你们！

来源

2015-04-22 Boris Kamp

http://stackoverflow.com/questions/29395853/chart-js-in-angularjs-tabset-does-not-render?rq=1 – mccainz

我不熟悉' chart.js'及其函数，但应该有一种方法来显示选项卡时使用引导程序的'shown.bs.tab'函数显示图表：http://getbootstrap.com/javascript/#tabs –

感谢Tim ！诀窍 –

您需要在显示选项卡后调用图表。 Bootstrap在他们的javascript插件上提供了事件，您可以通过jquery on事件来观察事件。

$('a[href=#chart]').on('shown.bs.tab', function(){ 
    var data = [ 
    { 
    value: 300, 
    color:"#F7464A", 
    highlight: "#FF5A5E", 
    label: "Red" 
    }, 
    { 
    value: 50, 
    color: "#46BFBD", 
    highlight: "#5AD3D1", 
    label: "Green" 
    }, 
    { 
    value: 100, 
    color: "#FDB45C", 
    highlight: "#FFC870", 
    label: "Yellow" 
    } 
]; 
var options = { 
    responsive : true, 
    animation: true, 
}; 
var ctx1 = $("#invest-chart").get(0).getContext("2d"); 
var invest_chart; 
new Chart(ctx1).Doughnut(data, { 
    responsive : true, 
    animation: true, 
}); 
});

http://codepen.io/anon/pen/bdGrKv

来源

2015-04-22 21:04:09

谢谢！甚至没有意识到这个功能！感谢您的帮助和codepen！ –

嗨@evilrobotz我有超过3个选项卡，并在每个选项卡有图表。那么如何解决这个问题 –

Chart.js渲染隐藏的Bootsrap选项卡

回答

相关问题