从零开始掌握 Highcharts 柱形图，线条图，饼图组合
在数据可视化领域，图表不只是“好看”，更是“说清楚”的关键工具。尤其是当你要展示多维度、多层次的数据时，单一类型的图表往往力不从心。比如，你既想看到每个月的销售趋势，又想对比不同产品的占比，还希望突出某个月的异常值——这时，Highcharts 柱形图，线条图，饼图组合 就成了理想选择。
这就像给一个厨师搭配一桌菜：柱形图是主菜，线条图是汤品，饼图则是甜点。每一种都独立精彩，合在一起则层次分明、营养均衡。
本文将带你一步步构建一个真实的商业数据分析场景：某公司 2023 年各季度的销售额趋势 + 各产品线占比分析。全程使用 Highcharts，代码清晰，注释详细，适合初学者和中级开发者快速上手。
什么是 Highcharts？为什么它适合组合图表？
Highcharts 是一个功能强大、兼容性好的 JavaScript 图表库，支持 20 多种图表类型，包括柱形图、折线图、饼图、面积图等。它的核心优势在于：
- API 简洁：配置项直观，学习成本低；
- 响应式设计：适配手机、平板、PC 多端；
- 可交互性强：支持鼠标悬停、缩放、点击事件；
- 支持组合图表：多个系列可共存于同一图表区域。
想象一下，你有一个“数据画布”，而 Highcharts 就是你的画笔。你可以用它画出柱子、画出曲线、画出圆饼，甚至让它们在同一个画布上“对话”。
准备工作：引入 Highcharts 库
在使用 Highcharts 之前，你需要先引入它的 CDN 文件。这是整个项目的基础。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Highcharts 组合图表示例</title>
<!-- 引入 Highcharts 的 CDN 文件 -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<style>
#container {
width: 100%;
height: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 图表容器 -->
<div id="container"></div>
</body>
</html>
注释说明：
highcharts.js是核心库，必须引入；exporting.js支持导出图表为图片或 PDF；export-data.js支持导出原始数据；#container是图表的“画布”，所有图表将在此渲染。
创建柱形图与线条图的组合
我们先来搭建主图表：柱形图 + 线条图。柱形图展示销售额，线条图展示增长率。
// 初始化图表配置
var chart = Highcharts.chart('container', {
// 图表标题
title: {
text: '2023 年各季度销售趋势分析'
},
// X轴（横轴）标签
xAxis: {
categories: ['Q1', 'Q2', 'Q3', 'Q4'] // 四个季度
},
// Y轴（纵轴）设置
yAxis: {
title: {
text: '销售额（万元）'
},
labels: {
format: '{value}万'
}
},
// 图表类型：这里是组合类型
chart: {
type: 'column' // 默认类型为柱形图
},
// 数据系列
series: [
// 第一个系列：柱形图 - 销售额
{
name: '销售额',
type: 'column', // 柱形图类型
data: [230, 260, 310, 280], // 每季度销售额（单位：万元）
color: '#4CAF50' // 设置绿色，视觉上更友好
},
// 第二个系列：线条图 - 增长率
{
name: '增长率',
type: 'line', // 线条图类型
data: [5.2, 8.7, 12.3, 7.1], // 增长率百分比
color: '#FF5722',
marker: {
enabled: true // 显示数据点
},
yAxis: 1 // 使用第二个 Y 轴（右轴）
}
],
// 右侧 Y 轴（用于增长率）
yAxis: [
{
title: { text: '销售额（万元）' },
labels: { format: '{value}万' }
},
{
title: { text: '增长率（%）' },
labels: { format: '{value}%' },
opposite: true // 右侧对齐
}
],
// 图例位置
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
},
// 工具提示（鼠标悬停时显示）
tooltip: {
shared: true, // 允许多系列共享提示框
formatter: function() {
var s = '<b>' + this.x + '</b><br/>';
// 遍历所有系列，显示对应值
$.each(this.points, function() {
s += this.series.name + ': ' + this.y + '<br/>';
});
return s;
}
}
});
注释说明：
series中的两个对象分别代表两个图表类型；type: 'column'和type: 'line'决定了图表形态；yAxis: 1表示使用第二个 Y 轴（右轴），避免单位混淆；shared: true让提示框同时显示两个系列的数据，体验更佳；formatter自定义提示框内容，提升用户体验。
添加饼图：展示各产品线占比
现在我们想在图表右侧添加一个饼图，显示每个产品在总销售额中的占比。这需要使用 Highcharts 的 pane 和 series 混合模式。
// 在原有配置基础上，新增饼图配置
series: [
// 已有柱形图与线条图
{
name: '销售额',
type: 'column',
data: [230, 260, 310, 280],
color: '#4CAF50'
},
{
name: '增长率',
type: 'line',
data: [5.2, 8.7, 12.3, 7.1],
color: '#FF5722',
marker: { enabled: true },
yAxis: 1
},
// 新增：饼图系列
{
name: '产品线占比',
type: 'pie', // 设置为饼图
data: [
{ name: 'A 型产品', y: 230 },
{ name: 'B 型产品', y: 150 },
{ name: 'C 型产品', y: 120 },
{ name: 'D 型产品', y: 100 }
],
center: ['75%', '50%'], // 设置饼图中心位置（相对容器）
size: '50%', // 饼图大小
showInLegend: true,
legend: {
enabled: true
},
// 饼图样式
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f}%'
}
}
}
}
],
注释说明：
type: 'pie'声明这是一个饼图；center: ['75%', '50%']表示饼图位于容器的 75% 水平位置、50% 垂直位置，与主图表错开；size: '50%'控制饼图大小，避免过大遮挡；dataLabels显示每个扇区的名称和占比，增强可读性；allowPointSelect允许点击扇区，可配合事件使用。
布局优化：使用 pane 实现更优雅的组合
上述方式虽然可行，但布局略显粗糙。更推荐使用 pane 来管理多个图表区域。pane 就像一个“图层管理器”，让你清晰划分主图与子图。
// 添加 pane 配置
chart: {
type: 'column',
// 定义多个图层
panes: [
{
// 主图图层（左上角）
startAngle: 0,
endAngle: 360,
size: '70%'
},
{
// 饼图图层（右上角）
startAngle: 0,
endAngle: 360,
size: '30%',
center: ['75%', '50%']
}
]
},
注释说明：
panes数组定义了多个绘图区域；size控制图层大小；center定义图层中心点，支持百分比定位；- 通过
pane，你可以更精确地控制每个图表的布局，避免重叠或错位。
实际应用建议：何时使用这种组合？
在真实项目中，这种组合非常实用，尤其适合以下场景：
- 企业月度/季度报表（柱形图趋势 + 饼图占比）；
- 用户行为分析（线条图增长 + 柱形图对比）；
- 产品销售分析（柱形图对比 + 饼图拆解）；
小贴士：不要堆砌图表！组合的目的是“讲一个完整的故事”。每个图表都应有明确目的，避免信息过载。
总结：掌握 Highcharts 柱形图，线条图，饼图组合
本文从零开始，带你构建了一个完整的 Highcharts 组合图表方案。你学会了：
- 如何引入 Highcharts 库；
- 如何配置柱形图与线条图的双轴组合；
- 如何添加饼图并精确定位；
- 如何使用
pane管理多图层布局； - 如何通过
tooltip和dataLabels提升可读性。
Highcharts 柱形图，线条图，饼图组合 不仅美观，更强大。它让你的数据不再沉默，而是“会说话”。无论是汇报 PPT 还是后台管理系统，它都能成为你的得力助手。
记住：好的可视化，不是“堆更多图”，而是“讲清楚一件事”。从今天起，用 Highcharts 把你的数据讲得明明白白。