Highcharts 条形图（Bar Chart）详解
Highcharts 中的条形图（Bar Chart）是用水平条形显示数据的图表类型，非常适合展示分类数据的比较（如排名、销售量、国家人口等）。与垂直的柱状图（column）相对，条形图更适合类别标签较长或类别较多的情况。
主要类型
- bar：基本条形图（水平条）
- column：垂直柱状图（最常用）
- stacked bar：堆叠条形图（显示部分与整体）
- percent bar：百分比堆叠条形图（每个类别总和为100%）
1. 基本条形图示例
以下是一个完整的水平条形图示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Highcharts 条形图示例</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="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（另一种实现水平条形的方式，少用） |
如果你需要：
- 横向堆叠百分比条形图
- 带图片图标的条形图
- 与折线混合的图表
- 响应式适配
告诉我具体需求，我可以提供完整代码示例！
