本文详细介绍了如何使用 chart.js 创建包含柱状图和折线图的复合图表，并配置多个 y 轴以正确显示不同类型数据的标签。教程重点阐述了 `scales` 配置项的关键设置，包括 `id`、`type`、`position` 和 `display` 属性，确保各数据集能映射到对应的轴并正确显示其刻度标签。
在数据可视化中，我们经常需要将多种类型的数据或具有不同量纲的数据呈现在同一图表中，以便进行对比分析。Chart.js 提供了强大的多轴功能，允许开发者在同一个画布上绘制多个数据集，并为每个数据集分配独立的 Y 轴。本教程将详细指导您如何利用 Chart.js 实现柱状图与折线图的混合显示，并正确配置其多 Y 轴的标签。
实现多轴图表的关键在于理解 Chart.js 的以下配置项：
首先，确保您的 HTML 文件中引入了 Chart.js 库。我们推荐使用 CDN 引入稳定版本，例如 Chart.js v2.9.4。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Chart.js 多轴图表示例</title>
<!-- 引入 Chart.js 库 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width:75%;">
<canvas id="myChart"></canvas>
</div>
<script>
// JavaScript 代码将在此处添加
</script>
</body>
</html>在 datasets 数组中，为每个数据系列（例如“Visitor”和“Sales”）指定一个唯一的 yAxisID。这个 ID 将在后续的 scales 配置中被引用。
// 用于生成斜线图案的辅助函数
function createDiagonalPattern(color = 'black') {
let shape = document.createElement('canvas');
shape.width = 10;
shape.height = 10;
let c = shape.getContext('2d');
c.strokeStyle = color;
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');
}
var chartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
type: 'bar', // 柱状图
label: "Visitor",
data: [200, 185, 590, 621, 250, 400, 95],
backgroundColor: createDiagonalPattern('grey'),
borderColor: 'grey',
borderWidth: 1,
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'visitor-axis' // 关联到第一个Y轴
}, {
type: 'line', // 折线图
label: "Sales",
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: 10,
pointHoverRadius: 15,
pointBorderWidth: 3,
yAxisID: 'sales-axis' // 关联到第二个Y轴
}]
};这是实现多轴显示和轴标签控制的核心步骤。在 options.scales 对象中，您需要为每个 Y 轴定义一个配置对象，并使用其 id 作为键。确保这些 id 与 datasets 中定义的 yAxisID 严格匹配。
window.onload = function() {
var ctx = document.getElementById("myChart").getContext("2d");
window.myChart = new Chart(ctx, {
type: 'bar', // 默认图表类型，但数据集中的type会覆盖
data: chartData,
options: {
responsive: true,
tooltips: {
mode: 'index', // 鼠标悬停时显示所有数据集的信息
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
elements: {
line: {
fill: false // 折线图不填充区域
}
},
scales: {
xAxes: [{ // X轴配置
display: true,
gridLines: {
display: true // 显示X轴网格线
},
ticks: {
display: true // 显示X轴刻度标签
}
}],
yAxes: [{ // 第一个Y轴配置 (Visitor)
type: "linear",
display: true, // 确保Y轴可见
position: "left", // 将此轴放置在左侧
id: "visitor-axis", // 必须与数据集中的yAxisID匹配
gridLines: {
display: false // 不显示网格线
},
ticks: {
display: true // 显示刻度标签
},
scaleLabel: { // Y轴标题
display: true,
labelString: 'Visitor Count'
}
}, { // 第二个Y轴配置 (Sales)
type: "linear",
display: true, // 确保Y轴可见
position: "right", // 将此轴放置在右侧
id: "sales-axis", // 必须与数据集中的yAxisID匹配
gridLines: {
display: false // 不显示网格线
},
ticks: {
display: true // 显示刻度标签
},
scaleLabel: { // Y轴标题
display: true,
labelString: 'Sales Value'
}
}]
}
}
});
};将上述 HTML 结构、CSS 样式（可选）和 JavaScript 代码组合，即可得到一个功能完整的 Chart.js 多轴图表示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Chart.js 多轴图表示例</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#myChart {
max-width: 800px;
margin: 20px auto;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<h1>Chart.js 混合图表与多轴配置</h1>
<div style="width:75%;">
<canvas id="myChart"></canvas>
</div>
<script>
// 用于生成斜线图案的辅助函数
function createDiagonalPattern(color = 'black') {
let shape = document.createElement('canvas');
shape.width = 10;
shape.height = 10;
let c = shape.getContext('2d');
c.strokeStyle = color;
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');
}
var chartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
type: 'bar', // 柱状图
label: "Visitor",
data: [200, 185, 590, 621, 250, 400, 95],
backgroundColor: createDiagonalPattern('grey'),
borderColor: 'grey',
borderWidth: 1,
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'visitor-axis' // 关联到第一个Y轴
}, {
type: 'line', // 折线图
label: "Sales",
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: 10,
pointHoverRadius: 15,
pointBorderWidth: 3,
yAxisID: 'sales-axis' // 关联到第二个Y轴
}]
};
window.onload = function() {
var ctx = document.getElementById("myChart").getContext("2d");
window.myChart = new Chart(ctx, {
type: 'bar', // 默认图表类型，但数据集中的type会覆盖
data: chartData,
options: {
responsive: true,
tooltips: {
mode: 'index', // 鼠标悬停时显示所有数据集的信息
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
elements: {
line: {
fill: false // 折线图不填充区域
}
},
scales: {
xAxes: [{ // X轴配置
display: true,
gridLines: {
display: true // 显示X轴网格线
},
ticks: {
display: true // 显示X轴刻度标签
}
}],
yAxes: [{ // 第一个Y轴配置 (Visitor)
type: "linear",
display: true, // 确保Y轴可见
position: "left", // 将此轴放置在左侧
id: "visitor-axis", // 必须与数据集中的yAxisID匹配
gridLines: {
display: false // 不显示网格线
},
ticks: {
display: true // 显示刻度标签
},
scaleLabel: { // Y轴标题
display: true,
labelString: 'Visitor Count'
}
}, { // 第二个Y轴配置 (Sales)
type: "linear",
display: true, // 确保Y轴可见
position: "right", // 将此轴放置在右侧
id: "sales-axis", // 必须与数据集中的yAxisID匹配
gridLines: {
display: false // 不显示网格线
},
ticks: {
display: true // 显示刻度标签
},
scaleLabel: { // Y轴标题
display: true,
labelString: 'Sales Value'
}
}]
}
}
});
};
</script>
</body>
</html>通过遵循本教程的步骤和注意事项，您可以轻松地在 Chart.js 中创建复杂的多轴混合图表，清晰地展示多维度数据，从而提升数据可视化的效果。
以上就是Chart.js 多轴图表配置：实现柱状图与折线图混合显示及轴标签控制的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
921
收藏
