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”。

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

2 个答案: