不改变高度的情况下更改chart.js图表的宽度

Question

我正在使用折线图的示例。

当我在这里改变宽度到另一个值时。

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

图表的高度和宽度都在增加。我已经尝试过指定高度，但从来没有成功过。它总是使高度变得太大了。

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

- user3572565

---

请滚动到“全局图表配置” - http://www.chartjs.org/docs/ - GillesC

Answer 1

如果您想让图表填充容器（并将其用于大小调整），则需要在responsive = true的情况下使用maintainAspectRatio = false。

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

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

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

- potatopeelings