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

Question

这让我抓狂，我在我的 bootstrap 选项卡中使用 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" 的 class 与同名的 bootstrap 冲突。我的解决方案是将 css class 重命名为 "MyFade"。

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

Chart.js render in hidden Bootsrap tab

javascript

twitter-bootstrap

chart.js