Highcharts 条形图（Bar Chart）详解
Highcharts 中的条形图（Bar Chart）是用水平条形显示数据的图表类型，非常适合展示分类数据的比较（如排名、销售量、国家人口等）。与垂直的柱状图（column）相对，条形图更适合类别标签较长或类别较多的情况。
主要类型
- bar：基本条形图（水平条）
- column：垂直柱状图（最常用）
- stacked bar：堆叠条形图（显示部分与整体）
- percent bar：百分比堆叠条形图（每个类别总和为100%）
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:600px;margin:50px auto;"></div><script>Highcharts.chart('container',{chart:{type:'bar',// 关键：设置为 'bar' 即水平条形图backgroundColor:'#f8f9fa'},title:{text:'2024年主要城市水果消费量排名',style:{fontWeight:'bold',fontSize:'20px'}},subtitle:{text:'单位：千克/人/年'},xAxis:{categories:['北京','上海','广州','深圳','成都','杭州','重庆'],title:{text:null},labels:{style:{fontSize:'14px'}}},yAxis:{min:0,title:{text:'消费量 (千克)'},labels:{overflow:'justify'}},tooltip:{valueSuffix:' 千克',pointFormat:'<b>{point.y:.1f} 千克</b>'},plotOptions:{bar:{dataLabels:{// 在条形末端显示数值enabled:true,format:'{y} 千克',style:{color:'#333',fontWeight:'bold'}},borderRadius:5,// 条形圆角pointPadding:0.1,groupPadding:0.2}},legend:{enabled:false// 单系列时可关闭图例},credits:{enabled:false},series:[{name:'水果消费量',data:[85,92,108,95,78,88,82],color:'#7cb5ec'}]});</script></body></html>2. 多系列堆叠条形图（推荐用于对比多个指标）
chart:{type:'bar'},xAxis:{categories:['苹果','香蕉','橙子','葡萄','梨']},plotOptions:{bar:{stacking:'normal',// 普通堆叠dataLabels:{enabled:true}}},series:[{name:'2023年',data:[50,40,60,30,45],color:'#FF6B6B'},{name:'2024年',data:[55,45,65,35,50],color:'#4ECDC4'}]- 将
stacking: 'normal'改为'percent'可实现百分比堆叠条形图（每个条总长100%）。
3. 负值条形图（适合显示正负偏差，如利润/亏损）
series:[{name:'利润变化',data:[150,120,-80,90,-50,200,130],colorByPoint:true// 每个条自动不同颜色（正负可自定义）}]4. 条形图 vs 柱状图
| 类型 | chart.type | 方向 | 适用场景 |
|---|---|---|---|
| 柱状图 | ‘column’ | 垂直 | 时间序列、数值对比（默认最常用） |
| 条形图 | ‘bar’ | 水平 | 类别标签长、类别多、排名展示 |
5. 常用配置总结
| 配置项 | 说明与推荐值 |
|---|---|
chart.type | ‘bar’（水平）或 ‘column’（垂直） |
plotOptions.bar.stacking | ‘normal’ 或 ‘percent’（堆叠时使用） |
plotOptions.bar.dataLabels | { enabled: true }（推荐开启，条上显示数值） |
plotOptions.bar.borderRadius | 4~8（圆角美化） |
xAxis.labels.style.fontSize | ‘14px’（标签较长时增大） |
chart.inverted | true（另一种实现水平条形的方式，少用） |
如果你需要：
- 横向堆叠百分比条形图
- 带图片图标的条形图
- 与折线混合的图表
- 响应式适配
告诉我具体需求，我可以提供完整代码示例！
