一、动态条形图

首先，不妨猜想一下这个是如何实现的。动画即是一帧一帧静态画面的连续播放，所以我们只需要将每一天都画一次图，再拼成 GIF 即可。

如下为第一天和最后一天的条形图：

再来看一下用于画图的每日数据，假设2020年1月1日为起始日期，1月20日为当天（即发布供检阅的）日期，故要对这些数据画20次图（别怕，兄dei）。

进入代码环节：先按需求读取数据（读表最爱的 pandas 库又出现啦）。为了便于处理日期，将 excel 中的日期一列的值转为字符串格式，再利用 datatime 将起始日期设为时间戳格式。

import pandas as pd
import datetimedf = pd.read_excel("数据.xlsx")
df['日期文本'] = df['日期'].apply(lambda x: str(x)[:10])
t = datetime.datetime(2020,1,1) # 起始日期

选择 matplotlib 库进行绘图：先设置画布，返回模型和画图对象。接着不要忘记设置字体以避免中文显示异常。因为有3个项目需要区分上色，因此再创建一个颜色列表，可以自行百度喜欢的颜色代码。

import matplotlib.pyplot as pltfig, ax = plt.subplots(figsize=(10,6)) # 画布
plt.rcParams['font.sans-serif'] = ['Microsoft YaHei'] # 字体设为微软雅黑
colors = ['#ADD8E6', '#DC143C', '#FFC0CB'] # 颜色列表

编写绘图函数：传入的参数是对于起始日期所经过的天数。通过 t + datetime.timedelta(days=date) 计算需要绘制的指定天数的日期，再利用 strftime("%Y-%m-%d") 将其还原为日期文本，然后通过该日期文本取出当天的数据存入新的 df_ 中。下一步即为通过 barh 方法绘制条形图，且每次画新图前需清空上一次的图像。

def draw(date):# 数据处理 ------current_date = (t + datetime.timedelta(days=date)).strftime("%Y-%m-%d")df_ = df[df['日期文本'].eq(current_date)]days = df_['天数']item = df_["项目"]# 绘制条形图 ------ax.clear() # 重绘# for i in range(1,len(itme.uni))ax.barh(item, days, color = colors)

如此之后，调用 draw(19) 来画出经过19天后，也就是第20天的图像，通过 plt.show() 临时查看一下。

和最终效果图还有一定的差距，多了坐标轴标签，少了系列标签、数据标注和右上角的滚动时间。继续完善 draw 函数：

for y, (x,name) in enumerate(zip(days.values,item.values)): # 系列标注ax.text(x, y, "%s" % x, size=12)if x > 1:ax.text(x-0.5, y, name, size=14, ha = 'right')
ax.text(1, 1.01, current_date, transform = ax.transAxes, size= 20, ha='right') # 滚动时间
ax.get_xaxis().set_visible(False) # 隐藏坐标轴
ax.get_yaxis().set_visible(False)

接下来就是用 for 循环画出20张图并通过 plt.savefig('xxx.png') 一一保存，再使用 imageio 库或其他图像工具来合成 gif 啦！

（不不不，慢着慢着）如果真要这样做就太麻烦了，下面该祭出这次的主角了！

import matplotlib.animation as ani

matplotlib 库提供了动态绘图的模块，可以帮助我们更加轻松的制作 gif。只需传入模型、绘图函数、和一个 int 类型的列表即可，因此最初设计 draw 函数时所需的参数是天数 date。interval 参数为绘制每张图的时间间隔，用于在 plt.show() 中检查效果。最终保存 gif 图像时可以通过 fps 参数设置帧数。

timeSlot = [x for x in range(0,20)] # 时间轴
animator = ani.FuncAnimation(fig, draw, frames=timeSlot ,interval = 100)
animator.save('test.gif',fps=10)

附完整代码：

