Highcharts 柱形图，线条图，饼图组合（长文解析）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言：为何需要组合图表？

在数据可视化领域，单一图表类型往往难以完整呈现复杂的数据关系。例如，销售数据可能需要同时展示季度销量（柱形图）、年度趋势（线条图）和市场占比（饼图）。Highcharts 作为功能强大的开源图表库，支持灵活组合多种图表类型，帮助开发者用 “柱形图、线条图、饼图组合” 的方式，将多维度数据浓缩在一个视图中，提升信息传达的效率。本文将从基础配置到实战案例，手把手教你掌握这一技能。

配置基础：理解核心选项

在组合图表之前，需先掌握 Highcharts 的核心配置逻辑。Highcharts 的图表由 chart、title、xAxis、yAxis、series 等关键对象构成，每个对象控制图表的不同部分。例如：

// 基础配置模板
{
  chart: {
    type: 'column', // 默认图表类型（如 column、line、pie）
    renderTo: 'container' // 绑定 HTML 容器的 ID
  },
  title: {
    text: '销售数据对比'
  },
  xAxis: {
    categories: ['Q1', 'Q2', 'Q3', 'Q4']
  },
  yAxis: {
    title: {
      text: '销售额（万元）'
    }
  },
  series: [{
    name: '实际销量',
    data: [29.9, 71.5, 106.4, 129.2]
  }]
}

关键概念解释：

• chart.type：定义图表的默认类型，但可以通过 series.type 覆盖单个系列的类型。
• series：数据系列的集合，每个系列可独立设置图表类型（如 type: 'line'）。

柱形图与线条图的组合：时间序列与趋势分析

场景：销售数据对比

假设需同时展示某产品 季度销量（柱形图） 和 年度平均增长率（线条图），可采用以下步骤：

1. 绑定同一容器：确保所有图表共享同一个 chart.renderTo。
2. 设置双 Y 轴：避免数据量级差异导致图表失真。例如：

yAxis: [{
  title: { text: '销量（件）' },
  opposite: false // 主 Y 轴在左侧
}, {
  title: { text: '增长率（%）' },
  opposite: true // 次 Y 轴在右侧
}]

3. 分配系列到不同轴：通过 yAxis: 0 或 yAxis: 1 指定系列的坐标轴。

series: [{
  name: '销量',
  type: 'column', // 柱形图
  data: [300, 450, 600, 750],
  yAxis: 0
}, {
  name: '增长率',
  type: 'line', // 线条图
  data: [5, 8, 12, 15],
  yAxis: 1
}]

比喻：这就像在乐高积木中，用不同形状的模块（柱形和线条）搭建同一座“数据大厦”，通过轴的分离避免“比例失衡”。

饼图与柱形图的组合：占比与总量的协同

场景：市场份额与区域销售

假设需对比某品牌 各区域市场份额（饼图） 和 区域总销量（柱形图），可按以下思路实现：

1. 创建主容器：将饼图和柱形图分开展示，但保持视觉关联。例如：

<div class="chart-container">
  <div id="column-chart" style="width: 60%; float: left;"></div>
  <div id="pie-chart" style="width: 40%; float: right;"></div>
</div>

2. 独立配置图表：通过不同的 renderTo ID 分别初始化柱形图和饼图。

// 柱形图配置
Highcharts.chart('column-chart', {
  chart: { type: 'column' },
  // 省略其他配置...
});

// 饼图配置
Highcharts.chart('pie-chart', {
  chart: { type: 'pie' },
  // 省略其他配置...
});

技巧：通过 CSS 布局（如 float 或 Flexbox）控制图表位置，确保整体排版协调。

三图表组合：多维度数据的终极整合

场景：用户行为分析

若需同时展示 用户活跃度（柱形图）、转化率趋势（线条图） 和 渠道占比（饼图），可采用以下进阶方案：

1. 主图表嵌套：在柱形图中叠加线条图，饼图作为独立副图表。
2. 联动交互：通过 plotOptions.series.point.events.click 实现点击饼图切片时，主图表动态筛选数据。

