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

Question

我无法在位于选项卡 Pane 中的 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>

Answer 1

如前所述here在 Highcharts 文档中，您应该在图表对象中设置宽度。

例如:

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]
    }]
  });
});

我更新了你的 fiddle ，所以你可以检查结果:http://jsfiddle.net/yhkbovkj/2/