运城市盐湖区信雨科技有限公司
首页 > 营销学院 > 技术知识

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

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

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

Chart.js 多轴图表配置指南

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

核心概念

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

  1. datasets 中的 yAxisID: 每个数据集（dataset）都需要通过 yAxisID 属性明确指定它应该关联哪个 Y 轴。
  2. 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>
        // J*aScript 代码将在此处添加
    </script>
</body>
</html>

数据集与 Y 轴关联

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

LALAL.AI LALAL.AI

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

LALAL.AI 196 查看详情 LALAL.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 样式（可选）和 J*aScript 代码组合，即可得到一个功能完整的 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>

注意事项与总结

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

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

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


# 到第  # 汕尾怎么做网站建设  # 自己网站建设公司推荐  # 桔子seo需要付费吗  # 服装网站建设与管理论文  # 刷关键词排名的原理  # 怎么判断seo是否合理  # 辽阳网站优化怎么样  # 宁波正规网站推广定制  # 武隆网站建设优化  # 精灵免费seo工具  # 第二个  # 将在  # 多个  # 鼠标  # 第一个  # css  # 将此  # 柱状图  # 这是  # 折线图  # canva  # .net  # 数据可视化  # cdn  # win  # npm  # go  # js  # html  # java  # javascript 


相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】


相关推荐： Firefox OS应用开发：解决XMLHttpRequest跨域请求阻塞问题  如何高效地基于键列值映射DataFrame中的多个列  《异星探险家》古怪的物品作用介绍  PHP与SQL实践：高效实现数据复制与特定列值修改  使用Python和GBGB API高效抓取指定日期范围和赛道比赛结果教程  《海贝音乐》均衡器设置方法  宝妈做视频号该写什么标签话题？宝妈关注的话题有哪些？  QQ邮箱官方登录页_腾讯出品安全稳定的邮箱服务  PHP使用DOMDocument与XPath精准追加XML元素教程  mysql怎么导入sql文件_mysql导入sql文件的方法与技巧  使用 J*aScript 随机化 CSS Grid 布局中的元素顺序  WooCommerce购物车：强制显示所有交叉销售商品教程  PHP安全加载非公开目录图片与动态内容类型处理指南  Linux如何优化系统启动流程_Linux启动项优化方案  《海底捞》点外卖方法  苹果自助维修计划支持哪些设备机型  人教版电子教材在线获取指南  如何通过settings.json个性化您的VS Code体验  Win11怎么录屏_Windows 11自带Xbox Game Bar录制视频  小米倒班助手添加日历提醒  实时数据流中高效查找最小值与最大值  PointNet++语义分割模型中类别变更引发的断言错误及标签处理策略  芒果TV官网登录入口 芒果TV官方网站登录入口  虫虫漫画绿色安全入口_虫虫漫画绿色安全入口安全看漫画  外卖小程序对接第三方配送  偃武诸葛亮阵容搭配推荐  Python实战：高效处理实时数据流中的最小/最大值  Golang如何操作指针参数_Go pointer参数传递规则  邮政快递寄件查询入口 邮政快递收件查询入口  excel怎么计算平均值 excel平均函数*ERAGE使用教学  猫眼电影app如何设置电影上映提醒_猫眼电影上映提醒设置教程  Python模块化编程：避免循环导入与共享函数的最佳实践  《搜书吧》阅读书籍方法  《via浏览器》强制缩放网页设置方法  J*aScript大数运算_BigInt使用指南  《随手记》启用语音备注方法  解决CSS容器溢出问题：使用calc()实现精确布局与边距控制  猫眼电影app如何参与官方的抽奖活动_猫眼电影官方抽奖参与方法  《鹿路通》退余额方法  修复UI元素交互障碍：从“开始”按钮到信息框的平滑过渡实现  123平台官方登录入口 123邮箱网页端在线沟通工具  快递物流路径揭秘  Python自动化抓取GBGB赛狗比赛结果：日期范围与赛道筛选教程  12306售票时间最新规定 | 网上订票和车站窗口时间一样吗  手机雨课堂网页版入口免登录 雨课堂网页版可点击直接进入  126手机126邮箱登录_126邮箱手机登录入口官网  在VS Code中进行数据科学和机器学习开发  windows10怎么关闭自动安装应用_windows10禁止推广应用下载  J*aScript实现网页表单实时输入字段比较与验证教程  百度输入法在AutoCAD中无法输入中文怎么办_百度输入法CAD输入异常解决方法 

 2025-11-10

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

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

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

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

4008744355

 8156699

 13765294890

 8156699@qq.com

服务/方案/案例/支持

产品服务
Google推广
社交推广
网站建设
Bing 推广
Yandex推广
解决方案
B2B网站推广
B2C电商推广
海外品牌推广
APP海外推广
营销案例
品牌营销推广
B2C电商推广
B2B海外推广
APP应用游戏
营销网站案例
营销学院
Google疑问
Facebook疑问
优化推广
技术知识
IDC资讯
网络运营
IT资讯

关于我们

公司简介
报名培训
加入我们

©  运城市盐湖区信雨科技有限公司 版权所有 晋ICP备2025069848号 

Notice

We and selected third parties use cookies or similar technologies for technical purposes and, with your consent, for other purposes as specified in the cookie policy.
You can consent to the use of such technologies by closing this notice, by interacting with any link or button outside of this notice or by continuing to browse otherwise.