Chart.js 技术问题：在不限制原始数据的前提下限制图表显示的数据点数量

我之前处理过类似的Chart.js大数据点展示问题，给你两个针对性的解决方案，既能保留全部原始数据，又能控制图表显示的点数，还不会丢失关键的高低值：

方案一：自定义区间降采样算法（适配你的日期/价格数组格式） #

这个方法完全贴合你现有的数据结构，核心思路是把1000个数据点分成若干个小区间，在每个区间内强制保留首尾点、最高点、最低点——这样既控制了总显示点数，又不会漏掉影响趋势的关键极值。

实现代码 #

// 自定义降采样函数，输入原始日期数组、价格数组，目标显示点数
function downsampleTimeSeries(labels, values, targetSampleCount) {
  const totalPoints = labels.length;
  // 计算每个采样区间的步长，稍微调整避免最后区间过小
  const step = Math.ceil(totalPoints / targetSampleCount);
  const sampledLabels = [];
  const sampledValues = [];

  for (let startIdx = 0; startIdx < totalPoints; startIdx += step) {
    const endIdx = Math.min(startIdx + step - 1, totalPoints - 1);
    // 提取当前区间的子数据
    const segmentLabels = labels.slice(startIdx, endIdx + 1);
    const segmentValues = values.slice(startIdx, endIdx + 1);

    // 找到区间内最大值、最小值的索引
    const maxVal = Math.max(...segmentValues);
    const minVal = Math.min(...segmentValues);
    const maxIdx = segmentValues.indexOf(maxVal);
    const minIdx = segmentValues.indexOf(minVal);

    // 收集需要保留的点：首、尾、最高、最低，去重后按顺序排列
    const uniqueIndices = [...new Set([0, maxIdx, minIdx, segmentValues.length - 1])].sort((a, b) => a - b);

    // 将选中的点加入结果数组
    uniqueIndices.forEach(idx => {
      sampledLabels.push(segmentLabels[idx]);
      sampledValues.push(segmentValues[idx]);
    });
  }

  // 确保最后一个原始数据点被包含（避免步长计算导致的遗漏）
  if (sampledLabels.at(-1) !== labels.at(-1)) {
    sampledLabels.push(labels.at(-1));
    sampledValues.push(values.at(-1));
  }

  return { sampledLabels, sampledValues };
}

// 使用示例
const originalDates = ["2024-01-01", "2024-01-02", /* ... 你的1000个日期 */];
const originalPrices = [123.45, 124.67, /* ... 你的1000个价格 */];

// 生成约30个关键数据点（实际会略多，因为每个区间最多4个点，可调整targetSampleCount控制）
const { sampledLabels, sampledValues } = downsampleTimeSeries(originalDates, originalPrices, 10);

// 初始化Chart.js图表
const ctx = document.getElementById('priceChart').getContext('2d');
const priceChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: sampledLabels,
    datasets: [{
      label: '价格走势',
      data: sampledValues,
      borderColor: '#2196F3',
      backgroundColor: 'rgba(33, 150, 243, 0.1)',
      tension: 0.2
    }]
  },
  options: {
    // 可选：hover时显示更详细的原始数据（如果需要）
    plugins: {
      tooltip: {
        callbacks: {
          label: (context) => {
            // 这里可以根据当前label匹配原始数据的完整信息
            const originalIdx = originalDates.indexOf(context.label);
            return `价格: ${originalPrices[originalIdx].toFixed(2)}`;
          }
        }
      }
    }
  }
});

// 始终保留原始数据，用于后续交互（比如缩放、导出）
priceChart._originalData = { dates: originalDates, prices: originalPrices };

优点 #

• 完全适配你现有的日期字符串数组+价格数组格式，无需转换数据结构；
• 手动控制保留关键极值，绝对不会丢失高低点；
• 代码轻量，无额外依赖。

方案二：利用Chart.js的Decimation插件+LTTB算法（更智能的专业方案） #

如果你能接受把数据转换成{x,y}格式，Chart.js官方的Decimation插件配合LTTB（Large Time Series Binning）算法是更好的选择——这是专门为时间序列设计的降采样算法，能在控制点数的同时，最大程度保留数据的视觉趋势和关键极值，比手动采样更智能。

实现代码 #

// 将你的日期/价格数组转换为{x,y}格式（x为Date对象，方便时间轴处理）
const originalDataPoints = originalDates.map((dateStr, idx) => ({
  x: new Date(dateStr),
  y: originalPrices[idx]
}));

// 初始化Chart.js图表，启用Decimation插件
const ctx = document.getElementById('priceChart').getContext('2d');
const priceChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: '价格走势',
      data: originalDataPoints,
      borderColor: '#2196F3',
      backgroundColor: 'rgba(33, 150, 243, 0.1)',
      tension: 0.2
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time', // 启用时间轴，自动格式化日期显示
        time: {
          unit: 'day', // 根据你的日期粒度调整（hour/week等）
          tooltipFormat: 'YYYY-MM-DD',
          displayFormats: {
            day: 'YYYY-MM-DD'
          }
        }
      }
    },
    plugins: {
      decimation: {
        enabled: true,
        algorithm: 'lttb', // 核心：使用LTTB算法保留关键视觉点
        samples: 30 // 目标显示的点数
      }
    }
  }
});

// 保留原始数据，用于后续操作
priceChart._originalData = { dates: originalDates, prices: originalPrices };

优点 #

• LTTB算法经过优化，能更精准地保留数据的趋势和极值，比手动采样效果更好；
• 插件原生支持，无需自己维护采样逻辑；
• 时间轴自动处理日期格式化，无需手动管理标签显示。

额外提示 #

不管用哪种方案，都要记得保留原始的1000个数据点（比如存在Chart实例的自定义属性里），这样后续如果需要支持图表缩放、导出完整数据等功能，可以随时调用原始数据。

内容的提问来源于stack exchange，提问作者Spyros