Canvas JS 图表在 Bootstrap 选项卡中显示不正确

Question

我正在使用 bootstrap 选项卡来显示月度和周度图表。当我 select 第二个选项卡图表不适合 col-md-3 时，图表在第一个选项卡中正确加载。如何修复此错误？

Answer 1

CanvasJS Chart 会根据容器的尺寸自动设置图表的高度和宽度。如果没有为容器设置值，它将采用默认值。

在bootstrap中，由于第二个选项卡一开始没有显示，所以图表采用默认值。为解决此问题，当 bootstrap.

触发 shown.bs.tab 事件时呈现第二个图表

这是相同的工作代码。

  var chart = new CanvasJS.Chart("chartContainer", {
    zoomEnabled: false,
    axisY: {
      includeZero: false,

    },
    axisX: {
      interval: 1,
      intervalType: "day",
      valueFormatString: "DD-MMM",
      labelAngle: -35,

    },
    data: [{
      type: "candlestick",
      dataPoints: [{
        x: new Date(2016, 0, 21),
        y: [35670, 35679.95, 34500.05, 34909.1]
      }, {
        x: new Date(2016, 0, 20),
        y: [36180, 36180, 34620, 35040.25]
      }, {
        x: new Date(2016, 0, 19),
        y: [36225, 36800, 35540, 36362]
      }, {
        x: new Date(2016, 0, 18),
        y: [37311, 37950, 36000, 36193.2]
      }, {
        x: new Date(2016, 0, 15),
        y: [38300, 38480, 37500, 37688.05]
      }, ]
    }]
  });
  chart.render();

  function ct1() {

    var chart1 = new CanvasJS.Chart("chartContainer1", {

      zoomEnabled: false,
      axisY: {
        includeZero: false,

      },
      axisX: {
        interval: 1,
        intervalType: "day",
        valueFormatString: "DD-MMM",
        labelAngle: -35,

      },
      data: [{
        type: "candlestick",
        dataPoints: [{
          x: new Date(2016, 0, 21),
          y: [35670, 35679.95, 34500.05, 34909.1]
        }, {
          x: new Date(2016, 0, 20),
          y: [36180, 36180, 34620, 35040.25]
        }, {
          x: new Date(2016, 0, 19),
          y: [36225, 36800, 35540, 36362]
        }, {
          x: new Date(2016, 0, 18),
          y: [37311, 37950, 36000, 36193.2]
        }, {
          x: new Date(2016, 0, 15),
          y: [38300, 38480, 37500, 37688.05]
        }, ]
      }]
    });
    chart1.render();
  }

  $('#bs-tab2').on("shown.bs.tab", function() {
    ct1();
    $('#bs-tab2').off(); //to remove the binded event after initial rendering
  });

.container {
  background: #ccc
}

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="col-md-3">
    <ul class="nav nav-pills nav-jt">
      <li class="active"><a data-toggle="tab" href="#tab1">Week</a>
      </li>
      <li><a data-toggle="tab" id="bs-tab2" href="#tab2">Month</a>
      </li>
    </ul>
    <div class="tab-content">
      <div id="tab1" class="tab-pane fade active in">
        <div id="chartContainer" style="height: 300px; width: 100%;"></div>
      </div>
      <div id="tab2" class="tab-pane">
        <div id="chartContainer1" style=" height: 300px; width: 100%;"></div>
      </div>
    </div>
  </div>
</div>

Canvas JS 图表在 Bootstrap 选项卡中显示不正确

Canvas JS chart not displayed properly in Bootstrap tabs

twitter-bootstrap

responsive-design

tabs

canvasjs