css - 在Bootstrap 3面板中安装Highcharts.js的问题

我无法在位于选项卡窗格的Bootstrap 3面板中拟合highchart.js图表​​。您能看看this demo并让我知道我在这里干什么吗？

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>

</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home" style="padding:20px;">Please Visit The Chart Pane</div>
  <div role="tabpanel" class="tab-pane" id="profile">
    <div class="row">
<div class="col-md-4">
  <div class="panel panel-default">
  <div class="panel-heading">Chart 1</div>
  <div class="panel-body">
   <div class="" id="chart-box-1" style="width: 100%; height: 300px"></div>
  </div>
</div>
  </div>
  <div class="col-md-4">
  <div class="panel panel-default">
  <div class="panel-heading">Chart 2</div>
  <div class="panel-body">
    <div class="" id="chart-box-2" style="width: 100%; height: 300px"></div>
  </div>
</div>
  </div>
  <div class="col-md-4">
  <div class="panel panel-default">
  <div class="panel-heading">Chart3</div>
  <div class="panel-body">
   <div class="" id="chart-box-3" style="width: 100%; height: 300px"></div>
  </div>
</div>
  </div>
  </div>
  </div>
</div>

最佳答案

正如Highcharts文档中提到的here，您应该在图表对象中设置宽度。

例如 ：

var chart1;
$(function() {
  chart1 = new Highcharts.Chart({
    chart: {
      renderTo: 'chart-box-1',
      width: 700
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar']
    },
    series: [{
      data: [29.9, 71.5, 106.4]
    }]
  });
});

我更新了您的小提琴，以便您检查结果：http://jsfiddle.net/yhkbovkj/2/