使用Chart.js 2.9.4绘制折线图无法正常运行的问题求助

• 解析阶段就会触发的语法错误：
  • for循环的条件段括号不闭合，Object.keys(data[0].length 既错误把对象的length属性当成了Object.keys的入参，还缺失右括号，JS引擎直接抛出SyntaxError，后续代码完全不会执行。
  • datasets.push的对象字面量内部直接写了str = Object.entries(data[1])[i][1]的赋值语句，对象字面量内不允许直接写无键名的赋值表达式，同样会触发语法错误。
• 配置结构完全不符合Chart.js 2.9.4的规范：
  • 你提到的xLabels（分类轴标签）是Chart实例顶层data节点下的配置项，不是写在单个数据集对象里的，原代码把标签写进数据集配置，引擎完全无法识别。
  • 你把拼接好的数据集数组直接当成了单个数据集的data字段值，结构错位：正常配置中datasets本身就是数组，每一项对应一条独立折线，每一项的data字段是这条折线在所有X轴刻度上的数值集合。
• 业务逻辑完全错位：
  • 循环仅读取data数组第2个对象的字段值，没有遍历全部9个data项做序列拼接，根本凑不齐对应每个X轴刻度的数值。
  • 变量名拼写错误：配置里写的tLabels和你定义的xLabels不是同一个变量，就算前面的错误都修了，标签也读不到值。
  • 数据清洗逻辑错误：当前代码只取单个对象的单个值做格式转换，没有把同一字段在所有data项的数值收集起来，完全达不到折线图多序列渲染的要求。

修复逻辑：先提取所有需要渲染为折线的数值字段，为每个字段收集全量data项的对应值并做格式清洗，再严格按照Chart.js 2.9.4的配置结构组装参数，直接绑定已有的xLabels数组。

// 过滤掉不需要渲染为折线的非数值字段（比如示例中的Num字段）
const validFields = Object.keys(data[0]).filter(fieldName => fieldName !== 'Num')
const finalDatasets = []

validFields.forEach(fieldName => {
  // 遍历全部9个data项，收集当前字段的所有数值
  const fieldData = data.map(item => {
    const rawVal = item[fieldName]
    // 统一把逗号分隔的千分位/小数字符串转为浮点数，空值兜底为null避免折线中断报错
    return rawVal ? parseFloat(rawVal.replace(/,/g, '.')) : null
  })
  finalDatasets.push({
    label: fieldName,
    data: fieldData,
    fill: false // 2.9.4版本默认开启填充，折线图可根据需要关闭
  })
})

// 初始化图表
new Chart(ctx, {
  type: 'line',
  data: {
    // 直接绑定你已有的xLabels数组作为X轴分类标签
    labels: xLabels,
    datasets: finalDatasets
  },
  options: {
    responsive: true
  }
})

额外注意点 #

如果你的data数组中不同对象的字段名不统一（比如第1个对象存了Label1、Label2，第2个对象存了Label3、Label4），需要先做字段对齐：把所有出现过的字段名做合并，给缺失对应字段的data项补null值，否则折线序列会和X轴刻度错位。

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