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

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

在数据可视化领域，经常需要将不同类型的数据或具有不同量级的数据呈现在同一图表中，以便进行对比分析。Chart.js作为一款流行的J*aScript图表库，提供了强大的混合图表和多轴配置能力。本文将指导您如何利用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>
      // J*aScript 代码将在此处添加
    </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数组中。

LALAL.AI

AI人声去除器和声乐提取工具

196 查看详情 LALAL.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多轴混合图表示例。



  
    
    Chart.js 多轴混合图表示例

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。