50行Python代碼繪制數據大屏，這個可視化框架真的太神了

者：俊欣

來源：關于數據分析與可視化

今天小編來為大家安利另外一個用于繪制可視化圖表的Python框架，名叫Dash，建立在Flask、Plotly.js以及React.js的基礎之上，在創建之出的目的是為了幫助前端知識匱乏的數據分析人員，以純Python編程的方式快速制作出交互特性強的數據可視化大屏，在經過多年的迭代發展，如今不僅僅可以用來開發在線數據可視化作品，即便是輕量級的數據儀表盤、BI應用甚至是博客或者是常規的網站都隨處可見Dash框架的影子，今天小編就先來介紹一下該框架的一些基礎知識，并且來制作一個簡單的數據可視化大屏。

Dash框架中的兩個基本概念

我們先來了解一下Dash框架中的兩個基本概念

Layout
Callbacks

Layout顧名思義就是用來設計可視化大屏的外觀和布局，添加一些例如下拉框、單選框、復選框、輸入框、文本框、滑動條等組件，其中Dash框架對HTML標簽也進行了進一步的封裝，使得我們直接可以通過Python代碼來生成和設計每一個網頁所需要的元素，例如

<div>
    <h1>Hello World!!</h1>
    <div>
        <p>Dash converts Python classes into HTML</p>
    </div>
</div>

我們轉化成Dash的Python結構就是

html.Div([
    html.H1('Hello Dash'),
    html.Div([
        html.P('Dash converts Python classes into HTML'),
    ])
])

Callbacks也就是回調函數，基本上是以裝飾器的形式來體現的，實現前后端異步通信的交互，例如我們在點擊按鈕或者下拉框之后出現的功能就是通過回調函數來實現的。

安裝和導入模塊

在導入模塊之前，我們先用pip命令來進行安裝，

! pip install dash   
! pip install dash-html-components
! pip install dash-core-components                           
! pip install plotly

然后我們導入這些剛剛安裝完的模塊，其中dash-html-components用來生成HTML標簽，dash-core-components模塊用來生成例如下拉框、輸入框等組件，這里我們還需要用到plotly模塊，因為我們需要用到的數據來自該模塊，里面是一眾互聯網公司過去一段時間中股價的走勢

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objects as go
import plotly.express as px

讀取數據并且繪制折線圖

那么我們讀取數據并且用plotly來繪制折線圖，代碼如下

app = dash.Dash()   #實例化Dash
df = px.data.stocks() #讀取股票數據 

def stock_prices():
    # 繪制折線圖
    fig = go.Figure([go.Scatter(x=df['date'], y=df['AAPL'],
                                line=dict(color='firebrick', width=4), name='Apple')
                     ])
    fig.update_layout(title='股價隨著時間的變幻',
                      xaxis_title='日期',
                      yaxis_title='價格'
                      )
    return fig
    
app.layout = html.Div(id='parent', children=[
    html.H1(id='H1', children='Dash 案例一', style={'textAlign': 'center',
                                                 'marginTop': 40, 'marginBottom': 40}),
    dcc.Graph(id='line_plot', figure=stock_prices())
])

if __name__ == '__main__':
    app.run_server()

我們點擊運行之后會按照提示將url復制到瀏覽器當中便可以看到出來的結果了，如下所示

從代碼的邏輯上來看，我們通過Dash框架中的Div方法來進行頁面的布局，其中有參數id來指定網頁中的元素，以及style參數來進行樣式的設計，最后我們將會指出來的圖表放在dcc.Graph()函數當中。

添置一個下拉框

然后我們再添置一個下拉框，當我們點擊這個下拉框的時候，可是根據我們的選擇展示不同公司的股價，代碼如下

dcc.Dropdown(id='dropdown',
             options=[
                 {'label': '谷歌', 'value': 'GOOG'},
                 {'label': '蘋果', 'value': 'AAPL'},
                 {'label': '亞馬遜', 'value': 'AMZN'},
             ],
             value='GOOG'),

