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

如何在Chart.js中实现双Y轴图表？

admin
行业动态
2024-12-14
4289

在数据可视化领域，Chart.js 是一个功能强大且灵活的 JavaScript 图表库，它允许开发者创建各种类型的图表，包括折线图、柱状图、饼图等，本文将详细介绍如何在 Chart.js 中实现双 Y 轴图表，并探讨其应用场景和实现细节。

如何在Chart.js中实现双Y轴图表？第1张

引入 Chart.js

我们需要在 HTML 文件中引入 Chart.js 库，可以通过 CDN 方式引入，也可以下载后本地引用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Dual Y-Axis Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="200"></canvas>
    <script>
        // JavaScript code will go here
    </script>
</body>
</html>

准备数据

为了演示双 Y 轴图表，我们需要准备两组数据，一组数据用于左侧 Y 轴，另一组数据用于右侧 Y 轴，假设我们有温度和湿度两个数据集。

const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
        label: 'Temperature (°C)',
        data: [-10, -5, 0, 5, 15, 25, 30],
        yAxisID: 'y-axis-1',
        fill: false,
        borderColor: 'red'
    }, {
        label: 'Humidity (%)',
        data: [85, 65, 45, 75, 35, 55, 95],
        yAxisID: 'y-axis-2',
        fill: false,
        borderColor: 'blue'
    }]
};

配置图表

我们需要配置图表以支持双 Y 轴，这包括定义两个 Y 轴，并将数据集分配到相应的 Y 轴。

const config = {
    type: 'line',
    data: data,
    options: {
        scales: {
            yAxes: [{
                id: 'y-axis-1',
                type: 'linear',
                position: 'left',
                title: {
                    display: true,
                    text: 'Temperature (°C)'
                }
            }, {
                id: 'y-axis-2',
                type: 'linear',
                position: 'right',
                gridLines: {
                    drawOnChartArea: false, // Disable grid lines
                },
                title: {
                    display: true,
                    text: 'Humidity (%)'
                }
            }]
        }
    }
};

创建图表

我们使用new Chart 构造函数创建一个图表实例，并传递配置对象。

const myChart = new Chart(document.getElementById('myChart'), config);

完整示例代码

以下是完整的 HTML 和 JavaScript 代码，展示了如何在 Chart.js 中实现双 Y 轴图表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Dual Y-Axis Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="200"></canvas>
    <script>
        const data = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'Temperature (°C)',
                data: [-10, -5, 0, 5, 15, 25, 30],
                yAxisID: 'y-axis-1',
                fill: false,
                borderColor: 'red'
            }, {
                label: 'Humidity (%)',
                data: [85, 65, 45, 75, 35, 55, 95],
                yAxisID: 'y-axis-2',
                fill: false,
                borderColor: 'blue'
            }]
        };
        const config = {
            type: 'line',
            data: data,
            options: {
                scales: {
                    yAxes: [{
                        id: 'y-axis-1',
                        type: 'linear',
                        position: 'left',
                        title: {
                            display: true,
                            text: 'Temperature (°C)'
                        }
                    }, {
                        id: 'y-axis-2',
                        type: 'linear',
                        position: 'right',
                        gridLines: {
                            drawOnChartArea: false, // Disable grid lines
                        },
                        title: {
                            display: true,
                            text: 'Humidity (%)'
                        }
                    }]
                }
            }
        };
        const myChart = new Chart(document.getElementById('myChart'), config);
    </script>
</body>
</html>