Highcharts 柱形图（Column Chart）详解
Highcharts 中的柱形图（Column Chart）是最常用的图表类型之一，用垂直柱子表示数据大小，适合比较不同类别的数值（如销量、成绩、人口等）。它直观、易读，支持单系列、多系列、堆叠、负值等多种变体。
主要类型
- column：基本柱形图（垂直柱）
- stacked column：堆叠柱形图（显示部分与整体）
- percent column：百分比堆叠柱形图（每个类别总和为100%）
- columnrange：柱形范围图（显示高低值区间，如温度范围）
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: 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）——显示区间
需引入额外模块：
<script src="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 柱形图
- 与折线混合图
告诉我具体需求，我可以提供完整代码示例！
