Highcharts 柱形图（Column Chart）详解
Highcharts 中的柱形图（Column Chart）是最常用的图表类型之一，用垂直柱子表示数据大小，适合比较不同类别的数值（如销量、成绩、人口等）。它直观、易读，支持单系列、多系列、堆叠、负值等多种变体。
主要类型
- column：基本柱形图（垂直柱）
- stacked column：堆叠柱形图（显示部分与整体）
- percent column：百分比堆叠柱形图（每个类别总和为100%）
- columnrange：柱形范围图（显示高低值区间，如温度范围）
1. 基本柱形图示例
以下是一个完整的单系列柱形图示例：
<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><title>Highcharts 柱形图示例</title><scriptsrc="https://code.highcharts.com/highcharts.js"></script></head><body><divid="container"style="width:900px;height:500px;margin:50px auto;"></div><script>Highcharts.chart('container',{chart:{type:'column',// 关键：设置为 'column' 即垂直柱形图backgroundColor:'#f8f9fa',borderRadius:8},title:{text:'2024年各大城市月度销售额',style:{fontWeight:'bold',fontSize:'20px'}},subtitle:{text:'单位：万元'},xAxis:{categories:['北京','上海','广州','深圳','杭州','成都','重庆'],crosshair:true// 鼠标悬停时显示垂直线},yAxis:{min:0,title:{text:'销售额 (万元)'}},tooltip:{headerFormat:'<span style="font-size:14px">{point.key}</span><br/>',pointFormat:'<b>{point.y:.1f} 万元</b>',shared:false},plotOptions:{column:{pointPadding:0.1,// 柱子间距borderWidth:0,borderRadius:6,// 柱子顶部圆角dataLabels:{// 柱子上显示数值enabled:true,format:'{y} 万',style:{color:'#333',fontWeight:'bold'}}}},series:[{name:'销售额',data:[450,520,480,590,410,380,360],color:'#7cb5ec'}]});</script></body></html>2. 多系列堆叠柱形图（最常用对比场景）
chart:{type:'column'},xAxis:{categories:['一季度','二季度','三季度','四季度']},plotOptions:{column:{stacking:'normal',// 'normal' 普通堆叠，'percent' 百分比堆叠dataLabels:{enabled:true},borderRadius:4}},series:[{name:'产品A',data:[120,150,180,140],color:'#FF6B6B'},{name:'产品B',data:[80,100,120,110],color:'#4ECDC4'},{name:'产品C',data:[50,70,90,80],color:'#45B7D1'}]stacking: 'percent'→ 每个柱子高度固定为100%，显示占比。
3. 负值柱形图（适合显示盈亏、增长率）
series:[{name:'月度利润',data:[150,120,-80,90,-50,200,130],color:'#7cb5ec',negativeColor:'#FF6B6B'// 负值柱子自动变红}]4. 柱形范围图（Columnrange）——显示区间
需引入额外模块：
<scriptsrc="https://code.highcharts.com/highcharts-more.js"></script>chart:{type:'columnrange',inverted:true},// inverted 可水平显示series:[{name:'温度范围',data:[[-5,10],[0,15],[5,20],[10,25],[15,30]// [low, high]]}]5. 常用配置总结
| 配置项 | 说明与推荐值 |
|---|---|
chart.type | ‘column’（垂直柱形图） |
plotOptions.column.stacking | ‘normal’ 或 ‘percent’（堆叠时使用） |
plotOptions.column.borderRadius | 4~8（顶部圆角美化） |
plotOptions.column.dataLabels | { enabled: true }（推荐开启，柱上显示数值） |
series.color/negativeColor | 正负值不同颜色 |
xAxis.crosshair | true（鼠标悬停高亮） |
6. 柱形图 vs 条形图
| 类型 | chart.type | 方向 | 适用场景 |
|---|---|---|---|
| 柱形图 | ‘column’ | 垂直 | 时间序列、多类别数值对比（最常用） |
| 条形图 | ‘bar’ | 水平 | 标签长、类别多、排名展示 |
如果你需要：
- 瀑布图（waterfall）
- 带钻取（drilldown）的柱形图
- 3D 柱形图
- 与折线混合图
告诉我具体需求，我可以提供完整代码示例！
