在使用Chart.js绘制多线图时，如果两组数据量级差异较大，比如一组是用户访问量数值在万级，另一组是转化率数值在百分比级，直接共用单Y轴会导致量级小的数据趋势几乎无法被观察，出现趋势失真的问题。双Y轴配置可以让不同量级的数据分别匹配对应的坐标轴，清晰展示各自的波动趋势。
双Y轴配置的核心思路
Chart.js的双Y轴配置本质是为不同的数据系列指定对应的Y轴刻度，核心需要完成两个步骤：首先在options.scales中定义多个Y轴实例，然后为对应的数据集指定绑定的Y轴ID。
基础配置结构说明
双Y轴的核心配置集中在options对象中，主要包含以下部分：
- scales.yAxes：定义所有Y轴，每个Y轴需要有唯一的
id标识 - datasets.yAxisID：为数据集指定绑定的Y轴ID，和
scales.yAxes中的id对应 - position：设置Y轴的位置，可选
left或right，避免两个轴重叠
完整实现代码示例
以下是一个可直接运行的双Y轴多线图示例，包含两组量级差异明显的数据：用户访问量（万级）和页面转化率（百分比级）。
// 准备画布容器，HTML中需要有一个id为multiLineChart的canvas元素
// <canvas id="multiLineChart" width="800" height="400"></canvas>
// 定义两组数据，量级差异明显
const visitData = [12, 15, 18, 14, 20, 22, 19]; // 万级访问量
const conversionData = [3.2, 3.5, 3.1, 3.8, 3.3, 3.6, 3.4]; // 百分比转化率
// 初始化Chart实例
const ctx = document.getElementById('multiLineChart').getContext('2d');
const multiLineChart = new Chart(ctx, {
type: 'line', // 图表类型为线图
data: {
labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], // X轴标签
datasets: [
{
label: '用户访问量（万）',
data: visitData,
borderColor: '#409eff', // 线条颜色
backgroundColor: 'rgba(64, 158, 255, 0.1)', // 填充颜色
yAxisID: 'yAxisVisit', // 绑定左侧访问量Y轴
tension: 0.3 // 线条平滑度
},
{
label: '页面转化率（%）',
data: conversionData,
borderColor: '#f56c6c',
backgroundColor: 'rgba(245, 108, 108, 0.1)',
yAxisID: 'yAxisConversion', // 绑定右侧转化率Y轴
tension: 0.3
}
]
},
options: {
responsive: true, // 响应式适配
interaction: {
mode: 'index',
intersect: false
},
scales: {
// 定义左侧Y轴：用户访问量
yAxisVisit: {
type: 'linear',
position: 'left', // 左侧显示
title: {
display: true,
text: '访问量（万）'
},
ticks: {
beginAtZero: true // 从0开始刻度
}
},
// 定义右侧Y轴：页面转化率
yAxisConversion: {
type: 'linear',
position: 'right', // 右侧显示
title: {
display: true,
text: '转化率（%）'
},
ticks: {
beginAtZero: false,
min: 2, // 最小刻度2%
max: 5 // 最大刻度5%
},
grid: {
drawOnChartArea: false // 不绘制该轴的网格线，避免和左侧轴网格重叠
}
},
x: {
title: {
display: true,
text: '日期'
}
}
},
plugins: {
legend: {
position: 'top' // 图例放在顶部
},
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
// 根据数据集添加对应单位
if (context.dataset.yAxisID === 'yAxisVisit') {
label += context.parsed.y + '万';
} else {
label += context.parsed.y + '%';
}
return label;
}
}
}
}
}
});
常见问题与注意事项
1. 两个Y轴刻度重叠怎么办
可以通过设置grid.drawOnChartArea为false，让其中一个Y轴的网格线不绘制在图表区域，避免视觉混乱。也可以调整两个轴的min和max参数，让刻度范围更合理。
2. 数据集如何正确绑定Y轴
必须保证datasets中的yAxisID和scales中定义的Y轴id完全一致，否则数据集会默认使用第一个Y轴，无法达到双轴效果。
3. 兼容不同Chart.js版本
以上示例基于Chart.js 3.x版本，如果是2.x版本，Y轴配置需要放在scales.yAxes数组中，语法略有差异，需要注意版本对应的API文档。
配置效果验证
运行上述代码后，左侧Y轴会显示0到25的访问量刻度，右侧Y轴显示2%到5%的转化率刻度，两组数据的趋势都能清晰展示，不会出现量级小的转化率数据被压缩成近似直线的问题，有效解决了趋势失真的情况。