python中的PywebIO模組製作一個資料大屏

2022-03-03 19:02:13

一、PywebIO介紹

Python當中的PywebIO模組可以幫助開發者在不具備HTML和JavaScript的情況下也能夠迅速構建Web應用或者是基於瀏覽器的GUI應用，PywebIO還可以和一些常用的視覺化模組聯用，製作成一個視覺化大屏，

我們先來安裝好需要用到的模組

pip install pywebio
pip install cutecharts

上面提到的cutecharts模組是Python當中的手繪風格的視覺化神器，相信大家對此並不陌生，我們來看一下它與PywebIO模組結合繪製圖表的效果是什麼樣的，

程式碼如下：

from cutecharts.charts import Bar
from cutecharts.faker import Faker

from pywebio import start_server
from pywebio.output import put_html

def bar_base():
    chart = Bar("Bar-基本範例", width="100%")
    chart.set_options(labels=Faker.choose(), x_label="I'm xlabel", y_label="I'm ylabel")
    chart.add_series("series-A", Faker.values())
    put_html(chart.render_notebook())

if __name__ == '__main__':
    start_server(bar_base, debug=True, port=8080)

output：

上述程式碼的邏輯並不難看懂，先範例化一個直方圖Bar()物件，然後填上X軸對應的標籤以及對應Y軸的值，最後呼叫PywebIO模組當中的put_html()方法，我們會看到一個URL

在瀏覽器當中輸入該URL便能夠看到我們繪製出來的圖表。當然在cutecharts模組當中有Page()方法來將各個圖表都連線起來，做成一張視覺化大屏，

程式碼如下：

def bar_base():
    chart = Bar("Bar-基本範例", width="100%")
    chart.set_options(labels=Faker.choose(), x_label="I'm xlabel", y_label="I'm ylabel")
    chart.add_series("series-A", Faker.values())
    return chart

def pie_base() -> Pie:
    chart = Pie("標題", width="100%")
    ........
    return chart

def radar_base() -> Radar:
    chart = Radar("標題", width="100%")
    ......
    return chart

def line_base() -> Line:
    chart = Line("標題", width="100%")
    ......
    return chart

def main():
    page = Page()
    page.add(pie_base(), pie_base(), radar_base(), line_base(), bar_base())
    put_html(page.render_notebook())

if __name__ == '__main__':
    start_server(main, debug=True, port=8080)

output：

二、PywebIO和Pyecharts的組合

當PywebIO模組遇上Pyecharts模組時，程式碼的邏輯基本上和cutecharts的一致，先是範例化一個圖表的物件，然後在新增完資料以及設定好圖表的樣式之後，最後呼叫put_html()方法將最後的結果在瀏覽器中呈現

# `chart` 是你的圖表的範例
pywebio.output.put_html(chart.render_notebook())

在這個案例當中我們呼叫Pyecharts當中的組合元件，分別來呈現繪製完成的圖表，程式碼如下：

def bar_plots():
    bar = (
        Bar()
            .add_xaxis(Faker.choose())
            .add_yaxis("商家A", Faker.values())
            .add_yaxis("商家B", Faker.values())
            .set_global_opts(title_opts=opts.TitleOpts(title="Grid-Bar"))
    )
    return bar

def line_plots():
    line = (
        Line()
            .add_xaxis(Faker.choose())
            .add_yaxis("商家A", Faker.values())
            .add_yaxis("商家B", Faker.values())
            .set_global_opts(
            title_opts=opts.TitleOpts(title="Grid-Line", pos_top="48%"),
            legend_opts=opts.LegendOpts(pos_top="48%"),
        )
    )
    return line

def main():
    c = (
        Grid()
            .add(bar_plots(), grid_opts=opts.GridOpts(pos_bottom="60%"))
            .add(line_plots(), grid_opts=opts.GridOpts(pos_top="60%"))
    )
    c.width = "100%"
    put_html(c.render_notebook())

if __name__ == '__main__':
    start_server(main, debug=True, port=8080)

output：

三、PywebIO和Bokeh的組合

PywebIO和Bokeh的組合從程式碼的語法上來看會稍微和上面的不太一樣，具體的不同如下所示：

from bokeh.io import output_notebook
from bokeh.io import show

output_notebook(notebook_type='pywebio')
fig = figure(...)
...
show(fig)

例如我們來繪製一個簡單的直方圖，程式碼如下：

def bar_plots():

    output_notebook(notebook_type='pywebio')
    fruits = ['Apples', 'Pears', 'Nectarines', 'Plums', 'Grapes', 'Strawberries']
    counts = [5, 3, 4, 2, 4, 6]

    p = figure(x_range=fruits, plot_height=350, title="Fruit Counts",
               toolbar_location=None, tools="")

    p.vbar(x=fruits, top=counts, width=0.9)
    p.xgrid.grid_line_color = None
    p.y_range.start = 0

    show(p)

if __name__ == "__main__":
    start_server(bar_plots, debug=True, port=8080)

output：

四、基於瀏覽器的GUI應用

除了將Pywebio模組與常用的視覺化模組結合用於各種圖表的繪製之外，我們還能用它構建一個基於瀏覽的圖形介面，我們先來做一個最為簡單的應用，程式碼如下：

from pywebio.input import *
from pywebio.output import *

data = input_group(
    "使用者資料",
    [
        input("請問您的名字是: ", name="name", type=TEXT),
        input("輸入您的年齡", name="age", type=NUMBER),
        radio(
            "哪個洲的",
            name="continent",
            options=[
                "非洲",
                "亞洲",
                "澳大利亞",
                "歐洲",
                "北美洲",
                "南美洲",
            ],
        ),
        checkbox(
            "使用者隱私條例", name="agreement", options=["同意"]
        ),
    ],
)

put_text("表格輸出:")

put_table(
    [
        ["名字", data["name"]],
        ["年齡", data["age"]],
        ["位置", data["continent"]],
        ["條例", data["agreement"]],
    ]
)

output：

當中部分函數方法的解釋如下：

input(): 文字內容的輸入
radio(): 代表的是單選框
checkbox(): 代表的是多選框
input_group(): 代表的是輸入組
put_table(): 代表的是輸出組
put_text(): 代表的是輸出文字

到此這篇關於python中的PywebIO模組製作一個資料大屏的文章就介紹到這了,更多相關PywebIO製作資料大屏內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

python中的PywebIO模組製作一個資料大屏

目錄

一、PywebIO介紹

二、PywebIO和Pyecharts的組合

三、PywebIO和Bokeh的組合

四、基於瀏覽器的GUI應用

熱門文章