Chart.js在隐藏的Bootsrap选项卡中呈现

Question

这让我很生气,我在我的引导选项卡中使用Chart.js但它们不会渲染,因为在加载DOM时宽度设置为零.我在尝试找出为什么我的图表不存在之后终于找到了这个!

我在网上搜索过,似乎没有什么可以解决我的问题,任何人都可以帮我解决这个问题,我想我需要一些脚本,当选中标签并成功加载时渲染图我使用这个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,
});

与我的标签中的这个html片段一起:

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

多谢你们!

Answer 1

显示选项卡后,您需要调用图表.Bootstrap在他们的javascript插件上提供事件,您可以通过事件的jquery来监视它们.

$('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