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

info here 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/

Chart.js不会显示在Boostrap tabpanel中

1 个答案: