부트 스트랩 3 패널의 Highcharts.js 피팅

Question

탭 패널에있는 부트 스트랩 3 패널에 highchart.js 차트를 맞추는 데 문제가 있습니다. this demo을 보시고 제가 여기서 뭘하고 있는지 알려주십시오. 그것이 Highcharts 문서에 here을 언급 한 바와 같이

<!-- 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

, 당신은 당신의 차트 개체의 폭을 설정해야합니다. http://jsfiddle.net/yhkbovkj/2/

: 나는 당신의 바이올린을 업데이트

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

그래서 당신은 결과를 확인할 수 있습니다 : 예를 들어