Chart.js多轴混合图表实现指南：结合柱状图与折线图并正确配置轴标签-js教程-PHP中文网

Chart.js多轴混合图表实现指南：结合柱状图与折线图并正确配置轴标签

聖光之護

发布： 2025-11-10 10:40:22

原创

559人浏览过

Chart.js多轴混合图表实现指南：结合柱状图与折线图并正确配置轴标签

本文详细介绍了如何使用chart.js创建包含柱状图和折线图的多轴混合图表。重点阐述了数据结构定义、自定义背景图案函数以及chart.js scales配置项的正确使用，特别是如何为不同数据集分配独立的y轴，并确保轴标签的正确显示和定位，从而解决多轴图表配置中的常见问题。

在数据可视化中，我们经常需要将不同类型的数据或具有不同量纲的数据在同一图表中进行展示，以提供更全面的视角。Chart.js是一个功能强大且灵活的JavaScript图表库，它支持创建各种图表类型，包括混合图表和多轴图表。本教程将指导您如何利用Chart.js实现一个柱状图和折线图相结合的多轴图表，并着重解决轴标签显示与定位的问题。

1. 核心概念与准备

在开始之前，我们需要理解几个核心概念：

混合图表 (Mixed Chart Types)：Chart.js允许在同一个图表实例中混合使用不同的图表类型（如柱状图和折线图），通过在数据集对象中指定 type 属性即可实现。
多轴 (Multiple Axes)：当不同数据集的数值范围差异较大或代表不同物理量时，使用多个Y轴可以避免数据挤压，并清晰地展示每个数据集的趋势。
轴ID (Axis ID)：每个数据集通过 yAxisID 属性指定其关联的Y轴，而每个Y轴在 scales 配置中通过其 id 属性进行唯一标识。

为了使图表更具视觉吸引力，我们还可以创建自定义的背景图案。

1.1 自定义背景图案函数

以下函数 createDiagonalPattern 用于生成一个对角线图案的CanvasPattern，可作为柱状图的 backgroundColor。

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

登录后复制

2. 数据集配置

barChartData 对象包含了图表的所有数据和数据集配置。我们定义了两个数据集：一个柱状图（"Visitor"）和一个折线图（"Sales"）。

var barChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        type: 'bar',
        label: "Visitor",
        data: [200, 185, 590, 621, 250, 400, 95],
        fill: false,
        backgroundColor: createDiagonalPattern('grey'),
        borderColor: 'grey',
        borderWidth: 1,
        hoverBackgroundColor: '#71B37C',
        hoverBorderColor: '#71B37C',
        yAxisID: 'y-axis-1' // 关联到第一个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: 'y-axis-2' // 关联到第二个Y轴
    }]
};

登录后复制

关键点：

爱图表

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

查看详情

type: 分别设置为 'bar' 和 'line' 来定义图表类型。
yAxisID: 这是将数据集与特定Y轴关联的关键。'y-axis-1' 和 'y-axis-2' 是我们将在 scales 配置中定义的轴的唯一标识符。

3. Chart.js选项配置详解

Chart.js的 options 对象是控制图表行为和外观的核心。对于多轴混合图表，scales 部分的配置至关重要。

var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
    type: 'bar', // 尽管有折线图，这里可以指定一个默认类型，或者直接不写
    data: barChartData,
    options: {
        responsive: true,
        tooltips: {
            mode: 'index', // 推荐使用 'index' 模式显示所有数据集的tooltip
            intersect: false,
        },
        elements: {
            line: {
                fill: false // 折线图不填充区域
            }
        },
        scales: {
            x: { // X轴配置
                display: true,
                grid: {
                    display: true
                },
                position: 'bottom', // X轴通常在底部
            },
            'y-axis-1': { // 第一个Y轴，对应Visitor数据
                type: "linear",
                display: true, // 确保Y轴可见
                position: "left", // 定位在左侧
                grid: { // Chart.js v3+ 使用 grid 代替 gridLines
                    display: false
                },
                ticks: { // Chart.js v3+ 使用 ticks 代替 labels
                    display: true, // 确保刻度标签可见
                }
            },
            'y-axis-2': { // 第二个Y轴，对应Sales数据
                type: "linear",
                display: true, // 确保Y轴可见
                position: "right", // 定位在右侧
                grid: {
                    display: false
                },
                ticks: {
                    display: true, // 确保刻度标签可见
                }
            }
        }
    }
});

登录后复制

关键点解析：

