【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属性,这样图表就会在应用中显示。
相关推荐
uppp»24 分钟前
深入理解 Java 反射机制:获取类信息与动态操作
java·开发语言
Yan-英杰26 分钟前
百度搜索和文心智能体接入DeepSeek满血版——AI搜索的新纪元
图像处理·人工智能·python·深度学习·deepseek
weixin_307779131 小时前
Azure上基于OpenAI GPT-4模型验证行政区域数据的设计方案
数据仓库·python·云计算·aws
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
多想和从前一样5 小时前
Django 创建表时 “__str__ ”方法的使用
后端·python·django
ll7788115 小时前
LeetCode每日精进:20.有效的括号
c语言·开发语言·算法·leetcode·职场和发展
小喵要摸鱼6 小时前
【Pytorch 库】自定义数据集相关的类
pytorch·python
bdawn7 小时前
深度集成DeepSeek大模型:WebSocket流式聊天实现
python·websocket·openai·api·实时聊天·deepseek大模型·流式输出
Jackson@ML7 小时前
Python数据可视化简介
开发语言·python·数据可视化
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt