Chart.js餅圖溢出div

Question

我無法獲得Chart.js（v2.6）餅圖以適應引導程序div。寬度響應，但高度溢出。您可以在小提琴中看到高度設置爲210px和statcard-fixed-height。該框保持高度，但圖表不。

HTML：

<div class="row"> 
    <div class="col-lg-1 m-b"> 
     <div id="new-old" class="statcard statcard-primary statcard-bg statcard-fixed-height-lg"> 
      <div class="p-a"> 
       <span class="statcard-desc">New vs. Returning Users</span> 
       <canvas id="myPieChart"></canvas> 
      </div> 
     </div> 
    </div> 
    </div> 

JS：

result = [{ 
    label: "New Users", 
    data: 48.8 
}, { 
    label: "Returning Users", 
    data: 51.2 
}]; 

var labels = [], 
    data = []; 
for (var i = 0; i < result.length; i++) { 
    labels.push(result[i].label); 
    data.push(result[i].data); 
} 
var ctx = document.getElementById("myPieChart").getContext("2d"); 
new Chart(ctx, { 
    type: 'pie', 
    data: { 
     labels: labels, 
     datasets: [{ 
      label: 'New vs Returning Users', 
      fill: false, 
      backgroundColor: ["#9F86FF", "#1BC98E"], 
      lineTension: 0.1, 
      data: data 
     }] 
    }, 
    options: { 
     responsive: true, 
     legend: { 
      display: true, 
      position: 'right', 
      labels: { 
       fontColor: '#fff' 
      } 
     }, 
     elements: { 
      arc: { 
       borderWidth: 0 
      } 
     } 
    } 
}); 
ctx.height = 100; 

小提琴：https://jsfiddle.net/3d6hqhc1/1/

UPDATE：

簡單小提琴：https://jsfiddle.net/m80xxxv8/1/

Answer 1

你需要用你圖陷入一個div

#responsive-chart{ 
    height: 100%; 
    width: 100%; 
} 

<div class="row"> 
    <div class="col-lg-1 m-b"> 
     <div id="new-old" class="statcard statcard-primary statcard-bg statcard-fixed-height-lg"> 
      <div class="p-a"> 
       <span class="statcard-desc">New vs. Returning Users</span> 
       <div id="responsive-chart"> 
        <canvas id="myPieChart"></canvas> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>