上面的兩個動圖，就是條形競賽圖和折線競賽圖，今天我們就來看看都有哪些方便的方法來制作呢

在線制作

有很多在線的網站都可以制作上述類似的競賽圖，下面我們來介紹蘿卜哥常用的兩個

flourish

首先推薦一個國外的網站 -- flourish，該網站可以在線制作大量精美的圖表，其中動圖圖表尤為強大

有大量的例子供我們選擇

還有如下條形競賽圖例子，是不是很驚艷

條形競賽圖也是完全支持的，下圖就是制作頁面，我們可以上傳數據，并自由的設置圖表的各項參數

唯一美中不足的就是導出動圖需要付費，不過對于日常學習的我們來說，靠著錄屏功能也是可以滿足的~

網址：https://flourish.studio/examples/

花火

火花數圖是一個國產網站，同樣支持眾多的圖表制作，不過其中大部分都是需要 VIP 才可以使用。對于動態競賽圖來說，也僅僅有兩款可以免費使用，不過對于我們平時的練習來說，依然夠用！

下圖就是通過花火制作的條形競賽圖，也還是蠻不錯的

雖然作圖效果不錯，但是水印明顯，去水印需要同樣 VIP，所以這很國產

網址：https://hanabi.data-viz.cn/templates?lang=zh-CN

Python 代碼制作

上面介紹的兩個網站雖然制作簡單，但是在靈活度方面還是有一定的限制，下面我們來看看通過代碼的方式應該如何制作，是否可以更加靈活

bar_chart_race

顧名思義，這就是一個專門為了動態 Bar 圖表而生的庫，它是建立在 Matplotlib 的基礎之上的，同時為了生成 Gif 格式的文件，我們的本地還需要安裝 ImageMagick 工具，當然安裝 bar_chart_race 庫還是使用 pip 即可

當我們一切準備就緒之后，繪制動圖就簡單很多了

import?bar_chart_race?as?bcr import?pandas?as?pd #?生成GIF圖像 index_dict?=?{'covid19_tutorial':?'date','covid19':?'date','urban_pop':?'year','baseball':?None} index_col?=?index_dict['covid19'] parse_dates?=?[index_col]?if?index_col?else?None df?=?pd.read_csv('covid19.csv',?index_col=index_col,?parse_dates=parse_dates) bcr.bar_chart_race(df,?'covid19_horiz.gif')

根據數據的多少以及電腦配置的高低，生成 Gif 的時間也有所差別，總之當我打開本地生成的文件 covid19_horiz.gif 就可以看到如下動圖

是不是很方便呢

Matplotlib

上面既然說到了 Matplotlib，那么我們就來看看使用原生的 Matplotlib 該如何繪制動態競賽圖呢

Matplotlib 中動畫實現的原理就是讓多幅圖連續播放，每一幅圖叫做一幀(frame)

核心代碼如下

import?matplotlib.animation?as?animation from?IPython.display?import?HTML fig,?ax?=?plt.subplots(figsize=(15,?8)) animator?=?animation.FuncAnimation(fig,?draw_barchart,?frames=range(1968,?2019)) HTML(animator.to_jshtml()) #?or?use?animator.to_html5_video()?or?animator.save()

下面我們來看一個完整代碼