// 主图表配置（柱形+线条）
Highcharts.chart('main-chart', {
  // ...其他配置
  series: [{
    type: 'column',
    data: [120, 150, 180, 200]
  }, {
    type: 'line',
    data: [0.15, 0.22, 0.18, 0.25]
  }]
});

// 副图表配置（饼图）
Highcharts.chart('pie-chart', {
  // ...其他配置
  series: [{
    type: 'pie',
    data: [
      { name: '渠道A', y: 45 },
      { name: '渠道B', y: 30 },
      { name: '渠道C', y: 25 }
    ]
  }]
});

比喻：这如同交响乐团中的不同乐器——柱形图是铜管组的“基础节奏”，线条图是弦乐组的“旋律走向”，饼图则是打击乐的“节奏强化”，共同演奏出完整的数据故事。

实战案例：电商销售分析面板

案例需求

假设需要为电商平台设计一个数据面板，需包含以下图表：

1. 柱形图：月度订单量对比。
2. 线条图：月度 GMV（总成交额）趋势。
3. 饼图：商品类目占比。

步骤 1：HTML 结构搭建

<div class="dashboard">
  <div class="chart-row">
    <div id="order-chart" style="width: 70%;"></div>
    <div id="category-pie" style="width: 30%;"></div>
  </div>
  <div class="chart-row">
    <div id="gmv-chart" style="width: 100%;"></div>
  </div>
</div>

步骤 2：配置订单量与 GMV 图表

// 订单量柱形图（含 GMV 线条图）
Highcharts.chart('order-chart', {
  chart: { type: 'column' },
  xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr'] },
  yAxis: [{
    title: { text: '订单量（万单）' }
  }, {
    title: { text: 'GMV（亿元）' },
    opposite: true
  }],
  series: [{
    name: '订单量',
    data: [8.5, 9.2, 10.1, 11.5]
  }, {
    name: 'GMV',
    type: 'line',
    yAxis: 1,
    data: [0.8, 0.9, 1.1, 1.3]
  }]
});

// GMV 独立趋势图（可选）
Highcharts.chart('gmv-chart', {
  chart: { type: 'line' },
  title: { text: '季度 GMV 趋势' },
  // 其他配置...
});

步骤 3：商品类目饼图

Highcharts.chart('category-pie', {
  chart: { type: 'pie' },
  title: { text: '商品类目占比' },
  series: [{
    name: '类目',
    data: [
      { name: '电子产品', y: 45 },
      { name: '服饰', y: 25 },
      { name: '家居', y: 20 },
      { name: '其他', y: 10 }
    ]
  }]
});

进阶技巧：样式优化与交互增强

1. 颜色与透明度

通过 colors 数组统一配色，或为饼图切片设置 colorByPoint 自动分配颜色：

Highcharts.setOptions({
  colors: ['#2b908f', '#f2777a', '#f3c305', '#64c0eb']
});

2. 数据标签与提示框

在饼图中启用数据标签，使占比信息更直观：

plotOptions: {
  pie: {
    dataLabels: {
      enabled: true,
      format: '<b>{point.name}</b>: {point.percentage:.1f} %'
    }
  }
}

3. 响应式设计

通过 responsive 配置适配移动端：

responsive: {
  rules: [{
    condition: { maxWidth: 600 },
    chartOptions: {
      chart: { type: 'line' }, // 移动端切换为单图表类型
      yAxis: { title: { text: '' } }
    }
  }]
}

结论：组合图表的价值与未来方向

通过 Highcharts 的 柱形图、线条图、饼图组合，开发者能够将原本分散的数据关联起来，帮助用户快速抓住核心信息。例如，在电商场景中，决策者可通过一张面板同时掌握销量、趋势和类目分布，避免在多个图表间来回切换。

未来，随着交互式数据可视化的需求增长，组合图表将进一步结合动态筛选、实时数据更新等技术，例如通过 addSeries 方法动态加载新数据，或通过 exporting 模块实现一键导出。掌握这一技能，将助你在数据驱动的决策中占据先机。

最后提醒：实践是关键！建议读者从简单的组合开始，逐步尝试更复杂的场景，例如将地图图表与柱形图结合，或添加热力图作为背景层。祝你在数据可视化的道路上越走越远！