画布静态高度Chartjs

Question

我正在使用chart.js 2.3.0 来绘制图表。我想将图表的高度设置为静态（固定，例如200px），但也希望将宽度设置为 100％。我见过的一个解决方案是：

responsive: false

在图表选项中。 但在这样做之后，宽度也会降低。 有没有最好的办法呢？

  

静态高度和100％宽度。

Answer 1

options: {
responsive: true, 
maintainAspectRatio: false
}

它与这些选项完美配合。

Answer 2

为了使其有效，除了使用这些选项之外，还需要将图表包装在专用元素中：

options: {
    responsive: true, 
    maintainAspectRatio: false
}

示例：

<div>
    <canvas id="xxx"></canvas>
</div>

参见官方文件：

  

无法直接从CANVAS元素检测画布大小更改的时间。 Chart.js使用其父容器更新画布渲染和显示大小。但是，此方法要求容器相对定位并仅专用于图表画布。

Answer 3

如果要打破宽高比，可以使用docs中的maintainAspectRatio选项。您的高度和宽度应取自画布设置值，或使用css设置canvas元素的样式。

options: {
    responsive: false, 
    maintainAspectRatio: false
}

Answer 4

该问题的答案已被接受，但对我而言只是一部分。至少对于我来说，从文档中不清楚的是，您必须设置画布的父元素的高度，否则使用maintainAspectRatio：false时，该高度将为零。

这是使用Bootstrap 4卡（用于说明的内联样式）对我有用的方法：

<div class="card">
    <div class="card-body" style="height: 400px;">
        <canvas id="myChart"></canvas>
    </div>
</div>

然后将其添加到选项中：

options: {
    maintainAspectRatio: false
}

默认情况下，“响应”设置为true。

这还允许轻松使用响应断点和媒体查询来调整图表大小。