output

options參數中的label對應的是下拉框中的各個標簽，而value對應的是DataFrame當中的列名

df.head()

output

添加回調函數

最后我們將下拉框和繪制折線圖的函數給連接起來，我們點擊下拉框選中不同的選項的時候，折線圖也會相應的產生變化，

@app.callback(Output(component_id='bar_plot', component_property='figure'),
              [Input(component_id='dropdown', component_property='value')])
def graph_update(dropdown_value):
    print(dropdown_value)
    # Function for creating line chart showing Google stock prices over time
    fig = go.Figure([go.Scatter(x=df['date'], y=df['{}'.format(dropdown_value)],
                                line=dict(color='firebrick', width=4))
                     ])
    fig.update_layout(title='股價隨著時間的變幻',
                      xaxis_title='日期',
                      yaxis_title='價格'
                      )
    return fig

我們看到callback()方法中指定輸入和輸出的媒介，其中Input參數，里面的component_id對應的是下拉框的id也就是dropdown，而Output參數，當中的component_id對應的是折線圖的id也就是bar_plot，我們來看一下最后出來的結果如下

最后，全部的代碼如下所示

亮有特色的 CSS 組件庫，組件代碼非常簡潔，也支持深度定制主題、定制組件，可以搭配 Vue / React 等框架使用。

關于 daisyUI

daisyUI 是一款極為流行的 CSS UI 組件庫，作者 Pouya Saadeghi 基于大名鼎鼎的 Tailwind CSS 框架構建的組件庫。截止發文日期，已經在 Github 得到 11,200 Star， 944,600 次 NPM 安裝。

daisyui 官網

Tailwind CSS 是一個功能類優先的 CSS 框架，通過類似于 .flex、.pt-4、.text-center、.rotate-90 這種原子類組合的 class 名快速構建網站，在 HTML 代碼上就能完成開發，不需要再自己想各種 CSS 命名。

daisyUI 作為 Tailwind CSS 的組件庫，不僅繼承了它的優點，而且代碼更簡潔，主題非常漂亮有特點，打開官網就喜歡上它了。

daisyui 組件

daisyUI 的技術特性

提供 45 個常用組件，多達 29 款主題，款款都是精品
相比 Tailwind CSS 的原子類，daisyUI 采用語義化的 class 名，寫出更純凈的 HTML
支持深度自定義、可定制主題
是一個純凈 CSS 組件，所以支持和任意 Vue / React 這樣的框架一起使用

支持搭配使用的框架

開發上手體驗和使用感受

首先說說我最喜歡的主題，daisyUI 提供了 29 款主題，配色很舒服，各有特色，我首先想到用來做個人網站的主題，一定會很酷。

主題風格預覽

daisyui 默認主題

daisyui 暗主題

安裝和使用

需要注意的是，使用 daisyUI 前，需要和 Tailwind CSS 一起安裝，最簡單的方式是 cdn 引入：

<link href="https://cdn.jsdelivr.net/npm/daisyui@2.15.2/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>

生產環境更推薦用 npm 的方式，這樣打包出來的項目會小很多：

安裝 daisyUI

npm i daisyui

然后，在你的tailwind.config.js文件里追加 daisyUI 的設置

module.exports = {
  //...
  plugins: [require("daisyui")],
}

“反” Tailwind CSS

使用過 Tailwind CSS 的開發者一定對這種寫一堆 class 名來構建組件的方式印象很深刻，我一直沒有推薦 Tailwind CSS，就是因為個人實在不喜歡零零碎碎的 CSS 類名，我更傾向于寫語義清晰的類名來開發組件。我們來看看實現一個常規的按鈕，兩種寫法的區別：

<!-- Tailwind CSS 的寫法 -->
<a class="inline-block px-4 py-3 text-sm font-semibold 
    text-cente text-white uppercase transition
    duration-200 ease-in-out bg-indigo-600 
    rounded-md cursor-pointer
    hover:bg-indigo-700">Button</a>

