画布静态高度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

这个问题有一个公认的答案，但对我来说只是答案的一部分。文档中不清楚，至少对我而言，您必须设置画布父元素的高度，否则使用maintainAspectRatio: false 高度将为零。

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

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

然后将这些添加到选项中：

options: {
    maintainAspectRatio: false
}

默认响应设置为 true。

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