在數據展示中使用圖表來分享自己的見解，是個非常常見的方法。

這也是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() #?變量數 variables?=?df.shape[1]

創建圖表實例，一個柱狀圖、一個箱型圖。

#?柱狀圖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模式,?端口7777app.run_server(debug=True,?threaded=True,?port=7777)#?正常模式,?網頁右下角的調試按鈕將不會出現#?app.run_server(port=7777)

這樣就能在本地看到可視化大屏頁面，瀏覽器打開如下地址。

http://127.0.0.1:7777

以后制作的圖表不僅能在線展示，還能實時更新，屬實不錯~

好了，今天的分享到此結束，大家可以自行去動手練習。

-?END -

對比Excel系列圖書累積銷量達15w冊，讓你輕松掌握數據分析技能，可以在全網搜索書名進行了解：

總結

以上是生活随笔為你收集整理的用Python制作酷炫的可视化报表。的全部內容，希望文章能夠幫你解決所遇到的問題。

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