这种动态条形图+折线图怎么做？今天我来教你！

ゝ一世哀愁。 2022-11-08 14:27 372阅读 0赞

![adf6c26ce38556e3f2cd3b8e55c00ca2.png][]

大家好，我是小五????

前几天我看了一个不到2分钟的视频，动态展示了我国的GDP增长。而且是动态条形图和折线图叠加一起使用，比较少见！然后我立了一个Flag，说要仿制。

![0df4aba6872c52b19579b1dbf907d9e0.png][]

本来当天就找了合适的方法，并简单仿制了出来。不过要写成文章的话，要各种截图录动图，还要加亿点点细节，所以就又拖了两天。然后做好了视频还要漫长的审核，摊手。![3832a513280383662b73cc0c9ff8e2b6.png][]

吐槽完毕，下面开始正文：

## 原视频细节 ##

我又把原视频贴出来了哈，毕竟有小伙伴之前可能没看过。

其实它标题应该叫《中国GDP增长动态图，小红线，向上攀！》

这个动态图主要由两部分构成，即`动态条形图`和`动态折线图`，而且从图层来说的话，折线图应该在下方。两者都表现的是我国GDP的增长动态，不过折线图是1953-2020年，动态条形图则是从1961年才开始出现。

![7b976cc035a5b82606d45e4d64e46542.png][]

不知道大家注意没有，两张图的**统计单位**其实并不一致，动态条形图是跟国外其他国家对比，所以统一用的都是美元。而我们单独的GDP动态折线图单位是人民币。

## 操作过程 ##

第一步，先获取数据????

### 获取数据 ###

涉及GDP的数据可以直接去国家统计局直接下载

![6b8a197459ba30118482ec7eadd54de2.png][]

大家可以直接在「凹凸数据」后台回复“动态图”获取下载好的数据。

在之前的文章的中，我曾经教大家用[Flourish][]来制作动态折线图，但这次需要两个图层叠一起。

于是我想到了国内的另一个可视化网站——镝数，可以编辑它的数据图文实现将两个动态图叠在一起。

### 镝数可视化 ###

打开官网????https://dycharts.com/

新建数据图文，调整画布合适的长宽比

![f9ff77aeaad03707756dfb49951e7854.gif][]

在数据图文中先插入了动态折线图模板，具体操作如下

![7e666939eeef173f0b635ec01bbd0002.gif][]

然后我们还得改**亿点点细节**，有点多，我就不一一录gif了。这里给大家截图几个关键点，后面自己看情况调节吧。

![f41dcee9760d860bd9c2bdbb0253d7c1.png][]

通过上述操作，就做好了一个动态折线图了：

![e74a3c2e904396952dcb4c660a0de0f7.gif][]

在刚刚的基础上，我们再添加一个动态条形图。比较开心的就是它默认的动态条形图，正好就是各国GDP的增长动态，这也就是说——不用我们再去自行添加数据了。

![0d55e2ad78377b77bc95f7474aa95fd0.gif][]

????查看上图即可看到，两图叠加后就和原视频很相像了。只需我们添加更多细节，比如调整两者尺寸和位置，更改动态条形图各国的颜色等等

![c167fb600bf91e3913f562076127f6df.png][]

如果大家想要与原视频颜色保持一致的话，可以查看下表，小五直接用调色板挨个选取各国的颜色（都是为了仿制的更像呀）

对了，还有就是原视频两个图是间隔出现的，这里我建议两个图延迟间隔5秒????

![83c6ac4c0150b45a626fc83bae7f8fcd.png][]

通过修改细节，可以使我们的可视化图表与原视频更像。这时候就可以点击分享预览，方便我们下一步操作。

![897afa7cff6cabc8c64a8ee03eb4097d.png][]

打开预览链接????https://dycharts.com/xshow/index.html?id=32c1ae96b16d7c34d5dc325fbfb3d825

![05f2dea10ba9b4dff45849a817ff4b51.gif][]

????上方就是刚刚预览链接打开后样子，同时启动两个动态图就可以获得跟原视频几乎一样的效果啦！

> 注：还记得刚刚我们设置延迟时间嘛，正是为了方便我们用软件录屏呀????

### 制作视频 ###

