基于CSV筛选数据创建多系列折线图的问题及绘图异常排查

结合你的场景（长表CSV结构、多选CODE+单选MODALITY生成多系列折线），我整理了几个最可能的问题根源，以及对应的修复方案：

一、核心原因分析 #

1. 坐标轴范围未随数据更新动态计算 #

你之前解决了图表覆盖的问题（应该是切换时改为销毁旧图表或重置实例），但如果切换radio按钮（切换MODALITY）时，没有重新计算X/Y轴的最小/最大值，而是沿用了之前的轴范围，就会导致新数据的起始年份/数值超出原有坐标轴的可视范围。
比如第一次选first时，数据的YEAR范围是2010-2020，切换到second后新数据的YEAR是2008-2020，但X轴还是从2010开始，那2008-2009的点就会超出X轴左侧。

2. 数据未按年份排序 #

如果某条CODE对应的YEAR数据不是升序排列，绘图库在连接折线时可能会出现逻辑混乱——比如第一个数据点的年份比X轴最小值还小，实际是数据顺序乱了导致的视觉异常。

3. 缺失值处理引入异常数据点 #

处理缺失值时，如果填充了无效的年份（比如把缺失的VALUE补全，但年份是乱填的），或者保留了null/undefined的VALUE，会导致绘图库绘制出超出轴范围的异常点。

4. X轴类型配置错误 #

如果把YEAR当作字符串类型处理（比如直接用原始文本值），而不是数值或时间类型，绘图库的轴刻度会按字符串排序（比如"2009"会排在"2010"前面，但如果有"9"就会乱序），导致部分数据点落在坐标轴定义的范围之外。

二、针对性解决方法 #

1. 动态计算坐标轴范围（以Chart.js为例） #

每次切换单选按钮或复选框时，重新遍历当前选中的所有数据系列，计算X/Y轴的极值，再更新图表配置：

// 假设已筛选出当前选中的数据集：filteredData
function updateAxisRanges(filteredData) {
  let allYears = [];
  let allValues = [];
  
  filteredData.forEach(series => {
    series.data.forEach(point => {
      allYears.push(point.YEAR);
      if (point.VALUE !== null && !isNaN(point.VALUE)) {
        allValues.push(point.VALUE);
      }
    });
  });
  
  // 计算轴范围，Y轴留10%左右的边距避免点贴边
  const minYear = Math.min(...allYears);
  const maxYear = Math.max(...allYears);
  const minValue = Math.min(...allValues) * 0.9;
  const maxValue = Math.max(...allValues) * 1.1;
  
  // 更新图表并重新渲染
  chart.options.scales.x.min = minYear;
  chart.options.scales.x.max = maxYear;
  chart.options.scales.y.min = minValue;
  chart.options.scales.y.max = maxValue;
  chart.update();
}

2. 强制按年份排序数据 #

在处理CSV数据时，对每个CODE对应的系列数据先按YEAR升序排序，确保绘图时数据点是按时间顺序排列的：

// 将长表CSV转成多系列结构的处理函数
function processCSVData(csvData, selectedModality) {
  const seriesMap = {};
  
  csvData.forEach(row => {
    // 过滤有效数据：MODALITY匹配、YEAR和VALUE为有效数值
    if (row.MODALITY === selectedModality 
        && !isNaN(parseInt(row.YEAR)) 
        && !isNaN(parseFloat(row.VALUE)) 
        && row.VALUE !== '') {
      const code = row.CODE;
      if (!seriesMap[code]) {
        seriesMap[code] = { label: code, data: [] };
      }
      seriesMap[code].data.push({
        YEAR: parseInt(row.YEAR),
        VALUE: parseFloat(row.VALUE)
      });
    }
  });
  
  // 对每个系列的data按YEAR升序排序
  Object.values(seriesMap).forEach(series => {
    series.data.sort((a, b) => a.YEAR - b.YEAR);
  });
  
  return Object.values(seriesMap);
}

3. 正确配置X轴类型 #

如果使用Chart.js，确保X轴类型设置为'linear'（年份是数值）或'time'（如果是日期格式），避免字符串排序问题：

const chart = new Chart(ctx, {
  type: 'line',
  data: { /* 多系列数据 */ },
  options: {
    scales: {
      x: {
        type: 'linear', // 若YEAR是日期字符串则用'time'
        title: { display: true, text: 'Year' },
        beginAtZero: false // 禁止强制从0开始，适配实际年份范围
      }
    }
  }
});

三、快速排查技巧 #

• 打开浏览器控制台，打印每次切换后的filteredData，检查每个系列的YEAR范围和数据排序是否正确；
• 临时开启绘图库的坐标轴自动缩放（比如Chart.js的scales.x.autoSkip: true），看是否能自动适配数据范围；
• 如果用D3.js，检查X轴的domain计算是否正确——比如d3.scaleLinear().domain([minYear, maxYear])是否每次更新数据都重新计算。

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