import matplotlib.pyplot as plt
import matplotlib.animation as ani
import pandas as pd
import datetimedf = pd.read_excel("数据.xlsx")
df['日期文本'] = df['日期'].apply(lambda x: str(x)[:10])
t = datetime.datetime(2020,1,1) # 起始日期
fig, ax = plt.subplots(figsize=(10,6)) # 画布
plt.rcParams['font.sans-serif'] = ['Microsoft YaHei'] # 字体设为微软雅黑
timeSlot = [x for x in range(0,20)] # 时间轴
colors = ['#ADD8E6', '#DC143C', '#FFC0CB'] # 颜色列表def draw(date):print(date)# 数据处理 ------current_date = (t + datetime.timedelta(days=date)).strftime("%Y-%m-%d")df_ = df[df['日期文本'].eq(current_date)]days = df_['天数']item = df_["项目"]# 绘制条形图 ------ax.clear() # 重绘ax.barh(item, days, color = colors)for y, (x,name) in enumerate(zip(days.values,item.values)): # 系列标注ax.text(x, y, "%s" % x, size=12)if x > 1:ax.text(x-0.5, y, name, size=14, ha = 'right')ax.text(1, 1.01, current_date, transform = ax.transAxes, size= 20, ha='right') # 滚动时间ax.get_xaxis().set_visible(False) # 隐藏坐标轴ax.get_yaxis().set_visible(False)# draw(19)
# plt.savefig('test.png')
animator = ani.FuncAnimation(fig, draw, frames=timeSlot ,interval = 100) # interval时间间隔
plt.show()
# animator.save('test.gif',fps=10)

二、定制二维码

不解释！（看注释）直接上代码：

from MyQR import myqr # 需先安装MyQR库def QR_myqr():myqr.run('https://', # 二维码指向链接，或无格式文本（但不支持中文）version = 5, # 大小1~40level='H', # 纠错级别picture = 'img.jpg', # 底图路径colorized = True, # 彩色contrast = 1.0, # 对比度brightness = 1.0, # 亮度save_name = 'save.jpg', # 保存文件名save_dir = 'D:/' #保存目录)

三、编写静态html页面

如果需要通过二维码来访问你的网站，那就需要先将其部署到服务器，方法也是多种多样的，比如某企鹅云，个人用户有6个月的免费时长。我们在这里要介绍的是 github（其实是因为我公司的电脑不能上外网，测试的时候用不了企鹅云才用的 github，国内手机访问还是放在国内的服务器比较快，大概是的）

（嗯？就算你问上不了外网却能上 github 我也…大概是限制的网段没覆盖到吧哈哈）

（嗯？我在公司划水的事情暴露了吗）。

不过在那之前，先把本地的 html 写好吧！

通过开头的最终（不是最终的）效果图可以发现，gif 是首尾相接循环播放的，那最后一天的图像一下子闪过去就看不清楚了，可以修改一下传入的时间序列，把最后一幅图再画多几遍，就有停留的效果了。为了更好地展现效果，下面的图中所用数据的时间周期改为了从6月1日到8月25日（七夕），经过了86天，并增加了两条项目。

timeSlot = [x for x in range(0,86)]+[85]*15

直接放进 html 页面里，就单单一张图好像还缺了点什么，那就跟随动图的节奏在下方打印文字吧。首先设置两个 div 的样式，一个用于展示 gif，一个用于打印文字：

<head>
<style>.process_gif{  /*显示动态barh*/background-image:url("./process.gif");background-repeat: no-repeat;background-size: cover;margin:0 auto;width: 370px;height: 220px;position: relative;z-index: 1;}.show_txt{  /*显示文字*/margin:0 auto;background-color: azure;width: 370px;height: 200px;position: relative;text-align: center;padding-top: 10px;z-index: 1;}
</style>
</head>

然后在 body 里让它们显示出来：

<body><div class="process_gif" id="process"></div> <div class="show_txt" id="content_1"></div>
</body>

编写 js 脚本实现打印功能，在页面加载时就调用打印函数 typing，并且在动态图播放到最后一幅时，将其替换成静态图：

