异常教程

Highcharts 堆叠组柱形图（超详细）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言：为什么选择 Highcharts 堆叠组柱形图？

在数据可视化领域，柱形图是最直观的表达工具之一。而 Highcharts 堆叠组柱形图通过叠加和分组的双重特性，能够清晰展示多维度数据的对比与构成关系。无论是分析季度销售数据、用户行为分布，还是跟踪项目进度，这种图表都能将复杂信息转化为易于理解的视觉呈现。对于编程初学者和中级开发者而言，掌握这一技能不仅能提升数据表达能力，还能在实际项目中快速实现专业级可视化效果。

一、Highcharts 基础配置：搭建图表的“骨架”

1.1 环境准备与基本结构

Highcharts 是基于 JavaScript 的开源图表库，支持多种图表类型。要开始堆叠组柱形图的开发，需先引入其核心库文件：

<script src="https://code.highcharts.com/highcharts.js"></script>

一个最简单的 Highcharts 图表代码如下：

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '基础柱形图示例'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar']
    },
    yAxis: {
        title: {
            text: '销售量（单位：件）'
        }
    },
    series: [{
        name: '产品A',
        data: [29.9, 71.5, 106.4]
    }]
});

关键点解析：

  • chart.type 指定图表类型（column 表示柱形图）。
  • xAxis.categories 定义 X 轴分类标签，对应数据点的横向分布。
  • series 数组中的每个对象代表一个数据系列，通过 name 和 data 配置名称与数值。

二、堆叠组柱形图的核心原理

2.1 堆叠（Stacking）的数学逻辑

堆叠柱形图通过将同一类别的不同系列数据叠加，形成“总和柱”，直观展示各部分的贡献比例。其核心数学原理是：
每个柱的高度 = 所有对应系列数据点的总和
例如，若某季度的“产品A”销售 100 件，“产品B”销售 200 件，则堆叠后的总柱高度为 300 件。

2.2 分组（Grouping）的空间逻辑

分组功能允许同一 X 轴分类下，多个系列数据以并列形式展示。例如，若同时展示“销售额”和“利润额”，可通过分组让两者柱形并排，而非叠加。
分组逻辑公式：
柱形间距 = (柱形宽度 + 分组间隔) × 系列数量
通过调整 grouping 和 pointPadding 参数，可控制柱形的分布密度。

三、堆叠组柱形图的实现步骤

3.1 启用堆叠与分组功能

在 Highcharts 中，堆叠通过 plotOptions.column.stacking 配置，而分组默认启用。以下代码演示如何同时启用堆叠和分组：

Highcharts.chart('container', {
    plotOptions: {
        column: {
            stacking: 'normal', // 可选值：'normal'（叠加）或 'percent'（百分比）
            grouping: true      // 是否启用分组
        }
    },
    xAxis: {
        categories: ['Q1', 'Q2', 'Q3']
    },
    series: [
        { name: '成本', data: [50, 60, 70] },
        { name: '收入', data: [150, 180, 210] }
    ]
});

关键参数解释：

  • stacking: 'normal' 表示数值相加，若改为 'percent'，则显示各系列占总和的百分比。
  • grouping: true 保持默认分组，若设为 false，则所有系列会叠加而非并列。

3.2 多维度数据的组织技巧

堆叠组柱形图的数据组织结构是实现的关键。假设我们分析某电商在 3 个季度内，3 个地区的销售额分布，数据结构如下：

series: [
    {
        name: '华北区',
        data: [120, 150, 180]
    },
    {
        name: '华东区',
        data: [90, 120, 150]
    },
    {
        name: '华南区',
        data: [60, 90, 120]
    }
]

每个系列代表一个地区，X 轴分类为季度。通过堆叠，可直观对比总销售额（如 Q3 总销售额 = 180 + 150 + 120 = 450）。

四、进阶技巧：样式优化与交互增强

4.1 颜色与渐变的视觉引导

通过 colors 数组或单系列 color 属性，可为不同系列分配颜色。例如：

