【小沐学Python】Python实现Web图表功能（Dash之基本功能）
  I6bYKJOwynuQ 2023年11月14日 26 0

1、简介

Dash是下载量最大，最值得信赖的Python框架，用于构建ML和数据科学Web应用程序。

Dash是一个用来创建 web 应用的 python 库，它建立在 Plotly.js(同一个团队开发)、React 和 Flask 之上，主要的用户群体是数据分析者、AI 从业者，可以帮助他们快速搭建非常美观的网页应用，而且不需要你懂 javascript。

2、功能示例

2.1 Hello World

下面的代码创建了一个非常小的“Hello World”Dash应用程序。

from dash import Dash, html

app = Dash(__name__)

app.layout = html.Div([
    html.Div(children='Hello World, 爱看书的小沐！')
])

if __name__ == '__main__':
    app.run(debug=True)

在这里插入图片描述

2.2 连接到数据

向应用添加数据的方法有很多种：API、外部数据库、本地文件、JSON 文件等。 在此示例中，我们将重点介绍合并 CSV 工作表中数据的最常见方法之一。

from dash import Dash, html, dash_table
import pandas as pd

# Incorporate data
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')

# Initialize the app
app = Dash(__name__)

# App layout
app.layout = html.Div([
    html.Div(children='My First App with Data'),
    dash_table.DataTable(data=df.to_dict('records'), page_size=10)
])

# Run the app
if __name__ == '__main__':
    app.run(debug=True)

在这里插入图片描述

2.3 可视化数据

Plotly 图形库有 50 多种图表类型可供选择。 在此示例中，我们将使用直方图。

from dash import Dash, html, dash_table, dcc
import pandas as pd
import plotly.express as px

# Incorporate data
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')

# Initialize the app
app = Dash(__name__)

# App layout
app.layout = html.Div([
    html.Div(children='My First App with Data and a Graph'),
    dash_table.DataTable(data=df.to_dict('records'), page_size=10),
    dcc.Graph(figure=px.histogram(df, x='continent', y='lifeExp', histfunc='avg'))
])

# Run the app
if __name__ == '__main__':
    app.run(debug=True)

在这里插入图片描述

2.4 控件和回调

到目前为止，你已构建了一个显示表格数据和图形的静态应用。 但是，当您开发更复杂的Dash应用程序时，您可能希望为应用程序用户提供更多的自由来与应用程序交互并更深入地探索数据。 为此，需要使用回调函数向应用添加控件。

在此示例中，我们将向应用布局添加单选按钮。然后，我们将构建回调以创建单选按钮和直方图之间的交互。

from dash import Dash, html, dash_table, dcc, callback, Output, Input
import pandas as pd
import plotly.express as px

# Incorporate data
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')

# Initialize the app
app = Dash(__name__)

# App layout
app.layout = html.Div([
    html.Div(children='My First App with Data, Graph, and Controls'),
    html.Hr(),
    dcc.RadioItems(options=['pop', 'lifeExp', 'gdpPercap'], value='lifeExp', id='controls-and-radio-item'),
    dash_table.DataTable(data=df.to_dict('records'), page_size=6),
    dcc.Graph(figure={}, id='controls-and-graph')
])

# Add controls to build the interaction
@callback(
    Output(component_id='controls-and-graph', component_property='figure'),
    Input(component_id='controls-and-radio-item', component_property='value')
)
def update_graph(col_chosen):
    fig = px.histogram(df, x='continent', y=col_chosen, histfunc='avg')
    return fig

# Run the app
if __name__ == '__main__':
    app.run(debug=True)

在这里插入图片描述

2.5 设置应用的样式

上一节中的示例使用Dash HTML组件来构建简单的应用程序布局，但您可以设置应用程序的样式以使其看起来更专业。

  • 本节将简要概述可用于增强达世币应用程序布局样式的多种工具：
    • HTML and CSS
    • Dash Design Kit (DDK)
    • Dash Bootstrap Components
    • Dash Mantine Components