scales 对象结构：对于Chart.js v3及更高版本，scales 是一个对象，其键直接对应轴的 id（例如 'x', 'y-axis-1', 'y-axis-2'）。这与Chart.js v2的 y: [...] 数组结构有所不同。
display: true：这是确保轴及其标签可见的关键。如果设置为 false，轴将不会渲染。
position: "left" / position: "right"：控制Y轴在图表的哪一侧显示。
grid (Chart.js v3+) / gridLines (Chart.js v2)：控制网格线的显示。
ticks (Chart.js v3+) / labels (Chart.js v2)：控制轴刻度标签的显示。确保 ticks.display: true 以显示数值标签。

4. 完整示例代码

将上述代码片段整合到HTML文件中，即可创建一个功能完整的Chart.js多轴混合图表。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Chart.js多轴混合图表示例</title>
    <!-- 引入Chart.js库，这里使用CDN -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <style>
        body { font-family: sans-serif; }
        canvas { max-width: 800px; margin: 20px auto; display: block; }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script>
        // 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.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. 数据集配置
        var chartData = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [{
                type: 'bar',
                label: "Visitor",
                data: [200, 185, 590, 621, 250, 400, 95],
                fill: false,
                backgroundColor: createDiagonalPattern('grey'),
                borderColor: 'grey',
                borderWidth: 1,
                hoverBackgroundColor: '#71B37C',
                hoverBorderColor: '#71B37C',
                yAxisID: 'y-axis-1' // 关联到左侧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: 'y-axis-2' // 关联到右侧Y轴
            }]
        };

        // 3. Chart.js初始化与选项配置
        window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myChart = new Chart(ctx, {
                type: 'bar', // Chart.js v3+ 混合图表通常在这里指定一个默认类型，或由第一个数据集决定
                data: chartData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false, // 允许canvas根据父容器调整宽高
                    tooltips: { // Chart.js v3+ 使用 interaction 插件配置
                        mode: 'index',
                        intersect: false,
                    },
                    elements: {
                        line: {
                            fill: false
                        }
                    },
                    scales: {
                        x: {
                            display: true,
                            grid: {
                                display: true
                            },
                            position: 'bottom',
                            title: {
                                display: true,
                                text: '月份'
                            }
                        },
                        'y-axis-1': {
                            type: "linear",
                            display: true,
                            position: "left",
                            grid: {
                                display: false
                            },
                            ticks: {
                                display: true,
                                color: 'grey' // 设置刻度标签颜色
                            },
                            title: {
                                display: true,
                                text: '访客数'
                            }
                        },
                        'y-axis-2': {
                            type: "linear",
                            display: true,
                            position: "right",
                            grid: {
                                display: false
                            },
                            ticks: {
                                display: true,
                                color: '#2E41CF' // 设置刻度标签颜色
                            },
                            title: {
                                display: true,
                                text: '销售额'
                            }
                        }
                    },
                    plugins: { // Chart.js v3+ 插件配置
                        legend: {
                            display: true,
                            position: 'top',
                        }
                    }
                }
            });
        };
    </script>
</body>
</html>

登录后复制

5. 注意事项与最佳实践

Chart.js版本兼容性：本教程的 scales 配置是针对Chart.js v3及更高版本。如果您使用的是Chart.js v2，scales 的结构会有所不同（例如，Y轴配置会嵌套在 y: [...] 数组中，且使用 gridLines 和 labels 属性）。请根据您使用的版本查阅官方文档。
yAxisID 匹配：确保数据集中的 yAxisID 属性值与 scales 配置中定义的轴的 id 完全一致。任何拼写错误都可能导致轴无法正确关联。
display: true：务必为需要显示的轴设置 display: true。这是轴及其标签可见性的前提。
轴标签与标题：通过 ticks.display: true 可以显示轴的数值标签。在Chart.js v3+中，您还可以通过 title 属性为轴添加标题，使其更具可读性。
响应式设计：responsive: true 结合 maintainAspectRatio: false 可以让图表更好地适应不同尺寸的容器。
Tooltip模式：tooltips.mode: 'index' (Chart.js v2) 或 interaction.mode: 'index' (Chart.js v3+) 是一种常用的配置，它会在鼠标悬停时显示所有数据集在当前X轴位置的数据信息，对于混合图表非常有用。

总结

通过本教程，您应该已经掌握了如何使用Chart.js创建包含柱状图和折线图的多轴混合图表。关键在于正确配置 datasets 中的 yAxisID，并精确设置 options.scales 中每个轴的 id、display、position 和 ticks.display 属性。理解这些配置细节将帮助您灵活应对各种复杂的数据可视化需求，构建出清晰、专业的图表。

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