React-chart-js如何反转坐标轴？实现X轴从右到左显示日期

要实现折线从左到右延伸，但X轴日期（如Date.now()）从右到左显示的效果，仅设置x.reverse: true无法达成目标——因为Chart.js默认会按数据顺序绘制折线，直接反转轴会导致折线方向同步反转。需要结合数据顺序调整与轴配置配合实现：

核心实现步骤 #

• 反转X轴刻度显示：保留你原有的x.reverse: true配置，让X轴刻度从右到左排列（最新日期显示在右侧）。
• 反转数据数组顺序：将折线的X轴日期数据、Y轴数值数组同时反转，确保Chart.js按反转后的顺序绘制折线，最终呈现折线从左到右延伸、X轴刻度从右到左的效果。

具体代码示例 #

假设你原有的数据结构如下：

// 原始数据：时间从旧到新，数值对应递增
const originalTimeLabels = [
  new Date(Date.now() - 3600000), // 1小时前
  new Date(Date.now() - 1800000), // 30分钟前
  new Date(Date.now()) // 当前时间
];
const originalValueData = [15, 25, 35];

调整后的代码：

// 反转标签与数据数组
const reversedLabels = [...originalTimeLabels].reverse();
const reversedData = [...originalValueData].reverse();

// Chart.js配置
const chartOptions = {
  type: 'line',
  data: {
    labels: reversedLabels,
    datasets: [{
      label: '数据趋势',
      data: reversedData,
      borderColor: '#2196F3',
      fill: false,
      tension: 0.1
    }]
  },
  options: {
    scales: {
      x: {
        reverse: true, // 让X轴刻度从右到左展示
        time: {
          unit: 'minute', // 根据需求设置时间单位
          displayFormats: {
            minute: 'HH:mm'
          }
        }
      },
      y: {
        reverse: false
      }
    }
  }
};

原理说明 #

• x.reverse: true会反转X轴的刻度排列顺序，使最新的Date.now()时间点显示在X轴最右侧。
• 反转数据数组后，Chart.js会从左到右绘制反转后的数据集，对应到反转的X轴上，就实现了折线从左到右延伸、X轴日期从右到左排列的预期效果。

如果你的X轴是普通类别而非时间类型，该方法同样适用——只需同步反转标签与数据数组，再配合x.reverse: true即可。

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