ChartJS折线图能否跳过部分分类？动态日期缺失值处理咨询

当然可以处理这种动态日期下部分数据集缺失值的场景，但直接在数组里留空的方式在分类轴（category scale）下不会自动跳过对应的日期标签——因为labels数组里的每一项都会被渲染出来，空值只会让折线在该点断开，却没法隐藏这个日期。

为什么你的初始尝试没成功？ #

你在数据集#1里写data: [12, , 19]，本质是给2018-01-09这个位置留了undefined值，但因为x轴是基于labels数组的分类轴，这个日期标签依然会显示在图表上，只是Test 1的折线在这个点没有数据，所以达不到“跳过该日期”的效果。

可行的折线图解决方案 #

1. 动态过滤标签和数据集

如果想继续使用折线图，可以先过滤掉那些所有数据集都没有有效数据的日期（或者根据你的需求，过滤掉特定数据集缺失的日期），再生成处理后的标签和数据：

// 原始数据
const originalLabels = ["2018-01-01", "2018-01-09", "2018-01-20"];
const originalDatasets = [
  { label: 'Test 1', data: [12, null, 19], borderWidth: 1 },
  { label: 'Test 2', data: [7, 11, 5], borderWidth: 1 }
];

// 过滤逻辑：保留至少一个数据集有值的日期
const validIndices = originalLabels.reduce((acc, _, idx) => {
  const hasValidData = originalDatasets.some(ds => ds.data[idx] != null);
  if (hasValidData) acc.push(idx);
  return acc;
}, []);

// 生成处理后的标签和数据集
const filteredLabels = validIndices.map(i => originalLabels[i]);
const filteredDatasets = originalDatasets.map(ds => ({
  ...ds,
  data: validIndices.map(i => ds.data[i])
}));

// 初始化图表
const options = {
  type: 'line',
  data: { labels: filteredLabels, datasets: filteredDatasets }
};
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

2. 改用时间轴（Time Scale）

如果你的x轴是日期，更推荐使用Chart.js的时间轴配置——它能自动识别日期格式，并且当数据点缺失时，折线会直接跳过该时间段，不需要固定的labels数组。注意需要引入对应的时间适配器（比如moment.js或date-fns，根据你的Chart.js版本选择）：

const options = {
  type: 'line',
  data: {
    datasets: [
      {
        label: 'Test 1',
        data: [
          { x: "2018-01-01", y: 12 },
          { x: "2018-01-20", y: 19 } // 直接跳过2018-01-09
        ],
        borderWidth: 1
      },
      {
        label: 'Test 2',
        data: [
          { x: "2018-01-01", y: 7 },
          { x: "2018-01-09", y: 11 },
          { x: "2018-01-20", y: 5 }
        ],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'YYYY-MM-DD'
          }
        }
      }
    }
  }
};

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

你找到的替代方案同样有效 #

你改用scatter图表并使用x/y坐标格式的数据，这完全是一个合理的解决思路。scatter图表默认基于数值/时间轴，不需要依赖固定的labels数组，数据点可以自由定义x坐标，缺失的日期自然不会被渲染，刚好满足你的需求。

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