import?pandas?as?pd import?matplotlib.pyplot?as?plt import?matplotlib.ticker?as?ticker import?matplotlib.animation?as?animation from?IPython.display?import?HTML plt.rcParams['font.sans-serif']?=?['SimHei'] plt.rcParams['axes.unicode_minus']?=?False df?=?pd.read_csv("population.csv",?usecols=['name',?'group',?'year',?'value']) colors?=?dict(zip(["India",?"Europe",?"Asia",?"Latin?America",?"Middle?East",?"North?America",?"Africa"],["#adb0ff",?"#ffb3ff",?"#90d595",?"#e48381",?"#aafbff",?"#f7bb5f",?"#eafb50"] )) group_lk?=?df.set_index('name')['group'].to_dict() fig,?ax?=?plt.subplots(figsize=(15,?8))def?draw_barchart(current_year):dff?=?df[df['year'].eq(current_year)].sort_values(by='value',?ascending=True).tail(10)ax.clear()ax.barh(dff['name'],?dff['value'],?color=[colors[group_lk[x]]?for?x?in?dff['name']])dx?=?dff['value'].max()?/?200for?i,?(value,?name)?in?enumerate(zip(dff['value'],?dff['name'])):ax.text(value-dx,?i,?????name,???????????size=14,?weight=600,?ha='right',?va='bottom')ax.text(value-dx,?i-.25,?group_lk[name],?size=10,?color='#444444',?ha='right',?va='baseline')ax.text(value+dx,?i,?????f'{value:,.0f}',??size=14,?ha='left',??va='center')ax.text(1,?0.4,?current_year,?transform=ax.transAxes,?color='#777777',?size=46,?ha='right',?weight=800)ax.text(0,?1.06,?'人口?(千人)',?transform=ax.transAxes,?size=12,?color='#777777')ax.xaxis.set_major_formatter(ticker.StrMethodFormatter('{x:,.0f}'))ax.xaxis.set_ticks_position('top')ax.tick_params(axis='x',?colors='#777777',?labelsize=12)ax.set_yticks([])ax.margins(0,?0.01)ax.grid(which='major',?axis='x',?linestyle='-')ax.set_axisbelow(True)ax.text(0,?1.15,?'1500?到?2018?年各城市人口情況',transform=ax.transAxes,?size=24,?weight=600,?ha='left',?va='top')ax.text(1,?0,?'by?@蘿卜大雜燴',?transform=ax.transAxes,?color='#777777',?ha='right',bbox=dict(facecolor='white',?alpha=0.8,?edgecolor='white'))plt.box(False)animator?=?animation.FuncAnimation(fig,?draw_barchart,?frames=range(1900,?2019)) HTML(animator.to_jshtml())

可以看到代碼相對于 bar_chart_race 來說還是復制了不少，但是帶來的好處就是我們可以定制化的部分也多了很多

pandas_alive

下面再介紹一個非常棒的可視化庫，通過名稱我們也可以想到，該庫與 Pandas 深度結合，同樣可以繪制眾多動態圖表，當然包括我們今天的主題競賽圖啦

安裝什么的就不多說了，我們直接看代碼

import?pandas_alive import?pandas?as?pdcovid_df?=?pd.read_csv('covid19.csv',?index_col=0,?parse_dates=[0])covid_df.diff().fillna(0).plot_animated(filename='line_chart.gif',kind='line',period_label={'x':0.25,'y':0.9})

非常簡單的代碼，就可以制作效果很不錯的動態圖

下面再來看看動態折線圖的繪制方法

import?pandas_aliveimport?pandas?as?pdcovid_df?=?pd.read_csv('covid19.csv',?index_col=0,?parse_dates=[0])covid_df.diff().fillna(0).plot_animated(filename='examples/example-line-chart.gif',kind='line',period_label={'x':0.25,'y':0.9})

同樣很簡單

與 JavaScript 相結合

如果你還有 JS 的相關經驗，那么我們通過 JavaScript 也可以很方便的繪制動圖圖表，而且還有一個優勢就是可以直接展示在 Web 頁面上

Highcharts

這里我選擇的是 Highcharts，這是一個開源的 JS 庫，可以繪制眾多漂亮的圖表，動圖也不在話下

Highcharts 系列軟件包含 Highcharts JS，Highstock JS，Highmaps JS 共三款軟件，均為純 JavaScript 編寫的 HTML5 圖表庫，是一個非常完善的圖表庫。我們可能對于 ECharts 比較熟悉，而 Highcharts 則是一個可以與之比肩的項目

其繪制的效果如下

動態曲線圖：

動態條形圖：

具體的繪制方法，可以查看下面的文章，就不再過多贅述了

Flask 結合 Highcharts 實現動態渲染圖表

“

綜上，需要快速制作炫酷的競賽圖，可以選擇在線網站進行制作，如果有更多的定制化需求，可以尋求通過代碼的方式解決，如果還有通過 Web 展示的要求，那么?JS?則是一個不錯的選擇~

”

好了，以上就是今天分享的所有內容，如果對你有幫助，幫忙點贊和在看支持哦~

參考：https://blog.csdn.net/sinat_38682860/article/details/106159834?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-1-106159834.pc_agg_new_rank&utm_term=%E7%AB%9E%E8%B5%9B%E5%9B%BEpython&spm=1000.2123.3001.4430

對比Excel系列圖書累積銷量達15w冊，讓你輕松掌握數據分析技能，感興趣的同學可以直接在各大電商平臺搜索書名了解：

總結

以上是生活随笔為你收集整理的精选6种制作酷炫动图的方法，收藏！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。