2.5.1 HTML and CSS

HTML 和 CSS 是在 Web 上呈现内容的最低级别的界面。 HTML 是一组组件，CSS 是应用于这些组件的一组样式。 CSS 样式可以通过属性在组件中应用，也可以将它们定义为引用属性的单独 CSS 文件.

from dash import Dash, html, dash_table, dcc, callback, Output, Input
import pandas as pd
import plotly.express as px

# Incorporate data
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')

# Initialize the app - incorporate css
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(__name__, external_stylesheets=external_stylesheets)

# App layout
app.layout = html.Div([
    html.Div(className='row', children='My First App with Data, Graph, and Controls',
             style={'textAlign': 'center', 'color': 'blue', 'fontSize': 30}),

    html.Div(className='row', children=[
        dcc.RadioItems(options=['pop', 'lifeExp', 'gdpPercap'],
                       value='lifeExp',
                       inline=True,
                       id='but1')
    ]),

    html.Div(className='row', children=[
        html.Div(className='six columns', children=[
            dash_table.DataTable(data=df.to_dict('records'), page_size=11, style_table={'overflowX': 'auto'})
        ]),
        html.Div(className='six columns', children=[
            dcc.Graph(figure={}, id='histo-chart-final')
        ])
    ])
])

# Add controls to build the interaction
@callback(
    Output(component_id='histo-chart-final', component_property='figure'),
    Input(component_id='but1', component_property='value')
)
def update_graph(col_chosen):
    fig = px.histogram(df, x='continent', y=col_chosen, histfunc='avg')
    return fig

# Run the app
if __name__ == '__main__':
    app.run(debug=True)

在这里插入图片描述

2.5.2 Dash Design Kit (DDK)

Dash 设计工具包是我们专为Dash 构建的高级UI框架。 使用Dash设计工具包，您无需使用HTML或CSS。默认情况下，应用程序是移动响应式的，并且一切都是主题化的。 <font color=red>请注意，如果没有Dash企业许可证，您将无法运行此示例。

from dash import Dash, html, dash_table, dcc, callback, Output, Input
import pandas as pd
import plotly.express as px
import dash_design_kit as ddk

# Incorporate data
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')

# Initialize the app
app = Dash(__name__)

# App layout
app.layout = ddk.App([
    ddk.Header(ddk.Title('My First App with Data, Graph, and Controls')),
    dcc.RadioItems(options=['pop', 'lifeExp', 'gdpPercap'],
                    value='lifeExp',
                    inline=True,
                    id='my-ddk-radio-items-final'),
    ddk.Row([
        ddk.Card([
            dash_table.DataTable(data=df.to_dict('records'), page_size=12, style_table={'overflowX': 'auto'})
        ], width=50),
        ddk.Card([
            ddk.Graph(figure={}, id='graph-placeholder-ddk-final')
        ], width=50),
    ]),

])

# Add controls to build the interaction
@callback(
    Output(component_id='graph-placeholder-ddk-final', component_property='figure'),
    Input(component_id='my-ddk-radio-items-final', component_property='value')
)
def update_graph(col_chosen):
    fig = px.histogram(df, x='continent', y=col_chosen, histfunc='avg')
    return fig

# Run the app
if __name__ == '__main__':
    app.run(debug=True)

2.5.3 Dash Bootstrap Components

Dash Bootstrap是一个基于引导组件系统构建的社区维护库。 虽然它没有被Plotly官方维护或支持，但Dash Bootstrap是构建优雅应用程序布局的强大方式。 请注意，我们首先定义一行，然后使用 and 组件定义行内列的宽度。

pip install dash-bootstrap-components

# Import packages
from dash import Dash, html, dash_table, dcc, callback, Output, Input
import pandas as pd
import plotly.express as px
import dash_bootstrap_components as dbc

# Incorporate data
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')

