[[434305]]

大家好，我是早起。

如果你嘗試用 Python 進(jìn)行可視化，會(huì)發(fā)現(xiàn)用起來(lái)很爽，但是保存或者展示確稍顯麻煩。

就拿 pyehcharts 來(lái)說(shuō)，如果在需要展示的時(shí)候啟動(dòng) notebook 現(xiàn)場(chǎng)執(zhí)行代碼，這應(yīng)該是最麻煩的方式。

另一種思路是導(dǎo)出為 html 或其他靜態(tài)文件，打開(kāi)進(jìn)行展示，這也是一種不錯(cuò)的方式，但是如果有很多個(gè)圖表呢?

你會(huì)說(shuō)，pyecharts 自帶圖表組合，將多個(gè)圖表組合在一起輸出到一個(gè) html 中，但凡是用過(guò)這個(gè)功能的人都會(huì)說(shuō)不僅難用，并且很難增加一些自定義的元素。

當(dāng)然，去年分享過(guò)一篇結(jié)合 PPT 展示的教程，確實(shí)是一個(gè)不錯(cuò)的選擇，但是也稍顯麻煩。

所以，在之前，我的一個(gè)解決方案是將這一堆圖表輸出為 html 格式，然后使用 iframe 嵌入前端頁(yè)面中，當(dāng)然這是基于 Django ，并且需要自己寫(xiě)前端的 style ，就像去年分享的疫情追蹤大屏

但是吧，又是逃不過(guò) Django 這樣的大家伙，配置起來(lái)對(duì)不熟悉的小白來(lái)說(shuō)是非常折磨的。

那有沒(méi)有更優(yōu)雅的方法?選 PyWebIO !還是將圖表放在網(wǎng)頁(yè)上，任何人都能訪問(wèn)查看交互式圖表與源碼，就像這樣?

原視頻

就像上面展示的一樣，不論是 pyecharts 還是 plotly 還是 bokeh 都可以完美的掛在網(wǎng)站上，按照自己預(yù)設(shè)的方式，保留一些交互功能與源碼查看!并且更重要的是，我們可以自由排列組合頁(yè)面內(nèi)容，并且根據(jù)需要添加更多的自定義元素! 下面就來(lái)介紹下制作過(guò)程。

如何實(shí)現(xiàn)

和之前的文章一樣，我們先思考一下如何實(shí)現(xiàn)，是先生成 html 還是打開(kāi)頁(yè)面時(shí)生成?

實(shí)際上還是事先生成的，同時(shí)保留html和py腳本，所以最簡(jiǎn)單的一個(gè) pyecharts 代碼可以這么寫(xiě)

from pywebio.output import put_html 
from pyecharts import options as opts 
from pyecharts.charts import Bar 
from pyecharts.faker import Faker 
 
 
c = ( 
    Bar() 
    .add_xaxis(Faker.choose()) 
    .add_yaxis("商家A", Faker.values()) 
    .add_yaxis("商家B", Faker.values()) 
    .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副標(biāo)題")) 
     
) 
 
c.width = "100%" 
put_html(c.render_notebook()) 

第一部分是 pyecharts 制作圖表的部分，不多解釋

重要的是最后一行，通過(guò) put_html() 嵌入 PyWebIO 中，這樣我們這個(gè)圖的腳本就搞定了，接下來(lái)只要如法炮制，制作更多的圖表腳本。

下面是主函數(shù)部分，如何將這些腳本嵌入并展示，首先是搜索全部腳本文件，之后使用open(html_file).read()打開(kāi)之前生成的圖表，再使用put_collapse(t('Show source code', '查看源碼'), put_code(code, 'python'))預(yù)覽代碼即可，代碼如下

@use_scope('content', clear=True) 
def show_demo(name): 
    if name not in t(all_demos, all_demos_zh): 
        return 
 
    with use_scope('loading'): 
        put_text('Loading...') 
        put_loading() 
 
    base_dir = path.join(src_path, name) 
    files = os.listdir(base_dir) 
    for file in files: 
        if not file.endswith('.py'): 
            continue 
        name = file[:-len(".py")] 
 
        html_file = path.join(base_dir, 'output', name) + '.html' 
        try: 
            code = open(path.join(base_dir, file)).read() 
            html = open(html_file).read() 
        except: 
            continue 
 
        put_html(html) 
 
        # todo: if there is `open` calls, provide the file link 
        put_collapse(t('Show source code', '查看源碼'), put_code(code, 'python')) 
 
    scroll_to(position='top') 
    clear('loading') 

最后使用 put_buttons() 添加按鈕

put_buttons([(v, k) for k, v in t(all_demos, all_demos_zh).items()], onclick=show_demo) 

再啟動(dòng)項(xiàng)目即可看到我們制作的展示頁(yè)面

start_server(pyecharts, port=8080, debug=True, auto_open_webbrowser=False) 

最終效果如下

最后只要將項(xiàng)目部署到到服務(wù)器，你就可以讓任何人看到你的可視化項(xiàng)目，是不是很酷!

當(dāng)然，上面是基于 pyecharts 進(jìn)行講解，實(shí)際上適用于任何 Python 可視化庫(kù)，只要按照相同的辦法制作即可，并且更重要的是，我們可以自由排列組合頁(yè)面內(nèi)容，并且根據(jù)需要添加更多的自定義元素!

本文的代碼參考官方文檔 (https://github.com/wang0618/pywebio-chart-gallery/tree/master/pyecharts_demo)感興趣的讀者可以下載嘗試!