本教程详细介绍了如何使用 chart.js 创建包含柱状图和折线图的多轴复合图表。文章将指导读者正确配置多个 y 轴，包括设置轴的 id、位置、显示状态以及标签，以确保数据系列能够清晰地在各自的轴上呈现，并解决常见的轴标签显示问题，从而实现专业且易读的数据可视化效果。
在数据可视化领域，经常需要将不同类型的数据（例如，数量和比率）在同一图表上进行展示，并使用独立的 Y 轴来避免数据量级差异导致的显示问题。Chart.js 是一个功能强大的 JavaScript 图表库，它提供了灵活的配置选项来实现这种多轴复合图表。本文将以柱状图和折线图的组合为例，详细讲解如何正确配置 Chart.js 中的多轴图表，并管理轴标签的显示。
1. 准备 HTML 结构
首先，我们需要一个 HTML
Chart.js 多轴复合图表示例
2. 定义图表数据和配置
接下来，我们将编写 JavaScript 代码来定义图表的数据集和配置选项。关键在于为每个数据集指定 yAxisID，并为每个 Y 轴在 options.scales 中进行详细配置。
2.1 创建自定义背景图案（可选）
为了使图表更具视觉吸引力，我们可以创建一个自定义的对角线图案作为柱状图的背景。
function createDiagonalPattern(color = 'black') {
let shape = document.createElement('canvas');
shape.width = 10;
shape.height = 10;
let c = shape.getContext('2d');
c.strokeStyle = color;
c.lineWidth = 1; // 设置线条宽度
c.beginPath();
c.moveTo(2, 0);
c.lineTo(10, 8);
c.stroke();
c.beginPath();
c.moveTo(0, 8);
c.lineTo(2, 10);
c.stroke();
return c.createPattern(shape, 'repeat');
}2.2 配置数据集
我们有两个数据集：“访客数量”（柱状图）和“销售额”（折线图）。每个数据集都需要指定其类型 (type) 和关联的 Y 轴 ID (yAxisID)。
- 访客数量 (Visitor): 使用柱状图，关联到 y-axis-1 (右侧 Y 轴)。
- 销售额 (Sales): 使用折线图，关联到 y-axis-2 (左侧 Y 轴)。
var multiAxisChartData = {
labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
datasets: [{
type: 'bar', // 柱状图类型
label: "访客数量",
data: [200, 185, 590, 621, 250, 400, 95],
backgroundColor: createDiagonalPattern('rgba(128, 128, 128, 0.7)'), // 使用自定义图案
borderColor: 'grey',
borderWidth: 1,
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'y-axis-1' // 关联到右侧Y轴
}, {
type: 'line', // 折线图类型
label: "销售额",
data: [51, 65, 40, 49, 60, 37, 40],
fill: false, // 折线图不填充
borderColor: '#2E41CF',
backgroundColor: '#2E41CF',
pointBorderColor: '#2E41CF',
pointBackgroundColor: 'white',
pointHoverBackgroundColor: '#2E41CF',
pointHoverBorderColor: '#2E41CF',
pointStyle: 'circle',
pointRadius: 5, // 适当调整点的大小
pointHoverRadius: 8,
pointBorderWidth: 2,
yAxisID: 'y-axis-2' // 关联到左侧Y轴
}]
};2.3 配置图表选项（scales 是核心）
options 对象中的 scales 配置是实现多轴图表的关键。在这里，我们将定义 X 轴和两个独立的 Y 轴。
- X 轴: 通常用于时间或类别标签。
- y-axis-1: 用于“访客数量”的 Y 轴，放置在图表右侧。
- y-axis-2: 用于“销售额”的 Y 轴，放置在图表左侧。
请注意，Chart.js v3+ 的 scales 配置语法与 v2 有所不同。本教程采用 v3+ 的语法，即 scales 是一个对象，其键是轴的 ID。
window.onload = function() {
var ctx = document.getElementById("myMultiAxisChart").getContext("2d");
window.myMultiAxisChart = new Chart(ctx, {
type: 'bar', // 默认图表类型，但数据集会覆盖
data: multiAxisChartData,
options: {
responsive: true, // 启用响应式布局
maintainAspectRatio: false, // 允许canvas尺寸自由调整
interaction: { // 交互模式，推荐使用 index
mode: 'index',
intersect: false,
},
plugins: {
tooltip: {
mode: 'index',
intersect: false
},
title: {
display: true,
text: '月度访客与销售额趋势'
}
},
elements: {
line: {
fill: false // 确保折线图不填充区域
}
},
scales: {
// X轴配置
x: {
display: true, // 显示X轴
grid: { // Chart.js v3 语法
display: true // 显示X轴网格线
},
title: {
display: true,
text: '月份'
}
},
// Y轴2：销售额轴 (左侧)
'y-axis-2': {
type: 'linear',
position: 'left', // 放置在左侧
display: true, // 确保显示轴及标签
grid: { // Chart.js v3 语法
display: false // 不显示网格线
},
title: { // Chart.js v3 语法，用于显示轴标题
display: true,
text: '销售额'
},
ticks: {
callback: function(value) {
return value + ' 元'; // 格式化标签
}
}
},
// Y轴1：访客数量轴 (右侧)
'y-axis-1': {
type: 'linear',
position: 'right', // 放置在右侧
display: true, // 确保显示轴及标签
grid: { // Chart.js v3 语法
display: false // 不显示网格线
},
title: { // Chart.js v3 语法，用于显示轴标题
display: true,
text: '访客数量'
},
ticks: {
callback: function(value) {
return value + ' 人'; // 格式化标签
}
}
}
}
}
});
};3. 完整代码示例
将上述 HTML 结构和 JavaScript 代码整合到一个文件中，即可运行此多轴复合图表示例。
Chart.js 多轴复合图表示例
