【Dash】Dash Layout

一、Dash Layout

Dash apps are composed of two parts. The first part is the 'layout', which describes what the app looks like. The second part describes the interactivity of the app.

To get started, create a file namedapp.py , copy the code below into it, and then run it with python app.py

python 复制代码
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

app = Dash()

df = pd.DataFrame({
    'Fruit': ['Apples', 'Oranges', 'Bananas', 'Apples', 'Oranges', 'Bananas'],
    'Amout': [4, 1, 2, 2, 4, 5],
    'City': ['SF', 'SF', 'SF', 'Montreal', 'Montreal', 'Montreal']
})


fig = px.bar(df, x='Fruit', y='Amout', color='City', barmode='group')

app.layout = html.Div(
    children=[
        html.H1(children='Hello Dash'),
        html.Div(children='''
            Dash: A web application framework for your data.
        '''),
        
        dcc.Graph(
            id='example-graph',
            figure=fig
        )
])



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

二、解读

python 复制代码
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd
  • 导入 Dash 库中的Dash 类(用于 Dash应用)、html模块(提供HTML元素)和 dcc 模块(提供Dash核心组件)
  • 导入 plotly.express 库,简称 px,用于创建图表
  • 导入 pandas 库,简称pd,用于数据处理
python 复制代码
df = pd.DataFrame({
    'Fruit': ['Apples', 'Oranges', 'Bananas', 'Apples', 'Oranges', 'Bananas'],
    'Amount': [4, 1, 2, 2, 4, 5],
    'City': ['SF', 'SF', 'SF', 'Montreal', 'Montreal', 'Montreal']
})
  • 创建一个包含水果名称、数量、城市的数据
python 复制代码
fig = px.bar(df, x='Fruit', y='Amount', color='City', barmode='group')
  • 使用 plotly.express 的 bar 函数创建一个分组条形图,其中 x 轴是水果、y轴是数量、颜色表示不同的城市,'barmode'参数设置为'group',表示将相同水果的条形分组显示。
python 复制代码
app.layout = html.Div(
        children=[
            html.H1(children='Hello Dash'),
            html.Div(children='''
                Dash: A web application framework for your data.
            '''),

            dcc.Graph(
                id='example-graph',
                figure=fig
            )
])
  • 设置Dash应用的布局,使用html.Div作为容器。
  • 'children'参数用于定义Div容器中的子元素。
  • 创建一个H1标题元素,显示文本'Hello Dash'。
  • 创建一个Div元素,并在其中放置文本,这段文本是对Dash的简单介绍。
  • 创建一个dcc.Graph组件,用于在Dash应用中嵌入图表。
  • 为图表组件设置一个唯一的ID,这个ID用于在回调函数中引用这个图表。
  • 将之前创建的条形图fig赋值给图表组件的figure属性,这样图表就会在应用中显示。
相关推荐
Joey_friends40 分钟前
【Linux】线程详解
开发语言
紫雾凌寒42 分钟前
计算机视觉 |解锁视频理解三剑客——TimeSformer
python·深度学习·神经网络·计算机视觉·transformer·timesformer
_GR1 小时前
Qt开发⑧Qt的窗口_下_浮动窗口+对话框
开发语言·css·c++·qt·microsoft
Good Note1 小时前
Golang——常用库context和runtime
开发语言·爬虫·golang
程序员杰哥1 小时前
测试用例详解
自动化测试·软件测试·python·功能测试·测试工具·职场和发展·测试用例
清河__1 小时前
【Go】十七、grpc 服务的具体功能编写
开发语言·后端·golang
张声录12 小时前
国密算法Sm2工具类--golang实现版
开发语言·后端·golang
HH牛码2 小时前
C# 中 Array、ArrayList 和 List 的比较
开发语言·c#
zr想努力3 小时前
Lua的table类型的增删改查操作
java·开发语言·lua
Evand J4 小时前
【MATLAB代码】RSA加密和解密例程
开发语言·算法·matlab