Chart.js 双 Y 轴（左右双刻度）配置完全指南-js教程-PHP中文网

Chart.js 双 Y 轴（左右双刻度）配置完全指南

本文详解 Chart.js 中正确配置双 Y 轴（主轴左、次轴右）的关键要点，指出常见错误（如将 scales.y 写为数组）、提供可运行的结构化配置示例，并强调 v3+ 版本中轴 ID 命名与引用的一致性。

本文详解 chart.js 中正确配置双 y 轴（主轴左、次轴右）的关键要点，指出常见错误（如将 `scales.y` 写为数组）、提供可运行的结构化配置示例，并强调 v3+ 版本中轴 id 命名与引用的一致性。

在 Chart.js（v3.x 及以上版本）中，实现左右双 Y 轴的核心在于：options.scales 必须是一个对象，而非数组；每个坐标轴需以唯一字符串 ID 作为键独立定义，且数据集通过 yAxisID 精确绑定到对应轴。你原始代码中将 scales.y 设为数组（y: [{...}, {...}]），这是 Chart.js v2 的写法，在 v3+ 中已被废弃，会导致次轴（如 minutes-axis）完全不渲染。

✅ 正确配置结构如下（适配你的业务场景）：

php版微信js-sdk支付接口类

下载

new Chart(ctx, {
  type: 'line',
  data: {
    labels: dates,
    datasets: [
      {
        label: 'Minutes Usage',
        data: minutesUsage,
        borderColor: 'green',
        borderWidth: 2,
        fill: false,
        yAxisID: 'minutes-axis' // ✅ 绑定到自定义轴 ID
      },
      {
        label: 'Total Revenue',
        data: revenues,
        borderColor: 'blue',
        borderWidth: 2,
        fill: false,
        yAxisID: 'revenue-axis' // ✅ 绑定到另一自定义轴 ID
      }
    ]
  },
  options: {
    responsive: true,
    scales: {
      // ✅ X 轴：单个对象（非数组）
      x: {
        type: 'time',
        time: { unit: 'day' },
        title: { display: true, text: 'Date' }
      },
      // ✅ 主 Y 轴（左）：使用 ID 'revenue-axis'
      'revenue-axis': {
        type: 'linear',
        position: 'left',
        title: { display: true, text: 'Total Revenue', color: 'blue' },
        ticks: { color: 'blue' }
      },
      // ✅ 次 Y 轴（右）：使用 ID 'minutes-axis'
      'minutes-axis': {
        type: 'linear',
        position: 'right',
        title: { display: true, text: 'Minutes Usage', color: 'green' },
        ticks: { color: 'green' },
        // ⚠️ 关键：避免与左侧轴刻度重叠（可选）
        grid: { drawOnChartArea: false } 
      }
    },
    plugins: {
      legend: { display: true },
      tooltip: { mode: 'index', intersect: false }
    }
  }
});

? 关键注意事项：

ID 严格一致：数据集中的 yAxisID 字符串（如 'minutes-axis'）必须与 scales 下定义的键名完全匹配（包括大小写与连字符）；
禁止数组语法：scales.x 和 scales.y 在 v3+ 中不能是数组，否则整个 scales 配置将被忽略；
时间轴兼容性：若 x 轴使用 type: 'time'，请确保 dates 是合法的 JavaScript Date 对象或 ISO 字符串（如 '2024-01-01'），并引入 moment.js 或 date-fns（Chart.js v3.9+ 内置日期适配器，通常无需额外引入）；
样式隔离：通过 ticks.color 和 title.color 分别控制刻度/标题颜色，提升双轴可读性；
响应式调试：若仍不显示，请检查浏览器控制台是否有 Scale with id 'xxx' not found 报错——这直接表明 yAxisID 与 scales 键名不匹配。