上面的兩個(gè)動(dòng)圖，就是條形競(jìng)賽圖和折線競(jìng)賽圖，今天我們就來看看都有哪些方便的方法來制作呢

在線制作

有很多在線的網(wǎng)站都可以制作上述類似的競(jìng)賽圖，下面我們來介紹蘿卜哥常用的兩個(gè)

flourish

首先推薦一個(gè)國(guó)外的網(wǎng)站 -- flourish，該網(wǎng)站可以在線制作大量精美的圖表，其中動(dòng)圖圖表尤為強(qiáng)大

有大量的例子供我們選擇

還有如下條形競(jìng)賽圖例子，是不是很驚艷

條形競(jìng)賽圖也是完全支持的，下圖就是制作頁面，我們可以上傳數(shù)據(jù)，并自由的設(shè)置圖表的各項(xiàng)參數(shù)

唯一美中不足的就是導(dǎo)出動(dòng)圖需要付費(fèi)，不過對(duì)于日常學(xué)習(xí)的我們來說，靠著錄屏功能也是可以滿足的~

網(wǎng)址：https://flourish.studio/examples/

花火

火花數(shù)圖是一個(gè)國(guó)產(chǎn)網(wǎng)站，同樣支持眾多的圖表制作，不過其中大部分都是需要 VIP 才可以使用。對(duì)于動(dòng)態(tài)競(jìng)賽圖來說，也僅僅有兩款可以免費(fèi)使用，不過對(duì)于我們平時(shí)的練習(xí)來說，依然夠用！

下圖就是通過花火制作的條形競(jìng)賽圖，也還是蠻不錯(cuò)的

雖然作圖效果不錯(cuò)，但是水印明顯，去水印需要同樣 VIP，所以這很國(guó)產(chǎn)

網(wǎng)址：https://hanabi.data-viz.cn/templates?lang=zh-CN

Python 代碼制作

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

bar_chart_race

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

當(dāng)我們一切準(zhǔn)備就緒之后，繪制動(dòng)圖就簡(jiǎn)單很多了

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')

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

是不是很方便呢

Matplotlib

上面既然說到了 Matplotlib，那么我們就來看看使用原生的 Matplotlib 該如何繪制動(dòng)態(tài)競(jìng)賽圖呢

Matplotlib 中動(dòng)畫實(shí)現(xiàn)的原理就是讓多幅圖連續(xù)播放，每一幅圖叫做一幀(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()

下面我們來看一個(gè)完整代碼

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())

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

pandas_alive

下面再介紹一個(gè)非常棒的可視化庫，通過名稱我們也可以想到，該庫與 Pandas 深度結(jié)合，同樣可以繪制眾多動(dòng)態(tài)圖表，當(dāng)然包括我們今天的主題競(jìng)賽圖啦

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

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})

非常簡(jiǎn)單的代碼，就可以制作效果很不錯(cuò)的動(dòng)態(tài)圖

下面再來看看動(dòng)態(tài)折線圖的繪制方法

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})

同樣很簡(jiǎn)單

與 JavaScript 相結(jié)合

如果你還有 JS 的相關(guān)經(jīng)驗(yàn)，那么我們通過 JavaScript 也可以很方便的繪制動(dòng)圖圖表，而且還有一個(gè)優(yōu)勢(shì)就是可以直接展示在 Web 頁面上

Highcharts

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

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

其繪制的效果如下

動(dòng)態(tài)曲線圖：

動(dòng)態(tài)條形圖：

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

Flask 結(jié)合 Highcharts 實(shí)現(xiàn)動(dòng)態(tài)渲染圖表

“

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

”

好了，以上就是今天分享的所有內(nèi)容，如果對(duì)你有幫助，幫忙點(diǎn)贊和在看支持哦~

參考：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

對(duì)比Excel系列圖書累積銷量達(dá)15w冊(cè)，讓你輕松掌握數(shù)據(jù)分析技能，感興趣的同學(xué)可以直接在各大電商平臺(tái)搜索書名了解：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。