javascript - Chart.js 不显示在 Bootstrap 选项卡面板中

Question

我遇到了一些问题，无法让我的 Chart.js 与 Twitter Bootstrap 选项卡一起正常工作。由于某种原因，它不会加载。我不知道在设置或解决方法中是否有这样做的方法。这是我的代码:

<div class="tab-content">
  <div role="tabpanel" class="tab-pane" id="home">
    <canvas id="vchart" width="1140" height="300"></canvas>
    <script type="text/javascript">
      var vChartData = {
        labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
        datasets: [{
          label: { % trans '"Visitors"' %
          },
          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: [40, 50, 60, 90, 100, 155, 180, 190, 200, 500, 170, 200]
        }, {
          label: { % trans '"Unique Visitors"' %
          },
          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: [20, 25, 30, 45, 50, 70, 100, 80, 60, 80, 70, 100]
        }]
      }
      var vChart = document.getElementById('vchart').getContext('2d');
      new Chart(vChart).Line(vChartData);
    </script>
  </div>

  <div role="tabpanel" class="tab-pane" id="month">

  </div>

  <div role="tabpanel" class="tab-pane" id="year">

  </div>
</div>

当我加载页面时，它不会从头显示，如果我尝试来回切换标签，它也不会显示。

对此是否有好的解决方案(解决方法)？

Answer 1

信息在这里http://getbootstrap.com/javascript/#tabs

使用这样的东西

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  // here redraw your chart
})

UPD:为您制作演示http://jsfiddle.net/serGlazkov/291w2jLk/145/