图表.js不显示在 Boostrap 选项卡面板中

Chart.js do not display in Boostrap tabpanel

本文关键字：选项 Boostrap js 显示 图表      更新时间：2023-09-26

我在获取图表时遇到了一些问题.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>

当我加载页面时，它不会从一开始就显示，如果我尝试来回切换选项卡，它也不会显示。

有没有一个好的解决方案（解决方法）？

信息在这里 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/

相关文章：