# 数据量大时的处理

URL: https://caijiao.org/chartjs/09-performance/02-large-data
Source: docs/chartjs/09-performance/02-large-data.md
Description: 介绍在 Chart.js 中处理大数据量时的策略，包括数据简化、采样和虚拟滚动等方法，以确保图表性能和交互流畅。

当使用 [Chart.js](/chartjs/) 展示大量数据时，性能和响应速度可能会下降。为了保证流畅的用户体验，可以采用数据简化、采样、分页加载或虚拟滚动等策略，减少图表一次性渲染的数据量。

以下示例演示如何通过采样减少数据点数，优化大数据量图表的显示效果。

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

// 模拟原始数据，10000个点
const rawData = Array.from({ length: 10000 }, () => Math.random() * 100);

// 简单采样：每隔10个点取一个
const sampledData = rawData.filter((_, i) => i % 10 === 0);

const bigDataChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: sampledData.map((_, i) => `点${i + 1}`),
    datasets: [
      {
        label: "采样数据",
        data: sampledData,
        borderColor: "rgb(255, 99, 132)",
        fill: false,
        tension: 0.1,
      },
    ],
  },
  options: {
    responsive: true,
    animation: false,
    plugins: {
      legend: { display: true },
    },
  },
});
```

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