Highcharts.chart('container', {
    colors: ['#2ECC71', '#3498DB', '#F1C40F'],
    series: [/* 系列数据 */]
});

渐变色技巧：
使用 Highcharts.getOptions().colors 或自定义 CSS 渐变，如：
color: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [[0, '#0072B2'], [1, '#56B4E9']] }

4.2 工具提示（Tooltip）的动态信息展示

通过 tooltip 配置项，可自定义鼠标悬停时的数据显示格式：

tooltip: {
    headerFormat: '<b>季度：{point.key}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>总和：{point.stackTotal}'
}

参数说明：

  • {point.key} 显示 X 轴分类名称（如“Q1”）。
  • {point.stackTotal} 展示当前堆叠柱的总和。

五、实战案例：电商季度销售分析

5.1 案例背景

某电商平台需要对比 2023 年四个季度内，3 个产品线（手机、家电、服饰）的销售额分布。要求：

  1. 按季度分组，显示各产品线的独立柱形；
  2. 每个季度的总销售额以堆叠柱展示。

5.2 完整代码实现

Highcharts.chart('container', {
    chart: {
        type: 'column',
        height: '500px'
    },
    title: {
        text: '2023年各季度销售额分布'
    },
    xAxis: {
        categories: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxis: {
        min: 0,
        title: {
            text: '销售额（万元）'
        }
    },
    legend: {
        align: 'right',
        verticalAlign: 'top',
        y: 20,
        floating: true
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            grouping: true,
            dataLabels: {
                enabled: true,
                color: 'white',
                formatter: function() {
                    return this.y > 0 ? this.y : '';
                }
            }
        }
    },
    series: [
        {
            name: '手机',
            data: [200, 240, 280, 320]
        },
        {
            name: '家电',
            data: [150, 180, 210, 240]
        },
        {
            name: '服饰',
            data: [80, 100, 120, 140]
        }
    ]
});

5.3 效果与解析

  • 分组功能：每个季度的三个产品线柱形并列，便于直接对比单季度内不同品类的销售表现。
  • 堆叠总和：例如 Q4 的总销售额为 320 + 240 + 140 = 700 万元，通过堆叠柱一目了然。
  • 数据标签：dataLabels 展示每个柱的具体数值，formatter 函数避免零值显示。

六、常见问题与解决方案

6.1 问题 1：堆叠与分组冲突时如何调整？

当需要同时展示堆叠和分组时，需确保所有系列的 stacking 配置一致。例如：

series: [
    { name: '成本', stacking: 'normal' }, 
    { name: '收入', stacking: 'normal' }
]

若部分系列未设置 stacking，可能导致布局混乱。

6.2 问题 2：如何调整柱形的宽度与间距？

通过 pointPadding 和 groupPadding 控制：

plotOptions: {
    column: {
        pointPadding: 0.2,  // 柱形内部间距
        groupPadding: 0.1, // 分组间间距
        borderWidth: 0
    }
}

结论：从理论到应用的升华

通过本文的讲解，我们系统掌握了 Highcharts 堆叠组柱形图 的实现逻辑、代码配置及优化技巧。从基础的图表搭建，到复杂的数据分组与堆叠，再到视觉细节的调整，开发者可以逐步构建出专业级的可视化方案。无论是分析业务数据、展示项目进度，还是优化用户体验，这一技能都能成为你的高效工具。建议读者通过实际项目练习，尝试不同数据集与配置组合，进一步深化理解。

下一步行动：

  1. 访问 Highcharts 官方文档 获取更多配置细节。
  2. 尝试将案例中的数据替换为你的实际业务场景，观察效果变化。
  3. 探索 stacking: 'percent' 模式，对比百分比堆叠的呈现效果。

通过本文的系统学习，相信读者已具备独立开发 Highcharts 堆叠组柱形图 的能力。数据可视化不仅是技术实现，更是信息传达的艺术——愿你在代码与图表中，找到数据背后的故事。

最新发布

查看更多文章