Javascript Chart.js饼图溢出div

我无法将Chart.js（v2.6）饼图放入引导div中。宽度响应，但高度溢出。我将高度设置为

210px

，使用

statcard固定高度

，正如您在小提琴中看到的那样。该框保持该高度，但图表不保持该高度

HTML:

新用户与返回用户

JS:

结果=[{
标签：“新用户”，
数据：48.8
}, {
标签：“返回用户”，
数据：51.2
}];
变量标签=[]，
数据=[]；
对于（变量i=0；i

小提琴：

更新：

---

更简单的提琴：

您需要将图表包装成一个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>

响应图{ 身高：100%； 宽度：100%； } 新用户与返回用户

包括一个holder div，并将maintaintAspectratio设置为false

var选项={
回答：是的，
MaintaintAspectRatio:false
};
更改高度：100%，在您的小提琴更新中，它适合我！
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;

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