響應式畫布超出div

我正在使用ChartJS在div中放置響應式圖表。我也使用bootstrap，因此div類是網格聚焦（例如md-9）。該圖表不斷擴大。我正在考慮溢出：隱藏在div上，但不想失去顯示的任何數據。這裏是我的開發網站的鏈接。任何援助表示讚賞：響應式畫布超出div

http://investingcalculator.azurewebsites.net

我當前的HTML代碼：

 <div class="budgetcalcsection"> 
     <div class="row"> 

      <div class="col-sm-3 col-md-2"> 

       <div class="inputtext"> 
        Current Balance 
        <div class="input-group"> 
         <span class="input-group-addon">$</span> 
         <input type="number" id="currentbalance" class="form-control" placeholder="0"> 
        </div> 
       </div> 

       <div class="inputtext"> 
        Interest Rate 
        <div class="input-group"> 
         <span class="input-group-addon">%</span> 
         <input type="number" id="interestrate" class="form-control" placeholder="0"> 
        </div> 
       </div> 

       <div class="inputtext"> 
        Monthly Contributions 
        <div class="input-group"> 
         <span class="input-group-addon">$</span> 
         <input type="number" id="monthlycontribution" class="form-control" placeholder="0"> 
        </div> 
       </div> 

       <div class="inputtext"> 
        Years Contributing 
        <div class="input-group"> 
         <span class="input-group-addon">+</span> 
         <input type="number" id="yearscontributing" class="form-control" placeholder="0"> 
        </div> 
       </div> 

       <div class=""> 
        <input class="btn btn-default" type="submit" id="calculate" value="Calculate"> 
       </div> 

       <div class=""> 
        <input class="btn btn-default" type="submit" id="reset" value="Reset"> 
       </div> 

       <div class="inputtext"> 
        Ending Balance 
        <div class="input-group"> 
         <span class="input-group-addon">$</span> 
         <input type="text" id="endingbalance" class="form-control" placeholder="0" readonly> 
        </div> 
       </div> 
      </div> 

      <!-- Investing Chart --> 

      <div class="col-sm-9 col-md-10"> 
        <canvas id="canvas"></canvas> 
      </div> 

     </div> 
    </div>

來源

2014-11-08 Kode

請將代碼添加到您的問題中。從幫助中心：如果可以創建一個可以鏈接到的問題的實例（例如，在sqlfiddle.com或jsbin.com上），那麼請執行此操作 - 但也會將代碼包含在您的問題本身中。不是每個人都可以訪問外部網站，並且這些鏈接可能會隨着時間而中斷 – Marcelo 2014-11-08 16:42:53

會做。剛剛解決它與您的意見：

– Kode 2014-11-08 17:17:03

問題的事實，ChartJS不考慮梗上元素上的顯示框邊界-框。它將圖表大小調整爲div的整個寬度，而不考慮填充。

爲了解決這個問題，只需在列中放置一個沒有任何引導列類的div，並使用ChartJS作爲目標。

來源

2014-11-08 16:24:52 Marcelo

解決你說的把一個div包裝在我的專欄：

– Kode 2014-11-08 17:17:28

響應式畫布超出div

回答

相關問題