# 响应式图表

在根据窗口大小更改图表大小时，一个主要限制是画布渲染大小（canvas.width 和 .height）可以用相对值表示，与显示大小（canvas.style.width 和 .height）相反。此外，这些尺寸彼此独立，因此画布渲染尺寸不会根据显示尺寸自动调整，从而导致渲染不准确。

下面举例 不工作：

<canvas height="40vh" width="80vw">: invalid 值，画布不调整大小 (示例 (opens new window))
<canvas style="height:40vh; width:80vw">: invalid 行为，画布已调整大小但变得模糊 (示例 (opens new window))
<canvas style="margin: 0 auto;">: invalid 行为，画布不断缩小。 Chart.js 需要为每个画布提供一个专用容器，并且应该在其中应用此样式。

Chart.js 提供了一个几个选项来启用响应并通过检测画布显示大小何时更改并相应地更新渲染大小来控制图表的调整大小行为。

# 配置选项

命名空间： options

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

# 重要的提示

无法直接从 canvas 元素检测画布尺寸何时发生变化。 Chart.js 使用其父容器来更新画布渲染和显示大小。但是这种方法要求容器是 相对定位 和 仅专用于图表画布。然后可以通过设置容器大小 (示例 (opens new window)) 的相对值来实现响应：

<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 (opens new window) 事件并手动触发调整每个图表的大小。

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

你可能还会发现，由于浏览器布局文档以供打印以及触发调整大小事件的复杂性，Chart.js 无法针对打印布局正确调整大小。要解决此问题，你可以将显式大小传递给 .resize()，然后使用 onafterprint (opens new window) 事件在完成后恢复自动大小。

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