Chart.js使用for()循环格式化数据填入datasets及标记不显示问题咨询

问题原因 #

• 循环生成的date、marks数组未被实际填入datasets.data配置，当前代码里的data还是写死的静态值
• 解析配置不匹配：options.parsing.yAxisKey设置为marks，但你写死的静态数据里对应的字段是votes，字段名对不上导致Y轴取值失败
• 配置语法混用：你同时写了Chart.js V3版本的scales.x配置和V2版本的scales.xAxes配置，不同版本的配置冲突会导致坐标轴解析异常
• 循环生成的是两个独立一维数组，不符合你配置的对象数组数据格式要求

解决步骤 #

1. 调整数据处理逻辑，直接生成符合格式的对象数组，不要拆分两个独立数组
2. 把处理后的数组填入datasets.data，替换写死的静态数据
3. 统一parsing的字段配置和数据字段名，保持一致
4. 删除V2版本废弃的xAxes配置，避免语法冲突

修改后可运行代码 #

var datasetsData = [];
for (var i in data) {
  // 注意timestamp的格式要匹配你设置的time.parser格式DD/MM/YY
  datasetsData.push({
    'date': data[i].timestamp,
    'votes': data[i].count
  })
}
new Chart('myChart', {
  type: 'line',
  data: {
    datasets: [{
      label: 'votes',
      data: datasetsData, // 填入循环处理后的数组
      borderColor: 'grey',
      backgroundColor: 'rgba(0, 0, 255, 0.5)'
    }]
  },
  options: {
    parsing: {
      xAxisKey: 'date',
      yAxisKey: 'votes' // 和数据字段名保持一致
    },
    scales: {
      y: {
        ticks: {
          stepSize: 1
        }
      },
      x: {
        type: 'time',
        time: {
          parser: 'DD/MM/YY',
          unit: 'day',
          tooltipFormat: 'MMM DD'
        }
      }
      // 删除废弃的xAxes配置
    }
  }
})

额外注意 #

如果你的timestamp字段本身是时间戳数字，不是DD/MM/YY格式的字符串，需要删掉time.parser配置，Chart.js会自动识别数字时间戳。

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