剛下班，老板就踩點過來了，發給我一堆東西，讓我做完可視化報表再下班，我特么心態崩了呀！
在資料展示中使用圖表來分享自己的見解，是個非常常見的方法，這也是Tableau、Power BI這類商業智能儀表盤持續流行的原因之一，這些工具為資料提供了精美的圖形解釋，
當然了，這些工具也有著不少缺點，比如不夠靈活，無法讓你自己創建設計， 當你對圖表展示要求定制化時，編程也許就比較適合你，比如Echarts、D3.js，
今天文給大家介紹一個用 Python 制作可視化報表的案例，主要是使用到Dash+Tailwindcss，喜歡本文記得收藏、點贊、關注，代碼文末可自取，實踐一次，勝過看無數次，
【注】文末有技術交流群
Dash 是基于 Plotly 搭建的 Dashbord 框架，支持Python、R和Julia，使用Dash，你可以創建自定義回應式儀表板，
相關檔案
說明：https://dash.plotly.com/introduction
案例：https://dash.gallery/Portal/
原始碼：https://github.com/plotly/dash-sample-apps/
Tailwindcss則是一個實用程式優先的CSS框架，用于快速構建自定義界面，
“這種框架只適用于那種只會實作頁面布局美化元素而不關心實作業務邏輯的前端”，
看看別人對它的評價，對于無互動的圖表，完全足夠了，
相關檔案
說明：https://www.tailwindcss.cn/docs
GitHub：https://github.com/tailwindlabs/tailwindcss
下面就給大家講解下如何通過Dash+Tailwindcss搭建可視化報表～
首先安裝相關的Python庫，然后匯入，
import dash import pandas as pd import plotly.express as px from dash import dcc, html
使用到了Pandas、Plotly、dash這三個Python庫，
我們需要把Tailwindcss的CDN作為external_script，并將其傳遞給我們的應用程式實體，這樣我們才可以成功使用Tailwindcss，
# 匯入tailwindcss的CDN external_script = ["https://tailwindcss.com/", {"src": "https://cdn.tailwindcss.com"}] # 創建Dash實體 app = dash.Dash( __name__, external_scripts=external_script, ) app.scripts.config.serve_locally = True
使用Pandas創建水果銷售資料，隨便虛構了一個，
# 創建資料 df = pd.DataFrame( { "Fruit": ["蘋果", "橙子", "香蕉", "蘋果", "橙子", "香蕉"], "Amount": [4.2, 1.0, 2.1, 2.32, 4.20, 5.0], "City": ["北京", "北京", "北京", "上海", "上海", "上海"], } ) print(df)
結果如下，3列6行，包含水果、銷售額、城市列，
處理一下相關的資料，水果單數、銷售總額、城市單數、變數數，
# 水果單數 fruit_count = df.Fruit.count() # 銷售總額 total_amt = df.Amount.sum() # 城市單數 city_count = df.City.count() # 變數數
創建圖表實體，一個柱狀圖、一個箱型圖，
# 柱狀圖1, 不同水果不同城市的銷售額 fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group") # 箱型圖1, 不同城市的銷售額分布情況 fig1 = px.box(df, x="City", y="Amount", color="City")
效果如下，
剩下就是文字模塊啦，文字+CSS樣式，
其中排版布局美化，通過Tailwindcss來實作，
app.layout = html.Div( html.Div( children=[ html.Div( children=[ html.H1(children="水果銷售--可視化報表", className=" py-3 text-5xl font-bold text-gray-800"), html.Div( children="""Python with Dash = ?? .""", className="text-left prose prose-lg text-2xl py-3 text-gray-600", ), ], className="w-full mx-14 px-16 shadow-lg bg-white -mt-14 px-6 container my-3 ", ), html.Div( html.Div( children=[ html.Div( children=[ f"￥{total_amt}", html.Br(), html.Span("總銷售額", className="text-lg font-bold ml-4"), ], className=" shadow-xl py-4 px-14 text-5xl bg-[#76c893] text-white font-bold text-gray-800", ), html.Div( children=[ fruit_count, html.Br(), html.Span("水果數量", className="text-lg font-bold ml-4"), ], className=" shadow-xl py-4 px-24 text-5xl bg-[#1d3557] text-white font-bold text-gray-800", ), html.Div( children=[ variables, html.Br(), html.Span("變數", className="inline-flex items-center text-lg font-bold ml-4"), ], className=" shadow-xl py-4 px-24 text-5xl bg-[#646ffa] text-white font-bold text-gray-800", ), html.Div( children=[ city_count, html.Br(), html.Span("城市數量", className="text-lg font-bold ml-4"), ], className="w-full shadow-xl py-4 px-24 text-5xl bg-[#ef553b] text-white font-bold text-gray-800", ), ], className="my-4 w-full grid grid-flow-rows grid-cols-1 lg:grid-cols-4 gap-y-4 lg:gap-[60px]", ), className="flex max-w-full justify-between items-center ", ), html.Div( children=[ html.Div( children=[ dcc.Graph(id="example-graph", figure=fig), ], className="shadow-xl w-full border-3 rounded-sm", ), html.Div( children=[ dcc.Graph(id="example-graph1", figure=fig1), ], className="w-full shadow-2xl rounded-sm", ), ], className="grid grid-cols-1 lg:grid-cols-2 gap-4", ), ], className="bg-[#ebeaee] flex py-14 flex-col items-center justify-center ", ), className="bg-[#ebeaee] container mx-auto px-14 py-4", )
效果如下，
最后啟動程式代碼，
if __name__ == '__main__': # debug模式, 埠7777 app.run_server(debug=True, threaded=True, port=7777) # 正常模式, 網頁右下角的除錯按鈕將不會出現 # app.run_server(port=7777)
這樣就能在本地看到可視化大屏頁面，瀏覽器打開如下地址，
http://127.0.0.1:7777
以后制作的圖表不僅能在線展示，還能實時更新，屬實不錯~
# **代碼獲取** # 專案代碼已上傳，在下方裙內，即可獲取， # python學習交流群 924040232
好了，今天的分享到此結束，大家可以自行去動手練習，
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/430994.html
標籤：Python