Charts.js＆Bootstrap手风琴

问题描述：

我一直在试图理解为什么Charts.js如果它在Bootstrap Accordion之内，不会绘制图表。Charts.js＆Bootstrap手风琴

经过多次尝试，我终于明白了为什么它不绘制图表！这是因为面板基本上是隐藏的画布，所以Charts.js不会绘制它。

任何人都可以帮我想出一个解决方案吗？

我也试图只在引导事件shown.bs.collapse处于活动状态时才绘制图表，不起作用。

这里有一个jsfiddle我创建来说明这个问题：如果你想重现该问题只需在行<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">

答

我把它用下面的代码工作添加in到类

：

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headingOne"> 
     <h4 class="panel-title"> 
     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
      Collapsible Group Item #1 
     </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="panel-body"> 
     <canvas id="q_chart" width="400" height="400"></canvas> 
     </div> 
    </div> 
    </div> 
</div>

和JavaScript

var ctx = document.getElementById("q_chart").getContext("2d"); 
var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [{ 
     label: "My First dataset", 
     fillColor: "rgba(220,220,220,0.2)", 
     strokeColor: "rgba(220,220,220,1)", 
     pointColor: "rgba(220,220,220,1)", 
     pointStrokeColor: "#fff", 
     pointHighlightFill: "#fff", 
     pointHighlightStroke: "rgba(220,220,220,1)", 
     data: [65, 59, 80, 81, 56, 55, 40] 
    }, { 
     label: "My Second dataset", 
     fillColor: "rgba(151,187,205,0.2)", 
     strokeColor: "rgba(151,187,205,1)", 
     pointColor: "rgba(151,187,205,1)", 
     pointStrokeColor: "#fff", 
     pointHighlightFill: "#fff", 
     pointHighlightStroke: "rgba(151,187,205,1)", 
     data: [28, 48, 40, 19, 86, 27, 90] 
    }] 
}; 
var MyNewChart=null; 
$('#collapseOne').on('shown.bs.collapse', function() { 
    setTimeout(function() { 
     if(MyNewChart == null) 
      MyNewChart = new Chart(ctx).Bar(data); 
    },200); 
});

对，它的工作，现在...你介意解释为什么你的代码工作？ :) – odedta

@odedta正如你所说，chartjs不起作用，因为面板基本上隐藏了画布，所以我们需要在面板显示时运行chartjs，但当面板被盗时会触发事件'shown.bs.collapse'hide（仅在面板显示完成之前几毫秒），所以我只是创建一个延迟，以确保面板完全显示 – Shayan

我明白了，非常感谢！ – odedta

答

对于任何后来的人来说，我有同样的问题，但不愿意依赖接受答案中提供的计时器延迟。下面是使用引导3.3.7与显示事件什么工作对我来说：显示

.bs.collapse

$('#accordion').on('shown.bs.collapse', function (e) { 

      switch (e.target.id) 
      { 
       case "panel1": ShowChart1(); break; 
       case "panel2": ShowChart2(); break; 
       case "panel3": ShowChart3(); break; 
       case "panel4": ShowChart4(); break; 
       default: ShowDefault(); 
      } 

     })

希望这有助于

顺便说一句 - 这是上面的代码工作：greatdata.com/stats/newyork_ny

Charts.js＆Bootstrap手风琴

相关推荐