<!-- daisyUI 的寫法 -->
<a class="btn btn-primary">Button</a>

daisyUI 的寫法實在太簡潔了，所以說 daisyUI 簡直是“反” Tailwind CSS 思路一點也不為過，不過 Tailwind CSS 的作者認為語義化的 CSS 并不好維護，因為隨著項目的迭代，很多 class 名早已失去了原有的意義了。各位前端小伙伴，你們覺得呢？

45 個組件如果沒法滿足，官方還提供了自定義組件的工具類，開發者可以快速構建自定義組件。官網提供了詳盡的中文文檔，純 CSS 本身也易懂，對應的組件也有 HTML 代碼例子，上手使用完全不是問題。

daisyui 開發文檔

總的來說，這是一款漂亮、流行，代碼簡潔的 web UI 組件庫，熟悉以后能提高開發效率，不妨寫個快速 demo 嘗試一下。

免費開源說明

daisyUI 是基于 Tailwind CSS 構建的 CSS 組件庫，源碼基于 MIT 開源協議托管在 Github 上，任何個人和公司都可以免費下載使用，也可以用于商業項目。

和 daisyUI 類似的框架還有之前推薦過的 Bootstrap 和 Pico.css，感興趣的開發者也可以前往了解。

關注我，持續分享高質量的免費開源、免費商用的資源。

↓↓點【了解更多】查看本次分享的網址。

言

又到周五了，是時候該放個大招了。哈哈~~

提到 CSS 想必每個做前端開發的沒有不知道的，也沒有不會用的。即使是后端開發人員也多少會一點，因為這是Web開發中最最基礎的一個知識了。

但是在平時寫 css的時候，很多人又覺得他沒點技術含量而且還會占用大量的時間去編寫代碼。雖然現在出現了很多很香的框架如: bootstrap 。還有一些css預處理器如：sass、less、stylus 都是為了解決在平時開發中的一些問題，提高工作效率。

今天給大家介紹一款新的比較火的前端 CSS 框架： Tailwind CSS

官網

先把官網奉上：

https://www.tailwindcss.cn/

先來感受兩個官網圖片：

關于安裝

Tailwindcss 有很多種安裝方式，也可以和不同的框架進行集成，這里以 vue3(vite) 為例介紹。

1、創建一個vite 工程，具體用法參考 vite 官網

npx create-vite-app my-project
cd my-project
npm install

2、初始化 Tailwind CSS

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

3、創建您的配置文件，(這里會同時生成tailwind.config.js 和 postcss.config.js 文件)

npx tailwindcss init -p

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

4、引入 tailwindcss

創建一個 css文件，這里創建位置是： /src/index.css

/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

5、引入創建好的 index.css在 main.js 或者 main.ts 中引入剛剛創建好的css文件

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

關于更多的安裝細節請仔細閱讀官網文檔

https://www.tailwindcss.cn/docs/installation

強大的功能

看一個例子

要實現這樣一個樣式設計，用傳統的方式css如下

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

用 tailwindcss寫法如下：

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

可以看到代碼量是少了很多很多。

tailwindcss的強大功能遠不止如此，還有很多強大好用的功能如：

強大的響應式設計

元素的hover 、focus 和其它狀態的元素

深色模式
……

tailwindcss的功能實在是太多，這里也只是簡單介紹幾個常用的功能而已，如果你對這個框架感興趣請到官網仔細閱讀用法。

寫在最后

Vue-admin-work 系列的 P 版本。也應用到了 tailwindcss 框架。如果你對 vue-admin-work 框架感興趣。請到評論區查看源碼獲取的方式。

歡迎大家評論點贊轉發~~~ 感謝支持

在線咨詢

上一篇：小米電腦助手-小米為旗下筆記本產品推出的一款系統管理工具
下一篇：Rails 6.0 穩定版發布：新增 Action Mailbox 和Action Text功能

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商