<script type="text/javascript">/// 显示文字功能 ----------------------------------let divTyping = document.getElementById('content_1'); //通过id获取div节点let a = 0;timer = 0;str = "我们已经相遇 20 天<br>告白后过了 13 天<br>First Kiss 至今 5 天";function typing () {if (a <= str.length) { # 从第一个字开始逐个打印divTyping.innerHTML = str.slice(0, a++) + '_';timer = setTimeout(typing, 50); # 设置打印时间间隔}else {divTyping.innerHTML = str; //结束打字,移除 _ 光标clearTimeout(timer);}}window.onload=function(){typing();setTimeout(function(){thisdiv = document.getElementById("process");thisdiv.style.backgroundImage = "url('./process_stop.png')"; # 将div背景图替换},2000); # 单位是毫秒，根据动态图的时长来设置}
</script>

来看一下，真的是真的.真.最终效果图：

PS：如有需要Python学习资料的小伙伴可以加下方的群去找免费管理员领取

可以免费领取源码、项目实战视频、PDF文件等

本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。

作者：凹凸数据

七夕快到了，作为一个程序员，怎么可能不给女朋友一个惊喜呢相关推荐

漫画 | 没有一个程序员能拒绝这样的女朋友
今天这篇漫画讲述的是王大拿加班到很晚,回到家后,与温柔贴心的女朋友发生的一系列暧昧故事- 本期漫画情节纯属虚构如有雷同,纯属巧合. 编后忙碌而又枯乏的日子,越来越卷的行业,每天的两点一线的生活,独 ...
前端程序员用css动画给女朋友一个惊喜
成品具体步骤 1: 在百度上随便找一张喜欢的图片,最好是爱心树的样子. 2: 利用ps软件,抠图扣出其中的一片叶子 3: 然后写代码,将爱心树设置为页面背景 *{margin: 0;padding: ...
论一个程序员的编程修养（你品，你细品）
论一个程序员的编程修养转自:陈浩芯片之家作者:陈浩来源:嵌入式云IOT技术圈什么是好的程序员?是不是懂得很多技术细节?还是懂底层编程?还是编程速度比较快?我觉得都不是.对于一些技术细节来说和 ...
主人公的出场—一个程序员的成长史(1)
(大家好,从今天起,我的微信公众号(logiczhou)会连续推送<窗内窗外-一个程序员的成长史>系列.本系列以我本人从学校到职场的经历为原型,同时结合了我对软件开发工作.程序员的学习和生 ...
作为一个程序员必备的素质
程序员是一种技术工作,在IT的发展中有相当重要的地位,从底层硬件通讯协议的建立,到数据传输层的处理,到操作系统的建设,到数据库平台的建设,一直到应用层上各种数据营销平台的搭建,程序员在里面都扮演着举足 ...
一个程序员的基本素养（转载）
http://tieba.baidu.com/p/558357582 一个程序员的基本素养(转载) 程序员是一种技术工作,在IT的发展中有相当重要的地位,从底层硬件通讯协议的建立,到数据传输层的处理, ...
如何看待“我有个绝妙的idea就差一个程序员来实现了”？
原文链接如何看待"我有个绝妙的idea就差一个程序员来实现了"? 发布时间:2017-07-03 10:56:34238人关注17人参与我有一个想法,如果给我一个程序员,我觉得 ...
有一个程序员女朋友是怎么样的一种体验？
许多人提到女程序员是不是就想到理工女.低情商.不懂生活.不爱化妆这种形象? no no no !! 请不要给我们的女同行贴上这样的标签! 我通过自己的经验以及同行女性还有网上看到各种文章视频总结了这篇 ...
如何评价一个程序员的好坏
想写这篇博客很久了,但一直没时间,觉得自己技术还差的太多,拼命累积代码量,这件事一拖就是好久...今天终于下定决心,把自己心里一直以来的结打开.于是写下了这篇博客,由于自己的经验有限,在写之前特地了解 ...
笑岔气！一个程序员的水平能差到什么程度?
" 最近,知乎上有一则灵魂拷问"一个程序员的水平能差到什么程度?"让各位程序员们纷纷有感而发.小编精选了两个有趣的高赞回答只为抛砖引玉,欢迎大家说出你的故事! 作者:Be ...

七夕快到了，作为一个程序员，怎么可能不给女朋友一个惊喜呢

一、动态条形图

二、定制二维码

三、编写静态html页面

七夕快到了，作为一个程序员，怎么可能不给女朋友一个惊喜呢相关推荐

最新文章

热门文章