异常教程

Highcharts 使用百分比的堆叠柱形图（超详细）

更新时间:

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

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

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

在数据可视化领域，堆叠柱形图是一种直观展示数据构成与占比的图表类型。而 Highcharts 使用百分比的堆叠柱形图，则通过将每个类别的总和固定为 100%，进一步凸显各子项在整体中的相对比例。无论是分析市场占有率、资源分配效率，还是追踪项目进度，这种图表都能帮助用户快速抓住核心信息。本文将从基础概念到实战案例，逐步解析如何利用 Highcharts 实现这一功能，帮助开发者高效完成数据可视化任务。

一、Highcharts 堆叠柱形图基础概念

1.1 普通堆叠柱形图与百分比堆叠的区别

堆叠柱形图的核心是将不同数据系列“堆叠”在同一坐标轴上，形成垂直或水平的柱状结构。例如，若统计某公司三个部门在四季度的销售额，普通堆叠柱形图会将每个季度的总销售额以柱子高度体现，而每个部门的贡献则通过不同颜色的分段展示。

相比之下，百分比堆叠柱形图将每个类别的总高度固定为 100%，仅展示各子项在该类别中的占比。例如，若某季度总销售额为 100 万元，A 部门贡献 30%，B 部门 50%，C 部门 20%，那么对应柱子的分段高度分别为 30%、50%、20%。这种设计尤其适合比较不同类别中各子项的相对权重。

1.2 Highcharts 的核心配置逻辑

Highcharts 是基于 JavaScript 的图表库，其堆叠柱形图的实现依赖以下关键配置项：

  • type：指定图表类型为 column（柱形图）。
  • stacking：设置堆叠模式，包括 normal（普通堆叠）和 percent（百分比堆叠）。
  • yAxis：定义纵轴的标签格式，例如将百分比堆叠的纵轴显示为 0% 到 100%。

比喻说明：
可以将堆叠柱形图想象为分层蛋糕——普通堆叠展示蛋糕的总高度（总销售额），而百分比堆叠则展示每层占整个蛋糕的比例（部门占比）。通过调整 stacking 属性，即可切换这两种视角。

二、配置 Highcharts 的百分比堆叠模式

2.1 最简代码示例

以下是一个基础配置代码框架，展示如何快速生成百分比堆叠柱形图：

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '各部门季度销售额占比'
    },
    xAxis: {
        categories: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxis: {
        min: 0,
        title: {
            text: '占比（%）'
        },
        labels: {
            format: '{value}%'
        }
    },
    plotOptions: {
        series: {
            stacking: 'percent' // 关键配置：启用百分比堆叠
        }
    },
    series: [{
        name: '部门 A',
        data: [30, 25, 40, 35]
    }, {
        name: '部门 B',
        data: [40, 50, 30, 45]
    }, {
        name: '部门 C',
        data: [30, 25, 30, 20]
    }]
});

2.2 关键配置项详解

配置项作用描述
stacking: 'percent'将堆叠模式设为百分比，使每个类别的柱子总高度为 100%。
yAxis.labels.format格式化纵轴标签为百分比形式（如 '{value}% '）。
plotOptions.series统一设置所有系列的堆叠模式，避免逐个配置。

三、实战案例：分析产品市场份额

3.1 案例背景

假设某公司销售三款产品（A、B、C），需分析其在不同地区的市场占有率。原始数据如下：

地区产品 A 销售额产品 B 销售额产品 C 销售额
北京1208050
上海9015060
广州709080

3.2 数据预处理

由于 Highcharts 的堆叠模式自动计算比例，无需手动计算百分比。只需将原始销售额直接输入数据数组，图表会自动按类别（地区）计算各产品占比。

3.3 完整代码实现

Highcharts.chart('chart-container', {
    chart: {
        type: 'column',
        height: 400 // 设置图表高度
    },
    title: {
        text: '产品市场份额占比分析'
    },
    xAxis: {
        categories: ['北京', '上海', '广州']
    },
    yAxis: {
        title: {
            text: '市场份额（%）'
        },
        labels: {
            format: '{value}%'
        }
    },
    plotOptions: {
        series: {
            stacking: 'percent',
            dataLabels: {
                enabled: true, // 显示数据标签
                format: '{point.percentage:.1f}%' // 格式化为一位小数
            }
        }
    },
    series: [{
        name: '产品 A',
        data: [120, 90, 70]
    }, {
        name: '产品 B',
        data: [80, 150, 90]
    }, {
        name: '产品 C',
        data: [50, 60, 80]
    }]
});

3.4 效果与解读

  • 数据标签：通过 dataLabels 显示每个分段的精确百分比，避免读者猜测数值。
  • 动态交互：鼠标悬停时，tooltip 会显示原始销售额和百分比，便于对比绝对值与相对值。
  • 颜色区分：默认配色已足够清晰，若需自定义，可通过 color 属性或 colorAxis 实现。

四、进阶技巧：优化图表表现力

4.1 自定义百分比显示格式

若希望百分比保留两位小数或隐藏小数点后零，可通过 pointFormat 调整：

tooltip: {
    pointFormat: '{series.name}: {point.percentage:.2f}%<br/>'
}

4.2 动态响应式设计

通过 CSS 媒体查询，使图表适应不同屏幕尺寸：

@media (max-width: 768px) {
    #chart-container {
        width: 100%;
        height: 300px; /* 移动端缩小高度 */
    }
}

4.3 高级样式调整

  • 柱子宽度与间距：通过 pointPadding 和 groupPadding 调整柱子的紧凑度。
  • 渐变颜色：使用 linearGradient 实现渐变色： 
    plotOptions: {
    column: {
        colorByPoint: true,
        colors: [{
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
                [0, '#FFD700'], // 顶部颜色
                [1, '#FFA500']  // 底部颜色
            ]
        }]
    }
}

五、常见问题与解决方案

5.1 问题 1：数据总和不为 100%

原因：若某类别数据中存在负值，百分比堆叠会以绝对值计算总和。
解决：确保所有数据均为非负值，或通过 pointStart 调整基准线。

5.2 问题 2：小数点过多或显示异常

解决：使用 Highcharts.numberFormat 或 format 函数控制精度：

labels: {
    formatter: function() {
        return Highcharts.numberFormat(this.value, 1) + '%';
    }
}

5.3 问题 3：多系列数据无法堆叠

原因：未正确设置 stacking 属性或图表类型非 column。
解决：确保所有系列的 stacking 属性一致，并检查 type 是否为 column 或 bar。

六、结论

通过 Highcharts 使用百分比的堆叠柱形图，开发者能够以直观、动态的方式呈现数据的相对比例关系。无论是分析市场占比、资源分配还是进度追踪，这种图表都能帮助用户快速聚焦核心信息。本文从基础概念到实战案例，逐步拆解了配置与优化技巧，建议读者结合实际数据反复实践，以掌握 Highcharts 的灵活性与强大功能。

下一步行动：尝试将本文案例中的数据替换成自己的业务数据，观察图表变化，并通过调整 stacking 属性对比普通堆叠与百分比堆叠的效果差异。

最新发布

查看更多文章