如何在ChartJS中配置多个时间日期轴实现折线与散点组合图表

核心错误点 #

• 未引入Chart.js核心库，仅引入dayjs和时间适配器无法完成图表初始化
• dayjs的add方法会直接修改原实例，多次调用today.add会导致所有x值指向同一个最终日期
• 双x轴未配置隐藏规则，也未指定轴的position属性，导致渲染异常
• 散点图对应的x轴未同步主x轴的时间范围，会出现散点位置偏移

修正后完整代码 #

// 引入匹配适配器版本的Chart.js 3.x核心库
import Chart from "https://cdn.skypack.dev/chart.js@3.9.1";
import dayjs from "https://cdn.skypack.dev/dayjs@1.10.7";
// 时间适配器直接引入即可自动注册
import "https://cdn.skypack.dev/chartjs-adapter-dayjs@1.0.0";

const ctx = document.getElementById("myChart");
// 定义基准日期，所有后续日期操作基于该对象克隆后修改
const baseDate = dayjs();

const myChart = new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [
      {
        label: "月度销售中位数",
        data: [
          {x: baseDate.clone(), y: 10},
          {x: baseDate.clone().add(1, 'month'), y: 20}, 
          {x: baseDate.clone().add(2, 'month') , y: 15}
        ],
        type: "line",
        xAxisID: 'x'
      },
      {
        label: '单日销售数值',
        data: [{x: baseDate.clone().add(10, 'day'), y: 8}],
        type: 'scatter',
        xAxisID: 'xHidden'
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        position: 'bottom',
        time: {
          unit: 'month'
        }
      },
      xHidden: {
        type: 'time',
        position: 'bottom',
        display: false, // 隐藏该轴，不会在x轴展示单日刻度
        min: baseDate.clone().startOf('month').valueOf(),
        max: baseDate.clone().add(2, 'month').endOf('month').valueOf()
      },
      y: {
        beginAtZero: true
      }
    }
  }
});

调整说明 #

• 主x轴采用月度单位显示刻度，仅展示折线图对应的月度时间节点
• 散点图绑定隐藏的xHidden轴，时间范围与主x轴完全对齐，既保证散点位置和实际日期匹配，也不会在x轴额外展示单日刻度
• 所有日期操作都通过clone()复制基准日期，避免原对象被修改导致的时间异常

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