javascript - 在不改变高度的情况下改变 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
});

在这种情况下，您的 Canvas 高度和宽度不会受到尊重。

fiddle - http://jsfiddle.net/s816dk83/