React Chart.js：使用displayFormats后如何让x轴日期标签间距相等

你当前用的是time类型的X轴，这种轴会根据实际时间跨度分配标签间距——要是数据里的日期间隔不一致，标签自然就会忽近忽远。要实现等间距显示，得把X轴改成category类型，同时手动处理日期格式化，这样既能保留你要的MM월 dd일格式，又能让每个标签等宽排列。

修改后的完整配置代码如下：

const levelHistoryOptions = {
  responsive: true,
  maintainAspectRatio: false,
  layout: {
    padding: {
      top: 20,
      bottom: 20,
    },
  },
  plugins: {
    legend: {
      display: false,
    },
    datalabels: {
      color: theme.palette.primary.main,
      anchor: "end",
      align: "top",
      font: {
        size: 16, // 按需调整字体大小
      },
      formatter: (value, context) => {
        return context.chart.data.datasets[context.datasetIndex].data[
          context.dataIndex
        ];
      },
    },
  },
  scales: {
    x: {
      // 关键修改1：将time类型改为category，强制标签等间距
      type: "category",
      offset: true,
      ticks: {
        source: "data",
        font: {
          size: 16,
        },
        color: theme.palette.primary.main,
        // 关键修改2：手动格式化日期，替代原displayFormats的作用
        callback: function(value, index, values) {
          // 假设x轴数据是Date对象或可解析的日期字符串
          const date = new Date(this.chart.data.labels[index]);
          // 补零处理，确保格式统一为MM월 dd일
          const month = (date.getMonth() + 1).toString().padStart(2, '0');
          const day = date.getDate().toString().padStart(2, '0');
          return `${month}월 ${day}일`;
        }
      },
      grid: {
        color: theme.palette.mode === "dark" ? "#555" : "#ccc",
      },
      border: { color: theme.palette.mode === "dark" ? "#555" : "#ccc" },
    },
    y: {
      offset: true,
      display: false,
      beginAtZero: false,
    },
  },
};

注意事项 #

• 确保你的图表data.labels数组中存储了对应的日期数据（可以是Date对象或能被new Date()解析的字符串）
• 如果日期数据原本存放在dataset里，需要先把日期提取出来放到data.labels中，同时将datasets.data调整为对应的数值数据

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