Highcharts 堆叠柱形图（长文解析）

什么是 Highcharts 堆叠柱形图？

在数据可视化领域，柱形图是最常见的图表类型之一。它用柱子的高低来表示数值大小，直观、易懂。但当我们要对比多个数据系列在相同时间或类别下的整体表现时，普通的柱形图就显得力不从心了。

这时候，Highcharts 堆叠柱形图登场了。它就像是把多个柱子“叠”在一起，每个颜色代表一个数据系列，而整个柱子的高度就是这些系列的总和。这种设计特别适合展示“部分与整体”的关系，比如：某公司每月的销售额由不同产品线贡献，我们可以通过堆叠柱形图一眼看出哪个产品线是主力，以及整体趋势如何。

想象一下，你在整理一份团队的月度任务完成情况。每个任务有“设计”、“开发”、“测试”三个阶段，每个阶段花的时间不同。如果你用普通柱形图，每个阶段单独画一列，会显得杂乱；但用堆叠柱形图，就能把三个阶段“粘”在同一个柱子上，清晰展示每个任务的总耗时和各阶段占比。

Highcharts 堆叠柱形图支持多种堆叠方式，包括默认的“正向堆叠”（从下往上）和“反向堆叠”（从上往下），也支持“百分比堆叠”——把每根柱子的高度统一为 100%，用百分比展示各部分的占比。这让你的数据分析能力大大提升。

如何引入 Highcharts 库

在开始画图之前，首先要让网页能用 Highcharts。这就像盖房子前得先买建材一样。

打开你的 HTML 文件，在 <head> 标签内添加如下代码：

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

这行代码会从官方 CDN 加载 Highcharts 的核心库。你也可以选择下载后本地引入，但 CDN 方式更简单快捷，适合学习和开发初期。

⚠️ 注意：确保你的网页环境是通过 http:// 或 https:// 访问的，否则某些浏览器可能会阻止加载外部脚本。

加载完成后，你就可以在页面的任意位置创建一个容器来放图表了。比如：

<div id="container" style="width: 800px; height: 400px; margin: 0 auto;"></div>

这个 div 就是图表的“画布”。id="container" 是必须的，因为后续 JavaScript 会通过这个 ID 找到它并渲染图表。

构建基础的堆叠柱形图

现在我们来写一段 JavaScript 代码，创建一个简单的 Highcharts 堆叠柱形图。

// 创建图表实例，传入容器 ID 和配置对象
Highcharts.chart('container', {
  // 图表标题
  title: {
    text: '2024 年各季度产品销售统计'
  },

  // X 轴（横轴）配置
  xAxis: {
    categories: ['第一季度', '第二季度', '第三季度', '第四季度']
  },

  // Y 轴（纵轴）配置
  yAxis: {
    title: {
      text: '销售额（万元）'
    }
  },

  // 图表类型为柱形图，启用堆叠
  plotOptions: {
    column: {
      stacking: 'normal'  // 启用正常堆叠（从下往上）
    }
  },

  // 数据系列（每个 series 代表一个产品线）
  series: [
    {
      name: '产品 A',
      data: [40, 50, 60, 70]
    },
    {
      name: '产品 B',
      data: [20, 30, 40, 50]
    },
    {
      name: '产品 C',
      data: [10, 15, 20, 25]
    }
  ]
});

代码详解

Highcharts.chart('container', {...})：这是创建图表的入口函数，第一个参数是容器 ID，第二个是配置对象。
title.text：图表的主标题，写在最上方。
xAxis.categories：横轴的标签，对应每个柱子的类别，这里代表四个季度。
yAxis.title.text：纵轴的单位说明，让读者知道数据是“万元”。
plotOptions.column.stacking: 'normal'：关键配置！它告诉 Highcharts 把柱子堆叠起来，normal 表示从底部开始堆叠。
series：数据系列数组。每个对象代表一个产品线，name 是图例中的名称，data 是对应每个季度的销售额。

运行这段代码，你就能看到一个清晰的堆叠柱形图，三根柱子分别由三种颜色组成，从下往上分别是产品 A、B、C 的贡献。