小五用录屏软件截取了需要的视频部分，随便选一个剪辑软件加个BGM即可。

这个不重要，我其实是用手机剪的，2分钟就能做好。

![c7bf50f3a4145e5ea2bb5476063f2210.png][]

提醒大家一下，原视频的BGM是《**Victory**》。

它也是比较常见用来动态可视化的BGM，毕竟这可是十大气势背景音乐之一呀！气势磅礴的旋律，足以征服听众的内心。

最后，让你们看一下小五简陋的“仿品”吧

如果大家想直接下载GDP数据，可以在「**凹凸数据**」后台回复“**动态图**”来获取数据。

![81ecbaacdb094ad8e90e2c14477c8d0a.gif][]

以上就是小五给大家分享的教程啦，如果觉得有用，就给本文????右下角点个赞吧~

周末福利

介绍一本新书????《**R语言数据分析、挖掘建模与可视化**》本书循序渐进地介绍R语言在数据分析与挖掘中的应用，涵盖数据分析与挖掘的常规流程，如数据预处理（清洗、整合与运算等）、数据可视化（离散型与连续型数据的绘图姿势）、数据建模（十大数据挖掘模型的应用）等内容。点击下图可看详情/购买！????

![d7a5a559efefafb1072598166647677a.png][]

感谢清华大学出版社的赞助与支持！**明日**限时400币兑换！

[adf6c26ce38556e3f2cd3b8e55c00ca2.png]: /images/20221023/1a57bb0ed26c456da8cc8b788c929c49.png
[0df4aba6872c52b19579b1dbf907d9e0.png]: /images/20221023/9fd4082f13c14570a76e5f509d950f72.png
[3832a513280383662b73cc0c9ff8e2b6.png]: /images/20221023/1f2f28faa3994d888c5e434297f5ddcd.png
[7b976cc035a5b82606d45e4d64e46542.png]: /images/20221023/fd25377770fb4b09a80877a6f9abdafb.png
[6b8a197459ba30118482ec7eadd54de2.png]: /images/20221023/e056071089fd40469bd111c9ba848c11.png
[Flourish]: https://mp.weixin.qq.com/s?__biz=MzU5Nzg5ODQ3NQ%3D%3D&chksm=fe4d20f3c93aa9e586858e3acd4868668c1257d55a28520505672d77b103f8507c5f97d9e19c&idx=1&mid=2247484791&scene=21&sn=e4187e4245be98c7c51f05604c61ed6b#wechat_redirect
[f9ff77aeaad03707756dfb49951e7854.gif]: /images/20221023/016f21c5c28b4ac48e05d46cadf799d8.png
[7e666939eeef173f0b635ec01bbd0002.gif]: /images/20221023/a7eed98d3b5e4e39a1aafa6e98f6ba33.png
[f41dcee9760d860bd9c2bdbb0253d7c1.png]: /images/20221023/361894a687da461397857063f5d2ce15.png
[e74a3c2e904396952dcb4c660a0de0f7.gif]: /images/20221023/64c820ee61f1413198dc68bc4504192c.png
[0d55e2ad78377b77bc95f7474aa95fd0.gif]: /images/20221023/ab7850be8c544c039fbfb923151b1609.png
[c167fb600bf91e3913f562076127f6df.png]: /images/20221023/a0639540e0ef4f898727354f4018868b.png
[83c6ac4c0150b45a626fc83bae7f8fcd.png]: /images/20221023/5ea95f99325c49ada28672c3b96db295.png
[897afa7cff6cabc8c64a8ee03eb4097d.png]: /images/20221023/1d2ff3c375c44c0183aa847762332cca.png
[05f2dea10ba9b4dff45849a817ff4b51.gif]: /images/20221023/77f23edc448645b0bd02a29edd3d6e0b.png
[c7bf50f3a4145e5ea2bb5476063f2210.png]: /images/20221023/766e0998c70f4a31b778f77406247559.png
[81ecbaacdb094ad8e90e2c14477c8d0a.gif]: /images/20221023/74e317df1d77445aadb21dca2a7a1ee2.png
[d7a5a559efefafb1072598166647677a.png]: /images/20221023/7b7403d9c343430abbb133c399240325.png