# 渲染性能优化

URL: https://caijiao.org/chartjs/09-performance/01-rendering
Source: docs/chartjs/09-performance/01-rendering.md
Description: 介绍如何优化 Chart.js 图表的渲染性能，包括减少重绘次数、合理使用动画和数据更新策略，提升图表响应速度。

在使用 [Chart.js](/chartjs/) 时，尤其是处理大量数据或频繁更新图表时，性能优化显得尤为重要。合理减少重绘次数，禁用不必要的动画，以及分批更新数据，可以显著提升图表的渲染效率。

下面示例展示如何通过关闭动画和使用 `update` 方法的参数来优化性能。

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

const perfChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: Array.from({ length: 1000 }, (_, i) => `点${i + 1}`),
    datasets: [
      {
        label: "大量数据",
        data: Array.from({ length: 1000 }, () => Math.random() * 100),
        borderColor: "rgb(75, 192, 192)",
        fill: false,
        tension: 0.1,
      },
    ],
  },
  options: {
    animation: false, // 关闭动画提升性能
    responsive: true,
    plugins: {
      legend: { display: true },
    },
  },
});

// 模拟数据更新但不重绘
setInterval(() => {
  perfChart.data.datasets[0].data = perfChart.data.datasets[0].data.map(
    () => Math.random() * 100
  );
  perfChart.update("none"); // 更新数据但不重绘动画
}, 2000);
```

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