响应式图表

当需要根据窗口大小更改图表大小时，一个主要限制是画布的渲染大小 (canvas.width 和 .height) **不能** 用相对值表示，这与显示大小 (canvas.style.width 和 .height) 相反。此外，这些尺寸相互独立，因此画布渲染尺寸不会根据显示尺寸自动调整，导致渲染不准确。

以下示例**不起作用**

• <canvas height="40vh" width="80vw">: **无效** 值，画布不会调整大小 (示例 (在新窗口中打开))
• <canvas style="height:40vh; width:80vw">: **无效** 行为，画布被调整大小，但变得模糊 (示例 (在新窗口中打开))
• <canvas style="margin: 0 auto;">: **无效** 行为，画布持续缩小。Chart.js 需要为每个画布指定一个容器，并且应在该容器上应用此样式。

Chart.js 提供了一些选项来启用响应能力并控制图表的调整大小行为，方法是检测画布显示尺寸何时更改并相应地更新渲染尺寸。

配置选项

命名空间: options

名称	类型	默认值	描述
responsive	布尔值	true	当容器调整大小 ( 重要提示... ) 时，调整图表画布大小。
maintainAspectRatio	布尔值	true	在调整大小期间保持原始画布纵横比 (width / height) 。
aspectRatio	数字	1|2	画布纵横比（即 width / height，值为 1 表示方形画布）。请注意，如果高度以属性或样式方式明确定义，则此选项将被忽略。默认值因图表类型而异；径向图 (圆环图、饼图、极坐标图、雷达图) 默认值为 1，其他图表默认值为 2。
onResize	函数	null	当发生调整大小事件时调用。传递两个参数：图表实例和新尺寸。
resizeDelay	数字	0	将调整大小更新延迟给定的毫秒数。这可以通过对元素的更新进行防抖来简化调整大小过程。

重要提示

无法直接从 canvas 元素检测画布尺寸何时更改。Chart.js 使用其父容器来更新画布渲染和显示尺寸。但是，此方法要求容器为**相对定位**并且**仅专用于图表画布**。然后可以通过为容器尺寸设置相对值来实现响应能力 (示例 (在新窗口中打开))

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>

也可以通过修改容器尺寸来以编程方式调整图表大小

chart.canvas.parentNode.style.height = '128px';
chart.canvas.parentNode.style.width = '128px';

请注意，为了使上述代码正确地调整图表高度，maintainAspectRatio 选项也必须设置为 false。

打印可调整大小的图表

CSS 媒体查询允许在打印页面时更改样式。从这些媒体查询应用的 CSS 可能会导致图表需要调整大小。但是，调整大小不会自动发生。为了支持在打印时调整图表大小，您需要连接onbeforeprint (在新窗口中打开) 事件并手动触发每个图表的调整大小操作。

function beforePrintHandler () {
    for (let id in Chart.instances) {
        Chart.instances[id].resize();
    }
}

您可能还会发现，由于浏览器在打印页面布局和触发调整大小事件时存在复杂性，Chart.js 无法正确调整打印布局的大小。为了解决这个问题，您可以将显式尺寸传递给 .resize()，然后使用onafterprint (在新窗口中打开) 事件，在完成后恢复自动尺寸。

window.addEventListener('beforeprint', () => {
  myChart.resize(600, 600);
});
window.addEventListener('afterprint', () => {
  myChart.resize();
});