当前位置：首页 > 行业动态 > 正文

如何使用 Chart.js 创建双坐标图？

admin
行业动态
2024-12-17
2

在数据可视化中，双坐标图（也称为双轴图或组合图表）是一种常用的方法，它允许在一个图表中展示两个不同量纲的数据，Chart.js 是一个流行的 JavaScript 库，用于创建各种类型的图表，包括双坐标图，本文将详细介绍如何使用 Chart.js 创建双坐标图，并提供一些常见问题的解答。

如何使用 Chart.js 创建双坐标图？第1张

什么是双坐标图？

双坐标图是一种图表类型，它使用两个不同的 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 双坐标图”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。