在数据可视化中，双坐标图（也称为双轴图或组合图表）是一种常用的方法，它允许在一个图表中展示两个不同量纲的数据，Chart.js 是一个流行的 JavaScript 库，用于创建各种类型的图表，包括双坐标图，本文将详细介绍如何使用 Chart.js 创建双坐标图，并提供一些常见问题的解答。
什么是双坐标图？
双坐标图是一种图表类型，它使用两个不同的 y 轴来显示两组数据，这种图表特别适合于比较不同量纲的数据，例如温度和降雨量，或者销售额和利润率，通过使用两个 y 轴，可以避免因为数据范围差异而导致的视觉误导。
为什么使用双坐标图？
比较不同量纲的数据：当需要在同一图表中比较两个不同量纲的数据时，双坐标图非常有用。
提高可读性：通过使用两个 y 轴，可以更清晰地展示每组数据的变化趋势。
节省空间：相比于创建两个单独的图表，双坐标图可以在一个图表中展示更多的信息。
Chart.js 简介
Chart.js 是一个简单、灵活的 JavaScript 图表库，用于创建响应式图表，它支持多种图表类型，包括折线图、柱状图、饼图等，Chart.js 的 API 设计简洁，易于使用，并且可以通过插件扩展功能。
创建双坐标图的基本步骤
4.1 引入 Chart.js
需要在 HTML 文件中引入 Chart.js 库，可以通过 CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
4.2 准备数据
准备两组数据，每组数据对应一个 y 轴。
var data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Temperature (°C)',
data: [5, 7, 9, 12, 15, 20, 25],
yAxisID: 'y-axis-1'
}, {
label: 'Rainfall (mm)',
data: [30, 45, 60, 75, 90, 105, 120],
yAxisID: 'y-axis-2'
}]
};4.3 配置图表选项
配置图表的选项，包括 y 轴的位置和其他设置：
var options = {
scales: {
yAxes: [{
id: 'y-axis-1',
type: 'linear',
position: 'left',
ticks: {
beginAtZero: true
}
}, {
id: 'y-axis-2',
type: 'linear',
position: 'right',
gridLines: {
display: false
},
ticks: {
beginAtZero: true
}
}]
}
};4.4 创建图表
使用Chart 构造函数创建图表：
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});4.5 HTML 结构
确保有一个<canvas> 元素用于渲染图表：
<canvas id="myChart" width="400" height="200"></canvas>
示例代码
以下是一个完整的示例代码，展示了如何使用 Chart.js 创建一个双坐标图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双坐标图示例</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
<script>
var data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Temperature (°C)',
data: [5, 7, 9, 12, 15, 20, 25],
yAxisID: 'y-axis-1'
}, {
label: 'Rainfall (mm)',
data: [30, 45, 60, 75, 90, 105, 120],
yAxisID: 'y-axis-2'
}]
};
var options = {
scales: {
yAxes: [{
id: 'y-axis-1',
type: 'linear',
position: 'left',
ticks: {
beginAtZero: true
}
}, {
id: 'y-axis-2',
type: 'linear',
position: 'right',
gridLines: {
display: false
},
ticks: {
beginAtZero: true
}
}]
}
};
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
</script>
</body>
</html>常见问题解答（FAQs）
Q1: 如何在双坐标图中添加网格线？
A1: 要在双坐标图中添加网格线，可以在options 对象中的scales 部分进行配置，要为右侧 y 轴添加网格线，可以这样设置：
options = {
scales: {
yAxes: [{
id: 'y-axis-1',
type: 'linear',
position: 'left',
ticks: {
beginAtZero: true
}
}, {
id: 'y-axis-2',
type: 'linear',
position: 'right',
gridLines: {
display: true // 启用网格线
},
ticks: {
beginAtZero: true
}
}]
}
};Q2: 如何更改双坐标图中 y 轴的颜色？
A2: 要更改 y 轴的颜色，可以在options 对象中的scales 部分进行配置，要更改左侧 y 轴的颜色，可以这样设置：
options = {
scales: {
yAxes: [{
id: 'y-axis-1',
type: 'linear',
position: 'left',
ticks: {
beginAtZero: true
},
gridLines: {
color: 'rgba(75, 192, 192, 0.4)' // 设置网格线颜色
}
}, {
id: 'y-axis-2',
type: 'linear',
position: 'right',
gridLines: {
display: false
},
ticks: {
beginAtZero: true
}
}]
}
};小伙伴们，上文介绍了“chart.js 双坐标图”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
