Question

我一直在努力理解为什么Charts.js如果在Bootstrap Accordion内的情况下不会绘制图表。

经过多次尝试，我设法理解为什么它没有绘制图表！它是因为面板基本上隐藏画布，所以Charts.js不能绘制它。

任何人都可以帮我提出解决方案吗？

我还尝试仅在Bootstrap事件shown.bs.collapse处于活动状态时绘制图表，但不起作用。

这是我创建的jsfiddle来说明问题：

如果您想重现问题，只需将in添加到第<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">行中的课程

Answer 1

我使用以下代码：

<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);
});

Answer 2

我做了一些测试，发现您可以调用MyNewChart.update()而不是像验证的答案那样在超时时重新创建图表。第一次过渡有些粗糙（可能是因为过渡是在创建时发生的），但之后过渡是平滑的。

示例JSFiddle：https://jsfiddle.net/akh9cnx5/

<div class="container">
    <button type="button" class="col-12 btn btn-light mb-2" data-toggle="collapse" data-target="#viewgraph" aria-expanded="false" aria-controls="viewgraph">View Graph</button>
    <div id="viewgraph" class="collapse mb-2">
        <div class="card card-body">
            <div class="d-flex justify-content-center">
                <div class="col-12 col-sm-8">
                    <canvas id="graph"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

和javascript

var ctx = document.getElementById('graph').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 = new Chart(ctx, {
  type: 'bar',
  data: data
});

$("#viewgraph").on('shown.bs.collapse', function () {
  myNewChart.update();
});

Answer 3

对于之后来到这里的人来说，我遇到了同样的问题但更喜欢不依赖于接受答案中提供的计时器延迟。以下是使用Bootstrap 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();
            }

        })

希望这有帮助

btw - 这是上面的代码：greatdata.com/stats/newyork_ny

Charts.js＆amp; Bootstrap手风琴

3 个答案: