Chart.js 多轴复合图表：实现柱状图与折线图的精确配置与轴标签管理-js教程-PHP中文网

Chart.js 多轴复合图表：实现柱状图与折线图的精确配置与轴标签管理

霞舞

发布： 2025-11-10 19:44:01

原创

212人浏览过

Chart.js 多轴复合图表：实现柱状图与折线图的精确配置与轴标签管理

本教程详细介绍了如何使用 chart.js 创建包含柱状图和折线图的多轴复合图表。文章将指导读者正确配置多个 y 轴，包括设置轴的 id、位置、显示状态以及标签，以确保数据系列能够清晰地在各自的轴上呈现，并解决常见的轴标签显示问题，从而实现专业且易读的数据可视化效果。

在数据可视化领域，经常需要将不同类型的数据（例如，数量和比率）在同一图表上进行展示，并使用独立的 Y 轴来避免数据量级差异导致的显示问题。Chart.js 是一个功能强大的 JavaScript 图表库，它提供了灵活的配置选项来实现这种多轴复合图表。本文将以柱状图和折线图的组合为例，详细讲解如何正确配置 Chart.js 中的多轴图表，并管理轴标签的显示。

1. 准备 HTML 结构

首先，我们需要一个 HTML <canvas> 元素作为 Chart.js 图表的容器，并引入 Chart.js 库。为了演示方便，我们将使用最新版本的 Chart.js。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Chart.js 多轴复合图表示例</title>
    <!-- 引入 Chart.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f4f4f4; }
        #myMultiAxisChart { max-width: 800px; max-height: 500px; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
    </style>
</head>
<body>
    <canvas id="myMultiAxisChart"></canvas>
</body>
</html>

登录后复制

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)。

爱图表

AI驱动的智能化图表创作平台

查看详情

访客数量 (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 代码整合到一个文件中，即可运行此多轴复合图表示例。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Chart.js 多轴复合图表示例</title>
    <!-- 引入 Chart.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f4f4f4; }
        #myMultiAxisChart { max-width: 800px; max-height: 500px; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
    </style>
</head>
<body>
    <canvas id="myMultiAxisChart"></canvas>

    <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.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');
        }

        // 图表数据
        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轴
            }]
        };

登录后复制

以上就是Chart.js 多轴复合图表：实现柱状图与折线图的精确配置与轴标签管理的详细内容，更多请关注php中文网其它相关文章！