# Initialize the app - incorporate a Dash Bootstrap theme
external_stylesheets = [dbc.themes.CERULEAN]
app = Dash(__name__, external_stylesheets=external_stylesheets)

# App layout
app.layout = dbc.Container([
    dbc.Row([
        html.Div('My First App with Data, Graph, and Controls', className="text-primary text-center fs-3")
    ]),

    dbc.Row([
        dbc.RadioItems(options=[{"label": x, "value": x} for x in ['pop', 'lifeExp', 'gdpPercap']],
                       value='lifeExp',
                       inline=True,
                       id='radio-buttons-final')
    ]),

    dbc.Row([
        dbc.Col([
            dash_table.DataTable(data=df.to_dict('records'), page_size=12, style_table={'overflowX': 'auto'})
        ], width=6),

        dbc.Col([
            dcc.Graph(figure={}, id='my-first-graph-final')
        ], width=6),
    ]),

], fluid=True)

# Add controls to build the interaction
@callback(
    Output(component_id='my-first-graph-final', component_property='figure'),
    Input(component_id='radio-buttons-final', component_property='value')
)
def update_graph(col_chosen):
    fig = px.histogram(df, x='continent', y=col_chosen, histfunc='avg')
    return fig

# Run the app
if __name__ == '__main__':
    app.run(debug=True)

在这里插入图片描述

2.5.4 Dash Mantine Components

Dash Mantine是一个社区维护的库，建立在Mantine组件系统之上。 虽然它没有得到Plotly团队的官方维护或支持，但Dash Mantine是另一种自定义应用程序布局的强大方式。 破折号组件使用网格模块来构建布局。

pip install dash-mantine-components

在这里插入图片描述

from dash import Dash, html, dash_table, dcc, callback, Output, Input
import pandas as pd
import plotly.express as px
import dash_mantine_components as dmc

# Incorporate data
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')

# Initialize the app - incorporate a Dash Mantine theme
external_stylesheets = [dmc.theme.DEFAULT_COLORS]
app = Dash(__name__, external_stylesheets=external_stylesheets)

# App layout
app.layout = dmc.Container([
    dmc.Title('My First App with Data, Graph, and Controls', color="blue", size="h3"),
    dmc.RadioGroup(
            [dmc.Radio(i, value=i) for i in  ['pop', 'lifeExp', 'gdpPercap']],
            id='my-dmc-radio-item',
            value='lifeExp',
            size="sm"
        ),
    dmc.Grid([
        dmc.Col([
            dash_table.DataTable(data=df.to_dict('records'), page_size=12, style_table={'overflowX': 'auto'})
        ], span=6),
        dmc.Col([
            dcc.Graph(figure={}, id='graph-placeholder')
        ], span=6),
    ]),

], fluid=True)

# Add controls to build the interaction
@callback(
    Output(component_id='graph-placeholder', component_property='figure'),
    Input(component_id='my-dmc-radio-item', component_property='value')
)
def update_graph(col_chosen):
    fig = px.histogram(df, x='continent', y=col_chosen, histfunc='avg')
    return fig

# Run the App
if __name__ == '__main__':
    app.run(debug=True)

在这里插入图片描述

结语

如果您觉得该方法或代码有一点点用处，可以给作者点个赞，或打赏杯咖啡；╮(￣▽￣)╭ 如果您感觉方法或代码不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O??? 如果您需要相关功能的代码定制化开发，可以留言私信作者；(✿◡‿◡) 感谢各位大佬童鞋们的支持！( ´ ▽´ )ﾉ ( ´ ▽´)っ！！！

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载，内容版权归原作者所有。本网站的目的在于传递更多信息，不拥有版权，亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@moduyun.com
  1. 分享：
最后一次编辑于 2023年11月14日 0

暂无评论

