Highcharts 组合图（Combination Chart）详解
Highcharts 的组合图（也叫混合图表）是指在同一个图表中使用多种不同类型的系列（如折线 + 柱状、区域 + 折线、饼图 + 柱状等），非常适合同时展示多种指标的对比、趋势和总量关系。常见应用场景：
- 柱状图显示销量 + 折线显示增长率
- 柱状图显示收入/成本 + 折线显示利润
- 区域图显示累计值 + 折线显示单期值
- 多 Y 轴组合（不同量纲指标）
实现原理
- 在
series数组中为每个系列单独指定type - 如有不同量纲，使用多个
yAxis（多 Y 轴） - 可选：堆叠（stacking）、分组等
1. 最经典组合：柱状图 + 折线图（单 Y 轴）
<!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: {
backgroundColor: '#f8f9fa'
},
title: {
text: '2024年各季度销售额与增长率',
style: { fontWeight: 'bold', fontSize: '20px' }
},
subtitle: { text: '柱状：销售额（万元） | 折线：同比增长率（%）' },
xAxis: {
categories: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: [{
title: { text: '销售额 (万元)' },
min: 0
}, {
title: { text: '同比增长率 (%)' },
opposite: true, // 显示在右侧
min: -20,
max: 50
}],
tooltip: {
shared: true // 共享提示框，同时显示所有系列值
},
plotOptions: {
column: {
borderRadius: 5,
dataLabels: { enabled: true, format: '{y} 万' }
},
spline: {
marker: { radius: 6 }
}
},
series: [{
type: 'column', // 柱状图
name: '销售额',
data: [450, 520, 680, 590],
color: '#7cb5ec',
yAxis: 0
}, {
type: 'spline', // 折线图
name: '同比增长率',
data: [12, 28, 35, 18],
color: '#ff7f7f',
marker: { symbol: 'diamond' },
yAxis: 1
}]
});
</script>
</body>
</html>2. 区域图 + 折线图组合（累计 + 单期）
series: [{
type: 'area',
name: '累计销量',
data: [100, 250, 450, 700],
color: '#90ed7d',
fillOpacity: 0.5
}, {
type: 'spline',
name: '月销量',
data: [100, 150, 200, 250],
color: '#f7a35c'
}]3. 堆叠柱状 + 折线组合（多指标对比）
plotOptions: {
column: { stacking: 'normal' } // 堆叠柱状
},
series: [{
type: 'column',
name: '线上销售',
data: [200, 250, 300, 280]
}, {
type: 'column',
name: '线下销售',
data: [150, 180, 220, 200]
}, {
type: 'spline',
name: '总销售额趋势',
data: [350, 430, 520, 480],
yAxis: 1,
color: '#434348'
}]4. 饼图 + 柱状图组合（占比 + 明细）
chart: { type: 'column' }, // 主图为柱状
series: [{
type: 'column',
name: '各产品销量',
data: [30, 25, 20, 15, 10]
}, {
type: 'pie',
name: '产品占比',
data: [
{ name: '产品A', y: 30 },
{ name: '产品B', y: 25 },
{ name: '产品C', y: 20 },
{ name: '产品D', y: 15 },
{ name: '产品E', y: 10 }
],
center: [100, 80], // 饼图位置（像素）
size: 150, // 饼图大小
showInLegend: false,
dataLabels: { enabled: true }
}]5. 常用技巧总结
| 需求 | 配置方式 |
|---|---|
| 不同类型系列 | 在每个 series 中单独设置 type |
| 不同量纲（多 Y 轴） | yAxis: [{...}, {...}] + series.yAxis: 0/1 |
| 共享提示框 | tooltip: { shared: true } |
| 右侧 Y 轴 | yAxis: { opposite: true } |
| 柱状堆叠 | plotOptions.column.stacking: 'normal' |
| 饼图嵌入 | 指定 center、size 定位 |
组合图是 Highcharts 最灵活的功能之一，几乎可以任意混搭所有图表类型（line, spline, area, column, bar, pie, scatter 等）。
如果你需要：
- 柱状 + 折线 + 区域 三组合
- 带钻取（drilldown）的组合图
- 动态切换系列类型
- 特定业务场景（如财务报表、KPI 仪表盘）
告诉我你的具体需求，我可以提供完整代码示例！
