Chart.js如何正确配置parsing解析自定义x轴字段date_time？

你的代码存在三个关键问题导致图表空白，修正后即可正常显示：

1. 移除冲突的Chart.js版本引用 #

你同时引入了Chart.js 3.x和2.9.4版本，版本冲突会导致API解析异常，保留最新版本即可。

2. 修正parsing配置的y轴参数 #

parsing选项中指定y轴键的参数是yAxisKey，不是yAxis，参数名错误会导致无法读取数值。

3. 适配Chart.js 3.x的scales配置结构 #

Chart.js 3.x及以上版本中，x轴的配置不再是xAxes数组，而是直接使用scales.x对象。

修正后的完整代码 #

var xyValues = [{
    date_time: '2022-11-13 23:00:00',
    value: 2.3
  },
  {
    date_time: '2022-11-14 00:00:00',
    value: 3.1
  },
  {
    date_time: '2022-11-14 01:00:00',
    value: 4.5
  },
  {
    date_time: '2022-11-14 02:00:00',
    value: 5.1
  },
  {
    date_time: '2022-11-14 09:00:00',
    value: 5.5
  }
]

new Chart('myChart', {
  type: 'line',
  data: {
    datasets: [{
      data: xyValues,
      borderColor: '#2196F3',
      fill: false
    }]
  },
  options: {
    parsing: {
      xAxisKey: 'date_time',
      yAxisKey: 'value' // 修正参数名
    },
    scales: {
      x: { // 修正x轴配置结构
        type: 'time',
        time: {
          unit: 'hour', // 可选：指定时间显示单位
          tooltipFormat: 'yyyy-MM-dd HH:mm'
        }
      },
      y: {
        title: {
          display: true,
          text: '数值'
        }
      }
    }
  }
});

<!-- 仅保留必要的脚本引用，顺序要正确：先Chart.js，再日期适配器 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<canvas id="myChart"></canvas>

说明：

• 脚本引入顺序必须是先加载Chart.js核心库，再加载日期适配器，否则时间轴无法正常解析。
• 可以根据需求添加borderColor、fill等样式配置，让图表显示更清晰。

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