Chart.js 多轴图表配置：实现柱状图与折线图混合显示及轴标签控制-js教程-PHP中文网

Chart.js 多轴图表配置：实现柱状图与折线图混合显示及轴标签控制

DDD

发布： 2025-11-10 16:48:23

原创

354人浏览过

Chart.js 多轴图表配置：实现柱状图与折线图混合显示及轴标签控制

本文详细介绍了如何使用 chart.js 创建包含柱状图和折线图的复合图表，并配置多个 y 轴以正确显示不同类型数据的标签。教程重点阐述了 `scales` 配置项的关键设置，包括 `id`、`type`、`position` 和 `display` 属性，确保各数据集能映射到对应的轴并正确显示其刻度标签。

Chart.js 多轴图表配置指南

在数据可视化中，我们经常需要将多种类型的数据或具有不同量纲的数据呈现在同一图表中，以便进行对比分析。Chart.js 提供了强大的多轴功能，允许开发者在同一个画布上绘制多个数据集，并为每个数据集分配独立的 Y 轴。本教程将详细指导您如何利用 Chart.js 实现柱状图与折线图的混合显示，并正确配置其多 Y 轴的标签。

核心概念

实现多轴图表的关键在于理解 Chart.js 的以下配置项：

datasets 中的 yAxisID: 每个数据集（dataset）都需要通过 yAxisID 属性明确指定它应该关联哪个 Y 轴。
options.scales 配置: 这是定义所有 X 轴和 Y 轴的地方。对于每个 Y 轴，我们需要为其指定一个唯一的 id，并配置其 type、position（左侧或右侧）、display（是否显示）以及 ticks（刻度标签）等属性。

准备工作

首先，确保您的 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>

登录后复制

数据集与 Y 轴关联

在 datasets 数组中，为每个数据系列（例如“Visitor”和“Sales”）指定一个唯一的 yAxisID。这个 ID 将在后续的 scales 配置中被引用。

爱图表

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

查看详情

// 用于生成斜线图案的辅助函数
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轴
    }]
};

登录后复制

正确配置 scales

这是实现多轴显示和轴标签控制的核心步骤。在 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>

登录后复制

注意事项与总结

yAxisID 与 id 的匹配: 这是多轴图表正常工作的最关键点。数据集中的 yAxisID 必须与 scales.yAxes 数组中某个轴配置对象的 id 完全一致。
display: true: 确保您希望显示的轴和刻度标签都设置了 display: true。如果轴或刻度标签没有显示，首先检查这个属性。
position 属性: 通过设置 position: "left" 或 position: "right" 来控制 Y 轴在图表中的位置。
Chart.js 版本: 本教程基于 Chart.js v2.x 编写。如果您使用的是 Chart.js v3.x 或更高版本，scales 的配置结构会有所不同（例如 xAxes 和 yAxes 被直接放在 scales 对象下，并使用 id 作为键，且 ticks 配置方式略有变化）。请查阅对应版本的官方文档。
scaleLabel: 使用 scaleLabel 对象可以为每个轴添加一个标题，这有助于用户理解轴所代表的含义。

通过遵循本教程的步骤和注意事项，您可以轻松地在 Chart.js 中创建复杂的多轴混合图表，清晰地展示多维度数据，从而提升数据可视化的效果。

以上就是Chart.js 多轴图表配置：实现柱状图与折线图混合显示及轴标签控制的详细内容，更多请关注php中文网其它相关文章！