Chart.js 多轴混合图表：实现柱状图与折线图的左右Y轴标签显示-js教程-PHP中文网

Chart.js 多轴混合图表：实现柱状图与折线图的左右Y轴标签显示

DDD

发布： 2025-11-10 13:29:00

原创

137人浏览过

Chart.js 多轴混合图表：实现柱状图与折线图的左右Y轴标签显示

本教程详细介绍了如何使用chart.js创建包含柱状图和折线图的混合图表，并配置多个y轴以正确显示不同数据集的轴标签。文章将重点讲解chart.js v2.x版本中`scales`配置的正确语法，特别是如何通过设置`display`属性和`id`来确保左右y轴及其标签的可见性和关联性，同时提供完整的示例代码。

在数据可视化领域，经常需要将不同类型的数据或具有不同量级的数据呈现在同一图表中，以便进行对比分析。Chart.js作为一款流行的JavaScript图表库，提供了强大的混合图表和多轴配置能力。本文将指导您如何利用Chart.js实现柱状图和折线图的组合，并为它们配置独立的左右Y轴，确保轴标签正确显示。

1. Chart.js 多轴图表基础

Chart.js允许您为图表配置多个X轴和Y轴。对于混合图表，例如柱状图和折线图，通常会为每个数据集分配一个Y轴，特别是当它们的数值范围差异较大时。实现多轴的关键在于：

在每个数据集（dataset）中指定其关联的Y轴ID（yAxisID）。
在图表选项（options）的scales配置中，定义具有相应ID的Y轴，并设置其位置（position）和显示属性（display）。

2. 环境准备

首先，确保您的HTML页面引入了Chart.js库。本教程将基于Chart.js v2.x版本进行讲解，因为提供的代码片段更符合该版本的语法。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Chart.js 多轴混合图表示例</title>
    <!-- 引入 Chart.js v2.x CDN -->
    <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="canvas"></canvas>
    </div>
    <script>
      // JavaScript 代码将在此处添加
    </script>
  </body>
</html>

登录后复制

3. 数据集与Y轴关联

在Chart.js中，每个数据集都可以通过yAxisID属性关联到一个特定的Y轴。例如，我们有两个数据集：“Visitor”（访客数，柱状图）和“Sales”（销售额，折线图），它们将分别关联到y-axis-1和y-axis-2。

    // 自定义斜线图案背景函数
    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 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轴
        }]
    };

登录后复制

4. 图表选项配置：Y轴显示问题修复

要正确显示多Y轴及其标签，最关键的是在options.scales中进行配置。对于Chart.js v2.x，Y轴配置应放在yAxes数组中，X轴配置放在xAxes数组中。

爱图表

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

查看详情

核心修复点：

yAxes 和 xAxes 数组： 确保使用 xAxes: [...] 和 yAxes: [...] 而不是 scales: { x: [...], y: [...] }。
display: true： 必须将每个需要显示的轴的 display 属性设置为 true。这是导致轴不显示的常见原因。
id 属性： 每个Y轴都需要一个唯一的 id，并与数据集中 yAxisID 匹配。
position 属性： 设置轴的位置为 left 或 right。
ticks.display: true： 确保轴上的刻度标签（数值）能够显示。

以下是修复后的options配置：

    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: 'bar', // 默认图表类型，但数据集中的type会覆盖
            data: barChartData,
            options: {
                responsive: true,
                tooltips: {
                    mode: 'index', // 提示框模式，显示所有数据集信息
                    intersect: false, // 鼠标不需精确覆盖到元素
                },
                elements: {
                    line: {
                        fill: false // 折线图不填充区域
                    }
                },
                scales: {
                    xAxes: [{ // X轴配置
                        display: true, // 显示X轴
                        gridLines: {
                            display: true // 显示X轴网格线
                        },
                        ticks: {
                            display: true // 显示X轴刻度标签
                        }
                    }],
                    yAxes: [{ // 左侧Y轴 (访客数)
                        type: "linear",
                        display: true, // !!! 关键：设置为 true 以显示轴和标签
                        position: "left",
                        id: "y-axis-1", // 与 Visitor 数据集的 yAxisID 匹配
                        gridLines: {
                            display: true // 显示网格线
                        },
                        ticks: {
                            display: true // 显示刻度标签
                        }
                    }, { // 右侧Y轴 (销售额)
                        type: "linear",
                        display: true, // !!! 关键：设置为 true 以显示轴和标签
                        position: "right",
                        id: "y-axis-2", // 与 Sales 数据集的 yAxisID 匹配
                        gridLines: {
                            display: false // 隐藏网格线，使图表更简洁
                        },
                        ticks: {
                            display: true // 显示刻度标签
                        }
                    }]
                }
            }
        });
    };

登录后复制

5. 完整示例代码

将上述所有代码片段组合起来，即可得到一个完整的、功能正常的Chart.js多轴混合图表示例。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Chart.js 多轴混合图表示例</title>
    <!-- 引入 Chart.js v2.x CDN -->
    <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%; margin: 20px auto;">
      <canvas id="canvas"></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 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轴
        }]
    };

    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: 'bar', // 默认图表类型，但数据集中的type会覆盖
            data: barChartData,
            options: {
                responsive: true,
                tooltips: {
                    mode: 'index', // 提示框模式，显示所有数据集信息
                    intersect: false, // 鼠标不需精确覆盖到元素
                },
                elements: {
                    line: {
                        fill: false // 折线图不填充区域
                    }
                },
                scales: {
                    xAxes: [{ // X轴配置
                        display: true, // 显示X轴
                        gridLines: {
                            display: true // 显示X轴网格线
                        },
                        ticks: {
                            display: true // 显示X轴刻度标签
                        }
                    }],
                    yAxes: [{ // 左侧Y轴 (访客数)
                        type: "linear",
                        display: true, // !!! 关键：设置为 true 以显示轴和标签
                        position: "left",
                        id: "y-axis-1", // 与 Visitor 数据集的 yAxisID 匹配
                        gridLines: {
                            display: true // 显示

登录后复制

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