Highcharts 组合图（Combo Chart）配置
组合图是将不同类型的图表（如折线图、柱形图、区域图等）组合在一起，展示多个数据系列。这种图表非常适合展示具有不同数据量级或单位的多个数据集，比如同时展示销售数据与增长率、利润与成本等。
Highcharts 提供了非常灵活的组合图配置方式，以下是如何在一个图表中使用多个系列和不同类型的图表。
1. 基本组合图
以下示例展示了一个简单的组合图，包含柱形图和折线图，分别展示了每月的销售量（柱形图）和利润（折线图）：
Highcharts.chart('container', {
chart: {
type: 'column' // 默认图表类型为柱形图
},
title: {
text: '月度销售量与利润的组合图'
},
subtitle: {
text: '2025年数据'
},
xAxis: {
categories: ['1月', '2月', '3月', '4月', '5月', '6月']
},
yAxis: [{
title: {
text: '销售量'
},
min: 0
}, {
title: {
text: '利润'
},
min: 0,
opposite: true // 将第二个 y 轴放在右侧
}],
series: [{
name: '销售量',
data: [120, 150, 180, 200, 170, 190] // 销售量数据
}, {
name: '利润',
type: 'line', // 设置为折线图
data: [50, 70, 80, 90, 85, 95], // 利润数据
yAxis: 1 // 选择第二个 y 轴
}]
});
2. 多种图表类型组合
Highcharts 允许你组合更多种类型的图表。例如，你可以在一个图表中同时展示柱形图、折线图和区域图。下面是一个同时包含柱形图、折线图和区域图的组合图示例：
Highcharts.chart('container', {
chart: {
type: 'column' // 默认图表类型为柱形图
},
title: {
text: '销售量、利润与增长率的组合图'
},
subtitle: {
text: '2025年数据'
},
xAxis: {
categories: ['1月', '2月', '3月', '4月', '5月', '6月']
},
yAxis: [{
title: {
text: '销售量与利润'
},
min: 0
}, {
title: {
text: '增长率'
},
min: 0,
opposite: true // 将第二个 y 轴放在右侧
}],
series: [{
name: '销售量',
type: 'column',
data: [120, 150, 180, 200, 170, 190] // 销售量数据
}, {
name: '利润',
type: 'column',
data: [50, 70, 80, 90, 85, 95] // 利润数据
}, {
name: '增长率',
type: 'line', // 设置为折线图
data: [5, 6, 7, 8, 6, 7], // 增长率数据
yAxis: 1, // 选择第二个 y 轴
marker: {
symbol: 'diamond' // 设置折线的标记为菱形
}
}, {
name: '区域图',
type: 'area', // 设置为区域图
data: [10, 20, 30, 40, 50, 60], // 区域图数据
yAxis: 1, // 使用第二个 y 轴
fillColor: 'rgba(255, 99, 71, 0.2)' // 设置区域图的填充颜色
}]
});
3. 带有多个 y 轴的组合图
多个 y 轴可以帮助你同时展示具有不同单位和数值范围的数据。以下示例展示了一个组合图，包含三个 y 轴，分别显示销售量、利润和成本：
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: '销售量、利润与成本的组合图'
},
xAxis: {
categories: ['1月', '2月', '3月', '4月', '5月', '6月']
},
yAxis: [{
title: {
text: '销售量'
},
min: 0
}, {
title: {
text: '利润'
},
min: 0,
opposite: true
}, {
title: {
text: '成本'
},
min: 0,
opposite: true,
linkedTo: 1 // 关联第二个 y 轴
}],
series: [{
name: '销售量',
data: [100, 150, 200, 250, 300, 350]
}, {
name: '利润',
type: 'line',
data: [30, 40, 50, 60, 70, 80],
yAxis: 1
}, {
name: '成本',
type: 'line',
data: [20, 30, 40, 50, 60, 70],
yAxis: 2
}]
});
4. 动态更新组合图
与静态图表不同，动态更新组合图可以通过 setInterval() 或 addPoint() 实时更新数据。例如，你可以每秒钟更新销售数据，动态展示不同系列的变化。
var chart = Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: '动态更新的组合图'
},
xAxis: {
categories: ['1月', '2月', '3月', '4月', '5月', '6月']
},
yAxis: [{
title: {
text: '销售量与利润'
},
min: 0
}, {
title: {
text: '增长率'
},
min: 0,
opposite: true
}],
series: [{
name: '销售量',
type: 'column',
data: [120, 150, 180, 200, 170, 190]
}, {
name: '利润',
type: 'line',
data: [50, 70, 80, 90, 85, 95],
yAxis: 1
}]
});
// 每秒钟更新一次数据
setInterval(function () {
var x = (new Date()).getTime();
var y1 = Math.random() * 100;
var y2 = Math.random() * 100;
chart.series[0].addPoint([x, y1], true, true);
chart.series[1].addPoint([x, y2], true, true);
}, 1000);
5. 总结
Highcharts 组合图（Combo Chart）是一个非常强大的功能，适合展示多种类型的数据。通过 series 配置项，你可以灵活地将不同类型的图表（如柱形图、折线图、区域图等）组合在一个图表中，从而同时展示不同数据系列的关系。你还可以通过多个 y 轴来分别显示具有不同单位或量级的数据。
组合图常用于：
- 多种数据的对比展示（如销售与利润）。
- 多维度数据的可视化（如产品销售与市场份额）。
- 不同量级数据的比较（如利润和增长率）。
如果你有其他需求或问题，随时告诉我！
发表回复