新闻中心

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

2025-11-10
浏览次数：次
返回列表

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

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

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

1. 准备 HTML 结构

首先，我们需要一个 HTML 元素作为 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. 定义图表数据和配置

接下来，我们将编写 J*aScript 代码来定义图表的数据集和配置选项。关键在于为每个数据集指定 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)。

火龙果写作 火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

火龙果写作 277 查看详情 火龙果写作
  • 访客数量 (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 结构和 J*aScript 代码整合到一个文件中，即可运行此多轴复合图表示例。

<!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 多轴复合图表：实现柱状图与折线图的精确配置与轴标签管理的详细内容，更多请关注其它相关文章！


# java  # 网站建设费用详单  # 百度营销推广什么意思  # 青岛网站推广该怎么做  # 佳木斯seo推广  # 南京网站排名优化电话  # 在这里  # 扁平化  # 如何实现  # 如何使用  # 是一个  # 有哪些  # 柱状图  # 折线图  # 访客  # javascript  # html  # js  # go  # npm  # ai  # win  # nas  # cdn  # 数据可视化  # 响应式布局  # .n  # 自定义  # 网站推广指引怎么写好呢  # 有效的seo费用明细  # 搜索引擎营销推广作业  # 门诊网站建设哪里靠谱  # 蓬安seo网络推广优化 


相关栏目： 【 科技资讯46185 】 【 网络学院92790 】


相关推荐： 在J*a中如何在J*a中使用异常机制记录错误日志_异常日志实践经验  快手官方唯一登录入口 谨防山寨钓鱼网站  汽水音乐网页版使用入口_汽水音乐电脑版播放指南  正确连接J*aScript到HTML实现可点击图片与自定义事件处理  微信怎么把收藏的内容分类管理 微信收藏内容标签分类方法  使用 Pandas 高效处理 .dat 文件：字符清理与数据计算  Win11如何使用Windows Sandbox Win11沙盒功能开启与使用教程【详解】  如何在 Windows 11 中启动游戏手柄设置  为什么简单的XML文件也会解析失败？ 检查隐藏的非打印字符（如BOM）的方法  Lar*el用户头像管理：实现图片缩放、存储与旧文件安全删除的最佳实践  Win10系统服务哪些可以禁用 Win10安全优化服务列表【干货】  怎么在mac上运行html代码_mac运行html代码方法【指南】  vivo浏览器怎么扫描二维码 vivo浏览器内置扫一扫功能使用方法  Node.js中HTML按钮与J*aScript函数交互的正确姿势  b站怎么看视频的弹幕数量_b站弹幕数量查看方法  如何使用 Excel 发布器与 Power BI 分享 Excel 洞察  向日葵客户端怎么进行远程CentOS控制_向日葵客户端远程CentOS控制操作教程  PySpark中高效提取字符串右侧可变长度数字：使用regexp_extract  win11开机启动修复循环怎么办 Win11无法进入系统高级启动解决方法【修复】  谷歌浏览器如何快速清除某个网站的数据_Chrome网站缓存清理方法  Go语言中JSON数据解析与字段访问教程  LINUX下如何进行磁盘分区_fdisk与parted工具在LINUX中的使用对比  多闪网页版在线观看免费入口_多闪官网访问入口  1688商家版怎样分析买家画像精准供货_1688商家版分析买家画像精准供货【供货策略】  PS5 Pro有点优势但不多！ 《燕云十六声》PS5平台与PC性能画面对比  12306选座怎么选到临时改签座_12306改签选座策略与步骤  漫蛙2在线漫画入口 漫蛙正版漫画网页版直达  树莓派传感器触发：通过Twilio API发送WhatsApp消息教程  c++项目目录结构应该如何组织_c++工程化项目结构规范  PHP中获取MongoDB服务器运行时间（Uptime）的专业指南  J*a里如何实现线程安全的懒加载单例_懒加载单例实现方法解析  顺丰快件物流信息 官方网站查询入口  qq邮箱日历功能怎么用_创建日程与会议邀请的技巧  漫蛙2正版漫画站 漫蛙2网页版快速访问入口  QQ邮箱官网登录入口 QQ邮箱网页版邮箱快速登录  包子漫画官方网站在线链接-包子漫画在线阅读平台主页地址  Win11 BitLocker密码忘了怎么办 Win11找回BitLocker恢复密钥方法【解决】  Excel组合图表怎么做 Excel创建柱状图与折线组合图教程【图表】  Win10磁盘清理工具在哪 Win10打开并使用磁盘清理【教程】  MinIO大规模对象列表性能瓶颈深度解析与外部元数据管理策略  写好的html代码怎么运行出来_运行写好的html代码方法【教程】  J*aScript中高效管理与清空动态列表：避免循环陷阱  sublime怎么进行远程开发编辑_配置rsub/rmate实现sublime编辑服务器文件  Typer应用中灵活处理命令行参数的令牌化与解析  现代化 SciPy 一维插值：interp1d 的替代方案与最佳实践  CSS如何设置hover状态颜色_hover伪类调整背景或文字颜色  电脑屏幕颜色不舒服怎么办_Windows夜间模式与色彩校准教程【护眼技巧】  高德地图怎么看全景照片_高德地图全景照片浏览教程  夸克浏览器网页版最新地址 夸克浏览器官方入口合集  Composer的 "conflict" 字段有什么用_如何声明不兼容的包以避免依赖冲突 

上一篇：J*aScript中实现健壮的Fetch请求：重试机制提升网络稳定性
下一篇：在nopCommerce中通过监听事件动态获取产品属性组合的SKU值

搜索