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

Answer 2

就我而言，我发现了一个名为“ fade”的类，该类与具有相同名称的引导程序冲突。我的解决方案是将css类重命名为“ MyFade”。