在 CanvasJS 中绘制多个时间序列时，若仅用字符串 label 定义日期，会导致不同数据系列无法在 X 轴上精确对齐；必须统一使用 x 属性（Date 对象）并配置 axisX.valueFormatString，才能确保所有系列按真实时间坐标渲染。

在 canvasjs 中绘制多个时间序列时，若仅用字符串 `label` 定义日期，会导致不同数据系列无法在 x 轴上精确对齐；必须统一使用 `x` 属性（`date` 对象）并配置 `axisx.valueformatstring`，才能确保所有系列按真实时间坐标渲染。

当在 CanvasJS 中叠加多个时间序列（例如产量曲线与事件标记），开发者常误用 label: "YYYY/MM/DD" 字符串作为横坐标标识。这种写法虽能显示标签，但 CanvasJS 不会将其解析为时间值——而是当作无序分类标签（category axis）处理，导致各数据系列独立计算坐标位置，出现“红色曲线左偏”“日期看似相同却错位”的典型问题。

✅ 正确做法是：全部改用 x 属性传入 Date 对象，并显式声明 axisX 的格式化规则：

axisX: {
  labelFontSize: 10,
  valueFormatString: "YYYY/MM/DD" // 控制 X 轴标签显示格式
}

同时，dataPoints 中每个点需使用标准 JavaScript Date 构造（注意：月份从 0 开始，new Date(2019, 6, 5) 表示 2019 年 7 月 5 日，而非 7）：

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

dataPoints: [
  { x: new Date(2019, 6, 1),  y: 10 },  // 2019/07/01
  { x: new Date(2019, 6, 5),  y: 29 },  // 2019/07/05 ← 与第一条系列完全对齐
  { x: new Date(2019, 6, 10), y: 29 }   // 2019/07/10
]

⚠️ 关键注意事项：

• 不要混用 label 和 x：一旦启用 x 坐标，label 将被忽略（除非额外设置 label 用于 tooltip 或自定义显示）；
• 所有数据系列必须使用相同时间基准（同为 Date 对象），CanvasJS 才能自动对齐、缩放、插值；
• 若需动态生成日期，推荐使用 new Date(year, monthIndex, day) 或 Date.parse("2019-07-05")（注意 ISO 格式兼容性）；
• valueFormatString 仅控制显示，不影响坐标计算——真实位置由 x 的毫秒时间戳决定。

最终效果：两条 spline 曲线（蓝色产量、红色事件）严格共享同一时间轴，支持同步缩放、拖拽、tooltip 共享（toolTip: { shared: true }），且响应式布局下保持像素级对齐。这是构建专业时序看板（如生产监控、IoT 数据比对）的必备实践。