当前位置：网站首页 > 技术文章 > 正文

超实用!带上下箭头增幅对比条形图教程来啦

myzbx 2025-07-23 16:44 17 浏览

Hello大家好，我是景歌，今天跟大家分享一款带箭头的增幅对比条形图，如下图所示：

图表呈条形状，对比增幅用上下箭头呈现，正增长用蓝色朝上箭头、负增长用红色朝下箭头，数据增长一目了然。

图表适用于两个系列的对比分析，当类别比较多的时候，采用此图，可以有效节省横向空间，适合于纵向排版。

下面一起看看它的制作方法。

制图数据源

图表由常规条形图+散点图制作而来，所以我们需要准备散点图的数据源。

下图中A-D列为原始数据源，E-I列为辅助数据源。

E列为散点图的Y轴，它的值只需要记住一点，等于类别的个数（6）减去0.5，然后依次递减1即可。

F-G列主要是用于定位顶部箭头的位置，它的值要比系列值都要大，所以常规公式为：

F2=IF(D2>=0,MAX($B:$C)*1.3,NA())
G2=IF(D2<0,MAX($B:$C)*1.3,NA())

至于H-I列用于制作正负增幅的标签，正增幅放到H列，负增幅放到I列。

数据源梳理完毕，下面进入制作图表环节。

插入条形图

选中A-C列，插入簇状条形图，如下所示：

由于默认的条形图类别的顺序与数据源是相反的，为了保持一致性，这里需要设置逆序类别，界面如下所示：

条形图制作完毕，下面插入散点系列。

插入散点图

首先右键图表，点击【选择数据】，在弹出界面中，添加一个新的系列，名称随意输入（后续二次修改）：

这里新增的散点系列，仍然是条形图，所以我们需要右键【更改系列图表类型】，在设置界面，把新增加进入的散点系列修改为散点图，图表会默认把它放到次坐标轴上：

回到图表，再次右键【选择数据】，编辑散点系列的名称及数据源，名称修改为【正增长】，X值选择F列、Y值选择E列，如下所示：

接着我们继续新增一组散点系列，把负增长系列添加进来，数据选择如下：

随后点击确定，回到图表，可以看到如下样式：

至此，图表只剩最后一步，如何把散点变成上下的箭头？

添加上下箭头

上下标签用到标记点的填充功能，标记点在上面我们已经定位好了。

接着在插入-形状里面，找到箭头，修改其填充色、旋转角度，制作2个分别朝上与朝下的箭头，如下所示：

复制蓝色箭头，找到“正增长”标记点，Ctrl+C，粘贴上蓝箭头，接着复制红色箭头，找到“负增长”标记点，Ctrl+C，粘贴上红箭头：

这样我们就完成了箭头的添加。

如果是WPS软件，可能不支持直接的复制粘贴，可以在复制完之后，设置标记点格式，找到【图片或纹理填充】，选择“剪贴板”即可。

添加数字标签

数字标签的添加就非常简单了，利用单元格中的值，框选制作好的正负标签即可：

标签添加完毕，剩下的就是美化图表操作，删除网格线、隐藏坐标轴等基本操作，这里不再赘述。

动态更新的模板

这个图表已经放入小白模板库【编号48】，只需要粘贴好数据，图表便可自动调整，不论数据是增多or减少，都会一键自动调整，WPS&Excel通用模板。

我是景歌，以上就是今天的分享，希望对你有帮助，我们下期再见~

JS 箭头函数

上一篇：为何大厂内部都在避免使用 JavaScript 箭头函数?
下一篇：停止滥用箭头函数:这5个场景请务必使用 function

超实用!带上下箭头增幅对比条形图教程来啦

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

20个免费音乐音效下载网站，无版权素材商业影片也可用