高级堆叠模式：百分比与反向堆叠

Highcharts 支持不止一种堆叠方式。除了默认的 normal 堆叠，还有 percent 和 reverse。

百分比堆叠：看占比，不看绝对值

当你关心的是“每个产品在总销售额中的占比”时，百分比堆叠就非常有用。

plotOptions: {
  column: {
    stacking: 'percent'  // 改为百分比堆叠
  }
}

此时，每根柱子的高度都变成 100%，内部颜色的高低代表该产品在该季度的占比。比如，第一季度中，产品 A 占 60%，B 占 30%，C 占 10%——它们在柱子上的高度比例就反映了这个关系。

💡 适用场景：分析市场占有率、用户行为分布、资源分配效率等。

反向堆叠：从上往下堆叠

如果你希望堆叠顺序是从上往下，比如“总预算”从上往下被“支出”逐渐填满，可以使用 reverse：

plotOptions: {
  column: {
    stacking: 'reverse'  // 反向堆叠，从上往下
  }
}

这时，数据系列的顺序会反过来显示，最上面的是第一个 series，最下面的是最后一个。适用于“剩余空间”类的图表，比如库存剩余、时间剩余等。

动态更新与交互功能

Highcharts 不只是静态图表，它支持动态更新数据和丰富的交互功能。

实时更新数据

假设你有一个仪表盘，需要每 5 秒更新一次销售数据。你可以用 series[0].setData() 方法来刷新。

// 模拟更新数据
setInterval(function () {
  const newData = [Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100), Math.floor(Math.random() * 100)];
  chart.series[0].setData(newData); // 更新第一个系列的数据
}, 5000);

这段代码会让第一个产品线的数据每 5 秒随机变化一次，图表自动刷新。

图例点击控制显示/隐藏

Highcharts 的图例默认支持点击。用户点击某个产品线的图例，该系列就会隐藏或显示。这个功能可以让你快速对比不同组合的数据。

你也可以通过 chart.series[i].setVisible(false) 手动控制显示状态。

实际案例：分析月度用户增长

让我们来一个完整的实战案例：分析某 App 的月度用户增长，按“新用户”和“回访用户”分类。

Highcharts.chart('container', {
  title: {
    text: '2024 年 App 用户增长分析'
  },
  xAxis: {
    categories: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    title: {
      text: '用户数量（人）'
    }
  },
  plotOptions: {
    column: {
      stacking: 'normal'  // 堆叠展示
    }
  },
  series: [
    {
      name: '新用户',
      data: [1200, 1500, 1800, 2100, 2400, 2700]
    },
    {
      name: '回访用户',
      data: [800, 900, 1100, 1300, 1500, 1700]
    }
  ],
  tooltip: {
    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> 人<br/>'
  }
});

这个图表展示了每个月总用户数 = 新用户 + 回访用户。通过观察柱子高度的变化，你能判断出增长是靠新用户拉动，还是老用户活跃度提升。

tooltip 配置让鼠标悬停时显示具体数值，提升可读性。

常见问题与调试技巧

图表不显示？
- 检查 div 的 id 是否匹配
- 确保 height 有值（不能是 0）
- 检查浏览器控制台是否有 JS 报错
堆叠顺序不对？
- 确认 series 数组中数据的顺序
- 如果希望从上往下堆叠，使用 stacking: 'reverse'
颜色不清晰？
- 可以通过 colors 配置自定义颜色：
```
colors: ['#FF6B6B', '#4ECDC4', '#45B7D1']
```

移动端显示异常？

添加 chart.events.load 事件，确保响应式：

chart: {
  events: {
    load: function() {
      this.setSize(null, null, false);
    }
  }
}

总结

Highcharts 堆叠柱形图是一种强大而灵活的数据可视化工具。它不仅能清晰展示多个数据系列在相同维度下的贡献，还能通过堆叠模式的变化，揭示不同维度的数据规律。

无论是分析销售业绩、用户增长，还是资源分配，只要涉及“部分与整体”的对比，Highcharts 堆叠柱形图都是首选方案。它结合了简洁的视觉表达与丰富的交互能力，让数据真正“说话”。