数据量大时的处理

当使用 Chart.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 },
    },
  },
});

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。