程序员用Python给了女友一个七夕惊喜！

小鱼儿 2022-09-05 00:16 204阅读 0赞

点击上方“**Python爬虫与数据挖掘**”，进行关注

回复“**书籍**”即可获赠Python从入门到进阶共10本电子书

今

日

鸡

汤

烽火连三月，家书抵万金。

--------------------

hi，大家好，我是朱小五![9748c596154680eb4b0044df90f6fc8c.png][]

七夕（*各种节日、纪念日*）又快到啦，程序员（*怎么会不是单身呢*）又要想招来哄女友啦？

想必大家都知道各种各样的代码式浪漫，比如定制的二维码，让女友扫码后进入一个定制的 h5 页面，那么这个页面里可以放的内容是——

![1dbdd5371c08f1ae6ae1d91810130f12.png][] 这个是空的，只是展示一下

回忆，是经典的选项。该如何呈现回忆呢？

不难想到可以用 js 来实现各种动画效果，直接 copy 各种库组合组合是不错，但亲力亲为还是需要经过精心设计，操作起来有一定的难度。

这里给大家提供一个简单的点子，用 python 来制作酷炫的动态条形图，展示你们在一起的历程吧！

例子如下：

![e016ab1765430192f7d25fe4cb80fc31.gif][]

## 一、动态条形图 ##

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

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

![7a639c3e21fc8bac31b68fd4924793b1.png][] ![6b54fd4971362344cf257ec846fbc041.png][]

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

![14e531932ffd50eb9b8f55b6f0ce0cfa.png][]

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

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

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

import matplotlib.pyplot as plt
    
    fig, 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()` 临时查看一下。

![23e2673b0bd690a75fe8a1520a2e5c80.png][]

和最终效果图还有一定的差距，多了坐标轴标签，少了系列标签、数据标注和右上角的滚动时间。继续完善 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 datetime
    
    df = 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~40
            level='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

![21f5dda5e2f2f594934c76687c1aaee5.gif][]

直接放进 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 里让它们显示出来：

![edc573fe0149c4c660778cdbd88ea68b.png][]

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

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

![845e606a50b93c6291be609706851523.gif][]

**注意：** 动图的时长和帧数，以及动图在html中与逐行打印文字同步显示，大家还需根据实际内容对代码进行调整，以达到最佳效果哦！

好了不想写了，快速部署的部分大家自己搜索资料吧... ...

![4642c71f579515e265c1d76ff0f60e2e.png][] 我一抡锤子就敲爆自己

**---\--\---\---\---\--\---** End **---\--\---\--\---\---\--\-**

往期精彩文章推荐：

*  [Python也能操作MongoDB数据库][Python_MongoDB]
 *  [Python也能操作Mysql数据库][Python_Mysql]
 *  [我是如何利用Python下载酷狗音乐的][Python]
 *  [干货文——一文带你搞懂爬虫储存数据库MongoDB][MongoDB]

![71a30d71055d7607bae880d0523ce055.png][]

欢迎大家**点赞，****留言，****转发，转载，**感谢大家的相伴与支持

想加入Python学习群请在后台回复【**入群**】

万水千山总是情，点个【**在看**】行不行

**/今日留言主题/**

随便说一两句吧~~

[9748c596154680eb4b0044df90f6fc8c.png]: /images/20220829/40fe382553294280903676d17e964054.png
[1dbdd5371c08f1ae6ae1d91810130f12.png]: /images/20220829/6eb677c59c5b466db0304ab560ae264b.png
[e016ab1765430192f7d25fe4cb80fc31.gif]: /images/20220829/f3411daa0d794785b8059fa0118f356f.png
[7a639c3e21fc8bac31b68fd4924793b1.png]: https://img-blog.csdnimg.cn/img_convert/7a639c3e21fc8bac31b68fd4924793b1.png
[6b54fd4971362344cf257ec846fbc041.png]: /images/20220829/ab9480ee900642218ffecea8807d0151.png
[14e531932ffd50eb9b8f55b6f0ce0cfa.png]: /images/20220829/a4fe87952c2843509e0e1c074ecab6b1.png
[23e2673b0bd690a75fe8a1520a2e5c80.png]: /images/20220829/b9cba6e427c840cebe27db33aa9be5d2.png
[21f5dda5e2f2f594934c76687c1aaee5.gif]: /images/20220829/616dff439ede4f709eb0e98286d1686c.png
[edc573fe0149c4c660778cdbd88ea68b.png]: /images/20220829/3ee76ee1a3dd47728d7f03660944087b.png
[845e606a50b93c6291be609706851523.gif]: /images/20220829/783b9789bc974a42955494f86b4c4da2.png
[4642c71f579515e265c1d76ff0f60e2e.png]: /images/20220829/e6ceb477c1f541919dc750310db81388.png
[Python_MongoDB]: http://mp.weixin.qq.com/s?__biz=MzU3MzQxMjE2NA%3D%3D&chksm=fcc0b541cbb73c571c90890f88d69abd0aa319f1bb3c787232a6331620af3d9016f8abe5d838&idx=1&mid=2247496554&scene=21&sn=c8112fa2cd60a700195d99af1093ad83#wechat_redirect
[Python_Mysql]: http://mp.weixin.qq.com/s?__biz=MzU3MzQxMjE2NA%3D%3D&chksm=fcc0b4e6cbb73df00abf51cc844ebd684e1a630b44e08dcf3e28f9d89d0b0459dd06dd64d6e0&idx=1&mid=2247496397&scene=21&sn=a2641f5a5f98694b9d6b3bf7781c41e6#wechat_redirect
[Python]: http://mp.weixin.qq.com/s?__biz=MzU3MzQxMjE2NA%3D%3D&chksm=fcc0b4bbcbb73dad7991e3139fa5c47e7ab071fef2848844ed67b684007c8a6cb87276c774c5&idx=1&mid=2247496336&scene=21&sn=6a585e9379b4ee9fe9c345279089eb83#wechat_redirect
[MongoDB]: http://mp.weixin.qq.com/s?__biz=MzU3MzQxMjE2NA%3D%3D&chksm=fcc0b430cbb73d26b6e9b9a403b72edd70a83cc71f62e802614bd7934b2622e3ba49bcc8d96f&idx=1&mid=2247496219&scene=21&sn=8b82e3af2a5d959f861e24005524867a#wechat_redirect
[71a30d71055d7607bae880d0523ce055.png]: /images/20220829/36d57189706d44a7959706ee09ce74b5.png