# 响应式优化建议

URL: https://caijiao.org/chartjs/09-performance/03-responsive
Source: docs/chartjs/09-performance/03-responsive.md
Description: 介绍在使用 Chart.js 构建响应式图表时的优化建议，包括画布尺寸控制、响应式选项设置及高DPI屏幕支持。

使用 [Chart.js](/chartjs/) 创建响应式图表时，合理设置画布大小和响应式参数至关重要。建议固定父容器尺寸，启用响应式选项，并针对高分辨率屏幕进行缩放处理，以确保图表清晰且布局稳定。

下面示例展示如何配置响应式画布和自适应尺寸。

```js
const ctx = document.getElementById("responsiveChart").getContext("2d");

const responsiveChart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["一月", "二月", "三月", "四月", "五月"],
    datasets: [
      {
        label: "销售额",
        data: [50, 60, 70, 80, 90],
        backgroundColor: "rgba(54, 162, 235, 0.7)",
      },
    ],
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    devicePixelRatio: window.devicePixelRatio || 1,
    plugins: {
      legend: { display: true },
    },
  },
});
```

[在线代码演示](/chartjs/demos/32.html)