基于AmountOfPoints动态生成Chart.js Dataset数据的实现方案

问题背景 #

之前实现__processPlot1时，通过统计__Plot1中Used为true的条目数（AmountOfPoints），用Switch语句手动编写对应数量的{x,y}数据数组，数据点增多时要写大量case，扩展性极差。

优化方案 #

直接通过数组方法动态筛选并转换数据，无需依赖条目数量写分支逻辑：

原冗余写法示例

function __processPlot1() {
  const AmountOfPoints = __Plot1.filter(item => item.Used).length;
  let datasetData;
  switch(AmountOfPoints) {
    case 1:
      datasetData = [{x: __Plot1[0].X, y: __Plot1[0].Y}];
      break;
    case 2:
      datasetData = [{x: __Plot1[0].X, y: __Plot1[0].Y}, {x: __Plot1[1].X, y: __Plot1[1].Y}];
      break;
    // 几十甚至上百个case...维护成本极高
  }

  // Chart.js初始化逻辑
  const chart = new Chart(document.getElementById('plot1'), {
    data: { datasets: [{ data: datasetData }] }
  });
}

动态生成优化写法

function __processPlot1() {
  // 一步完成筛选+格式转换
  const datasetData = __Plot1
    .filter(item => item.Used === true)
    .map(item => ({ x: item.X, y: item.Y }));

  // 直接使用动态生成的数组配置图表
  const chart = new Chart(document.getElementById('plot1'), {
    type: 'scatter', // 根据需求替换图表类型
    data: {
      datasets: [{
        label: '有效数据点',
        data: datasetData,
        borderColor: '#2196F3',
        backgroundColor: 'rgba(33, 150, 243, 0.2)'
        // 其他数据集样式配置
      }]
    },
    options: {
      scales: {
        x: { type: 'linear', position: 'bottom' },
        y: { type: 'linear' }
        // 坐标轴等其他配置
      }
    }
  });
}

核心优势 #

• 零维护成本：不管__Plot1中有多少个Used为true的条目，代码无需修改
• 逻辑更清晰：直接通过数组方法表达筛选和转换逻辑，可读性远高于Switch分支
• 性能更优：一次遍历完成筛选+转换，避免多次分支判断的冗余操作

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