推荐阅读
  wHzpr52qU9fJ   2023年11月02日   24   0   0 应用程序通用微软操作系统windows
  I6bYKJOwynuQ   2023年11月14日   34   0   0 应用程序插入图片Python
  I6bYKJOwynuQ   2023年11月24日   32   0   0 html服务端服务器
  xhftNGSA9iAy   2023年11月02日   68   0   0 应用程序Android依赖库
  xhftNGSA9iAy   2023年11月02日   31   0   0 开发者证书App开发者
  Y8XIq1u6ceQW   2023年11月19日   29   0   0 html小游戏
  I6bYKJOwynuQ   2023年11月22日   26   0   0 html服务端客户端
  lnZqfDbuKjjk   2023年11月02日   66   0   0 csshtml游戏css33d
  lnZqfDbuKjjk   2023年11月12日   42   0   0 csshtml游戏设计模式github
  I6bYKJOwynuQ   2023年11月19日   26   0   0 html插入图片Python
  7mAe32Awksqt   2023年11月30日   95   0   0 应用程序僵尸网络服务器
  I6bYKJOwynuQ   2023年11月14日   27   0   0 html应用程序App
  xhftNGSA9iAy   2023年11月02日   21   0   0 应用程序App
  xhftNGSA9iAy   2023年11月02日   18   0   0 应用程序微信开放平台微信
I6bYKJOwynuQ
I6bYKJOwynuQ
作者其他文章 更多
【小沐学C++】C++ 基于Premake构建工程项目（代码）

2023-12-11

【小沐学C++】C++ 基于Premake构建工程项目（使用）

2023-12-10

【小沐学C++】C++ 基于Premake构建工程项目（下载）

2023-12-09

【夏虫语冰】测试服务器端口是否打开（ssh、nmap）

2023-12-08

【夏虫语冰】测试服务器端口是否打开（命令行、Python）

2023-12-08

【夏虫语冰】测试服务器端口是否打开（wget、nc）

2023-12-06

【小沐学前端】Node.js实现UDP通信

2023-12-05

【小沐学前端】Node.js实现基于Protobuf协议的数据处理

2023-12-05

【小沐学前端】Node.js实现基于Protobuf协议的UDP通信（代码篇）

2023-12-05

【夏虫语冰】测试服务器端口是否打开（telnet, curl）

2023-12-05

最新推荐 更多
热更学习笔记10~11----lua调用C#中的List和Dictionary、拓展类中的方法

2024-05-20

d3d12龙书阅读----绘制几何体（上） 课后习题

2024-05-20

ue5生成vs工程报错-msvc版本太旧

2024-05-20

Godot Breakeys Godot Beginner Tutorial 游戏开发笔记

2024-05-20

使用自定义委托来调用Lua中的多返回值和长参数类型函数

2024-05-17

使用自定义lua解析管理器调用lua脚本中的table

2024-05-17

d3d12龙书阅读----绘制几何体（下）

2024-05-17

纹理是怎样显示在模型上的

2024-05-17

Lua热更学习--使用toLua中的协程

2024-05-17

toLua中Lua调用C#中的类

2024-05-17

UnityShader数学基础篇

2024-05-17

热更学习笔记--toLau中lua脚本对C#中枚举和数组的访问

2024-05-17

[2]自定义Lua解析方式

2024-05-08

Unity热更学习toLua使用--[1]toLua的导入和默认加载执行lua脚本

2024-05-08

UE floating pawn movement Bug Set location 导致速度异常发射

2024-05-08

自定义Lua解析器管理器-------演化脚本V0.5

2024-05-08

Unity 热更--AssetBundle学习笔记 1.0【AB包资源加载工具类的实现】

2024-05-03

Unity游戏框架设计之背包管理器

2024-05-02

Unity 热更--AssetBundle学习笔记 0.7

2024-05-02

Godot.NET C#IOC重构(8):敌人野猪

2024-05-02

常用标签
数据数据数据数据javalinuxlinuxpythonCentOSredisJavapython区块链技术区块链信息系统字符串MySQL资讯项目管理mysql教程MySQL