Chart.js饼图溢出div

Question

我在获取Chart.js（v2.6）饼图以适合引导div时遇到麻烦。 宽度是自适应的，但高度会溢出。 正如您在小提琴中看到的那样，我已将statcard-fixed-height height设置为210px 。 框保持该高度，但图表不保持该高度。

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/

更新：

更简单的提琴： https : //jsfiddle.net/m80xxxv8/1/

Answer 1

https://github.com/chartjs/Chart.js/issues/2422

包含一个holder div，并将maintainAspectRatio设置为false

<div id="canvas-holder" > <canvas id="chart-canvase" /> </div>

var options = { responsive: true, maintainAspectRatio : false };

Answer 2

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