异常教程
Highcharts 双Y轴, 柱形图，线条图组合（超详细）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 双Y轴、柱形图与线条图组合的图表形式，能有效解决单一坐标轴的局限性。例如，企业可能需要同时观察销售额（单位：万元）与利润率（百分比），或分析温度（摄氏度）与降水量（毫米）的季节变化。本文将从零开始，逐步讲解如何用 Highcharts 实现这一组合图表，帮助开发者快速掌握核心逻辑与实践技巧。
基础概念与原理
双Y轴的必要性
双Y轴的核心作用是 “分离不同量纲的数据”。想象一个场景：某公司销售团队需要同时展示月销售额（数值范围 100,000 至 500,000 元）和客户满意度（百分比 0% 至 100%）。若两者共用一个Y轴，客户满意度的波动会被销售额的绝对值“淹没”。双Y轴如同在图表两侧放置两把“不同刻度的尺子”，让数据对比更清晰。
柱形图与线条图的互补性
柱形图擅长展示离散数据的总量（如月度销售额），而线条图适合表现连续数据的趋势（如利润率变化）。两者的组合，如同用“柱子”标记关键节点，用“线条”勾勒整体走向，形成“量”与“势”的双重表达。
实战步骤：从零搭建双Y轴图表
步骤1：环境准备
在 HTML 文件中引入 Highcharts 的核心库：
<script src="https://code.highcharts.com/highcharts.js"></script>
步骤2：基础 HTML 结构
创建一个容器元素，用于承载图表：
<div id="container" style="width: 100%; height: 400px;"></div>
步骤3：配置双Y轴的核心代码
以下是完整的 Highcharts 配置代码示例：
Highcharts.chart('container', {
chart: {
type: 'column' // 默认图表类型为柱形图
},
title: {
text: '销售额与利润率分析'
},
xAxis: {
categories: ['一月', '二月', '三月', '四月', '五月'] // X轴分类标签
},
yAxis: [{ // 第一个Y轴（左轴）
title: {
text: '销售额（万元）'
},
labels: {
format: '{value}万' // 格式化标签显示
}
}, { // 第二个Y轴（右轴）
title: {
text: '利润率（%）'
},
opposite: true, // 设置为右侧显示
labels: {
format: '{value}%'
}
}],
series: [{ // 第一个数据系列（柱形图，绑定左轴）
name: '销售额',
type: 'column',
data: [120, 150, 180, 140, 200],
yAxis: 0 // 指定使用第一个Y轴
}, { // 第二个数据系列（线条图，绑定右轴）
name: '利润率',
type: 'spline', // 线条图类型
data: [25, 30, 28, 35, 40],
yAxis: 1 // 指定使用第二个Y轴
}]
});
关键配置项详解
1. yAxis 数组的结构
Highcharts 的双Y轴通过 yAxis 数组实现。第一个元素（索引 0）对应左侧轴，第二个元素（索引 1）对应右侧轴。每个轴的 opposite 属性控制其位置：
yAxis: [{
...左侧轴配置
}, {
opposite: true, // 右侧轴
...右侧轴配置
}]
2. 系列（Series）的绑定逻辑
每个数据系列通过 yAxis 属性指定其绑定的轴。例如：
series: [{
yAxis: 0, // 绑定左侧轴
}, {
yAxis: 1 // 绑定右侧轴
}]
3. 数据格式与类型选择
- 柱形图数据：以数组形式直接提供数值，如
[120, 150, 180]。 - 线条图数据：同样为数值数组，但需注意数据点需与 X轴的分类一一对应。
- 类型切换：通过
type属性定义图表类型：column：柱形图spline：平滑线条图line：直线图
实际案例：气象数据分析
案例背景
假设需要展示某城市一年内每月的平均气温（℃）与降水量（毫米）：
| 月份 | 气温（℃） | 降水量（mm） |
|--------|------------|--------------|
| 一月 | -5 | 20 |
| 二月 | 0 | 25 |
| 三月 | 8 | 40 |
| 四月 | 15 | 55 |
| 五月 | 22 | 80 |
完整代码实现
Highcharts.chart('weather-container', {
chart: {
type: 'column'
},
title: {
text: '某城市气候数据'
},
xAxis: {
categories: ['一月', '二月', '三月', '四月', '五月']
},
yAxis: [{
title: { text: '气温（℃）' },
labels: { format: '{value}℃' },
min: -10 // 设置Y轴起始值
}, {
title: { text: '降水量（mm）' },
opposite: true,
labels: { format: '{value}mm' },
min: 0
}],
series: [{
name: '气温',
type: 'spline',
data: [-5, 0, 8, 15, 22],
yAxis: 0,
color: '#058DC7' // 蓝色线条
}, {
name: '降水量',
type: 'column',
data: [20, 25, 40, 55, 80],
yAxis: 1,
color: '#50B432' // 绿色柱形
}]
});
效果解析
- 左侧轴：展示气温的波动，范围从 -10℃ 到 25℃，用蓝色线条图体现趋势。
- 右侧轴：展示降水量，以绿色柱形突出各月的降水总量。
- 交互功能：鼠标悬停时，会同时显示两个数据系列的值，便于对比。
进阶技巧与常见问题
技巧1：自定义轴样式
通过 lineWidth、lineColor 和 tickLength 调整轴的外观：
yAxis: [{
lineWidth: 2,
lineColor: '#FF0000',
tickLength: 5 // 刻度线长度
}, {
// 右轴配置
}]
技巧2：动态数据绑定
若需实时更新数据（如从 API 获取），可修改 series.data 后调用 chart.redraw()：
// 假设 data1 和 data2 是新获取的数据
chart.series[0].setData(data1);
chart.series[1].setData(data2);
chart.redraw();
常见问题：轴标签重叠
当双Y轴的标签过长时，可通过 labels.x 和 labels.y 调整位置，或启用 tickInterval 控制刻度间隔：
yAxis: [{
labels: {
x: -10, // 向左偏移10像素，避免重叠
y: 5
},
tickInterval: 10 // 每10个单位显示一个标签
}]
总结
通过本文的讲解，开发者可以掌握 Highcharts 双Y轴、柱形图与线条图组合 的核心配置逻辑，并通过实际案例理解如何将不同数据类型可视化。这种图表形式在商业分析、气象预测等领域具有广泛的应用价值。建议读者在实践时，逐步调整颜色、字体和交互效果，让图表既专业又具可读性。掌握这些技能后，可进一步探索 Highcharts 的 3D 效果、导出功能或与后端框架（如 React、Vue）的集成，拓展数据可视化的边界。