Chart.js时间刻度轴显示大数字而非日期问题求助

你的问题出在未正确配置时间轴的显示规则，虽然加载了luxon适配器，但没有在Chart配置里明确指定日期的显示格式。以下是修正后的完整实现：

修改后的JavaScript代码 #

function getEventEntries() {
  function createChart(args) {
    const ctx = document.getElementById("myChart").getContext("2d");
    const cfg = {
      type: 'scatter',
      data: {
        datasets: [{
          label: 'Events',
          data: args
        }]
      },
      options: {
        scales: {
          x: {
            type: 'time',
            time: {
              unit: 'month', // 按月份维度生成刻度
              displayFormats: {
                month: 'MMM YYYY' // 指定显示格式为「月缩写 年」，如Nov 2021
              }
            },
            ticks: {
              source: 'auto' // 让Chart自动计算合适的刻度位置
            }
          },
          y: { type: 'linear' }
        }
      }
    };
    
    const myChart = new Chart(ctx, cfg);
  }
  
  // 测试用日期数据（确保为Date对象类型）
  var events1 = [{x: new Date('2021-11-06'), y: -3}, {x: new Date('2008-04-12'), y: 10}];
  
  createChart(events1);
}

function onLoad() {
  getEventEntries();
}

$(document).ready(onLoad);

对应的HTML代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@3.3.0/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.3.1"></script>

<canvas id="myChart"></canvas>

关键修正说明 #

• 时间轴配置：在scales.x.time中明确指定刻度单位为month，并通过displayFormats定义日期显示格式
• 脚本加载顺序：必须保证Chart.js先加载，随后是luxon库，最后是luxon适配器，顺序错误会导致适配器失效
• 数据格式：确保X轴数据为Date对象类型（你已在测试数据中实现这一点，这是正确的前提）

修改后，X轴将以Nov 2021、Apr 2008这类可读格式显示日期，而非原始时间戳数字。

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