基于ChartJS、MongoDB及控制器的图表前后端开发 绘图错误求助

可优化点 #

• 清理冗余变量声明：删除重复声明的chartDim、无用的外层newValues变量，给循环变量增加let声明避免污染全局作用域
• 补充数据合法性校验：对AJAX返回的data、data.chartDim、data.labels字段做存在性和类型校验，对数值处理结果做合法性校验，避免无效值传入ChartJS导致渲染异常
• 校验数据长度匹配：确保每个数据集的数值数组长度和x轴labels的长度一致，长度不匹配会出现数据错位、缺失的问题
• 优化Chart更新逻辑：所有数据集组装完成后再初始化或者更新图表，不要每添加一个数据集就触发一次重绘，减少不必要的性能消耗
• 修复配色可读性问题：给每个数据集配置独立的随机背景色，避免所有系列颜色一致无法区分
• 清理调试语句：删除生产环境不需要的debugger语句
• 简化初始化逻辑：提前组装完整的datasets数组，再一次性初始化Chart实例，逻辑更简洁易维护

优化后代码 #

var ctx = document.getElementById('myChart').getContext('2d');

$.ajax({
  url: "/dashboard",
  type: "POST",
  data: {},
  error: function() {
    alert("图表数据加载失败");
  },
  success: function(data, status, xhr) {
    // 基础数据格式校验
    if (!data || !data.chartDim || !Array.isArray(data.labels)) {
      alert("返回数据格式异常");
      return;
    }
    const chartDim = data.chartDim;
    const xLabels = data.labels;
    const xAxisLength = xLabels.length;
    const datasets = [];

    // 组装图表数据集
    for (const [key, values] of Object.entries(chartDim)) {
      // 校验数值数组合法性
      if (!Array.isArray(values)) continue;
      // 处理数据，注意myFunction需要提前定义，此处补充非法值兼容逻辑
      const processedValues = values.map(item => {
        const val = myFunction(item);
        // 非法数值转为null，配合spanGaps参数跳过断层
        return isNaN(Number(val)) ? null : Number(val);
      });
      // 兼容长度不一致的情况，避免数据错位
      if (processedValues.length < xAxisLength) {
        processedValues.push(...new Array(xAxisLength - processedValues.length).fill(null));
      }
      // 生成随机配色
      const randomColor = '#'+(0x1100000+Math.random()*0xffffff).toString(16).substr(1,6);
      datasets.push({
        label: key,
        type: "bar",
        borderColor: randomColor,
        // 背景色使用同色系半透明，区分度更高
        backgroundColor: randomColor + '80',
        data: processedValues,
        spanGaps: true
      });
    }

    // 一次性初始化图表，无需多次更新
    new Chart(ctx, {
      data: {
        labels: xLabels,
        datasets: datasets
      },
      options: {
        responsive: false
      }
    });
  }
})

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