更改chart.js图表​​的宽度而不更改高度

Question

我正在使用折线图的样本。

当我在这里将宽度更改为另一个值时。

    <div style="width:30%">
        <div>
            <canvas id="canvas" height="450" width="600"></canvas>
        </div>
    </div>

图表的高度和宽度都会增加。我也试过指定高度，但它永远不会起作用。它总是使高度也很大。

有人知道如何在保持高度相同的同时调整宽度吗？

Answer 1

如果您尝试使图表填充容器（并使用它来调整大小），则需要将maintainAspectRatio = false与responsive = true相结合

var ctx = document.getElementById("canvas").getContext("2d");
var myLine1 = new Chart(ctx).Line(lineChartData1, {
    maintainAspectRatio: false,
    responsive: true
});

在这种情况下，您的画布高度和宽度将不受尊重。

小提琴 - http://jsfiddle.net/s816dk83/