【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 参数用于标识这个图表,以便在应用程序中引用。

相关推荐
博观而约取39 分钟前
Django ORM 1. 创建模型(Model)
数据库·python·django
精灵vector2 小时前
构建专家级SQL Agent交互
python·aigc·ai编程
Zonda要好好学习2 小时前
Python入门Day2
开发语言·python
Vertira2 小时前
pdf 合并 python实现(已解决)
前端·python·pdf
太凉2 小时前
Python之 sorted() 函数的基本语法
python
项目題供诗3 小时前
黑马python(二十四)
开发语言·python
晓13133 小时前
OpenCV篇——项目(二)OCR文档扫描
人工智能·python·opencv·pycharm·ocr
是小王同学啊~3 小时前
(LangChain)RAG系统链路向量检索器之Retrievers(五)
python·算法·langchain
AIGC包拥它3 小时前
提示技术系列——链式提示
人工智能·python·langchain·prompt
孟陬3 小时前
Python matplotlib 如何**同时**展示正文和 emoji
python