【Dash】HTML 组件创建直方图

一、HTML Component

Dash HTML Components contains a component class for every HTML tag as well as keyword arguments for all of the HTML arguments.

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

app = Dash()

colors = {
    'background': '#293844',
    'text': '#F2F2F2'
}

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

fig = px.bar(df, x='Fruit', y='Amount', color='City', barmode='group',
             color_discrete_sequence=['#FFCCCC', '#FFF1DD', '#99C3D9', '#89D7BC'])

fig.update_layout(
    plot_bgcolor=colors['background'],
    paper_bgcolor=colors['background'],
    font_color=colors['text']
)

app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
    html.H1(
        children='Hello Dash',
        style={
            'textAlign': 'center',
            'color': colors['text']
        }
    ),

    html.Div(children='Dash: A web application framework for your data.', style={
        'textAlign': 'center',
        'color': colors['text']
    }),

    dcc.Graph(
        id='example-graph-2',
        figure=fig
    )
])


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

二、解读

python 复制代码
from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
  • 导入Dash类(创建应用程序)、dcc组件(动态交互组件)、html组件(静态HTML组件)
  • 导入 plotly.express 模块,用于创建 Plotly 图表
  • 导入 pandas 库,用于数据处理
python 复制代码
app = Dash()
  • 创建 Dash 类的实例,作为整个 Dash 应用程序的入口点
python 复制代码
colors = {
    'background': '#293844',
    'text': '#F2F2F2'
}
  • 定义一个字典 colors ,包含两个键值对,分别设置背景颜色和文本颜色
python 复制代码
df = pd.DataFrame({
    'Fruit': ['Apples', 'Oranges', 'Bananas', 'Apples', 'Oranges', 'Bananas'],
    'Amount': [4, 1, 4, 4, 2, 5],
    'City': ['SF', 'SF', 'SF', 'Montreal', 'Montreal', 'Montreal']
})
  • 创建一个名为 dfpandas DataFrame,其中包含三列:'Fruit'、'Amount' 和 'City'。它用于存储水果数据。

|---------|--------|----------|
| Fruit | Amount | City |
| Apples | 4 | SF |
| Oranges | 1 | SF |
| Bananas | 4 | SF |
| Apples | 4 | Montreal |
| Oranges | 2 | Montreal |
| Bananas | 5 | Montreal |

python 复制代码
fig = px.bar(df, x='Fruit', y='Amount', color='City', barmode='group',
            color_discrete_sequence=['#FFCCCC', '#FFF1DD', '#99C3D9', '#89D7BC'])
  • px.bar 创建一个柱形图
  • df:数据源
  • x 参数:指定 x 轴为 'Fruit'
  • y 参数:指定 y 轴为 'Amount'
  • color 参数:按 'City' 列对条形进行分组
  • barmode 参数:控制柱形图显示方式:
    • ='group' :每个分组的条形并排显示
    • ='overlay':每个分组的条形重叠显示
    • ='stack':每个分组的条形堆叠显示
  • color_discrete_sequence 定义不同城市的条形颜色。
python 复制代码
fig.update_layout(
    plot_bgcolor=colors['background'],
    paper_bgcolor=colors['background'],
    font_color=colors['text']
)
  • update_layout 方法更新图表的布局设置,包括背景颜色、字体颜色、标题等,但不直接用于对条形图中的每个条形设置不同的颜色。
python 复制代码
app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
    html.H1(
        children='Hello Dash',
        style={
            'textAlign': 'center',
            'color': colors['text']
        }),

    html.Div(children='Dash: A web application framework for your data.', 
        style={
            'textAlign': 'center',
            'color': colors['text']
        }),


    dcc.Graph(
        id='example-graph-2',
        figure=fig
    )
])
  • app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[...]

设置 app 布局,用 html.Div 组件包裹所有子组件,并设置背景颜色。

children是一个列表,包含所有要显示的子组件。

  • html.H1(children=...., style={...})

创建一个标题组件 html.H1,显示 Hello Dash,文本居中,并定义文本颜色

  • html.Div(children=..., style={...})

创建一个 html.Div 组件,文本居中,并定义文本颜色

  • dcc.Graph(id='example-graph-2', figure=fig)

创建一个 dcc.Graph 组件,用于显示之前创建的图表 fig。

id 参数用于标识这个图表,以便在应用程序中引用。

相关推荐
chao_7894 小时前
二分查找篇——搜索旋转排序数组【LeetCode】一次二分查找
数据结构·python·算法·leetcode·二分查找
烛阴4 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
noravinsc4 小时前
django 一个表中包括id和parentid,如何通过parentid找到全部父爷id
python·django·sqlite
ajassi20005 小时前
开源 python 应用 开发(三)python语法介绍
linux·python·开源·自动化
沉默媛5 小时前
如何安装python以及jupyter notebook
开发语言·python·jupyter
Deng9452013146 小时前
基于Python的旅游数据可视化应用
python·numpy·pandas·旅游·数据可视化技术
2401_878624796 小时前
pytorch 自动微分
人工智能·pytorch·python·机器学习
胖达不服输6 小时前
「日拱一码」021 机器学习——特征工程
人工智能·python·机器学习·特征工程
screenCui7 小时前
macOS运行python程序遇libiomp5.dylib库冲突错误解决方案
开发语言·python·macos
小眼睛羊羊7 小时前
pyinstaller打包paddleocr
python