【Dash】使用 dash_mantine_components 创建图表

一、Styling Your App

The examples in the previous section used Dash HTML Components to build a simple app layout, but you can style your app to look more professional. This section will give a brief overview of the multiple tools that you can use to enhance the layout style of a Dash app:

  • HTML and CSS
  • Dash Design kit (DDK)
  • Dash Bootstrap Components
  • Dash Mantine Components

二、Dash Mantine Components

Dash Mantine is as community-maintained library built off of the Mantine component system. Although it is not officially maintained or supported by the Plotly team, Dash Mantine is another powerful way of customizing app layouts. The Dash Mantine Components uses the Grid module to structure the layout. Instead of defining a row, we define admc.Grid, within which we insert dmc.Col s and define their width by assigning a number to the spanproperty.

For the app below to run successfully, make sure to install the Dash Mantine Components library: pip install dash-mantine-components==0.12.1

python 复制代码
from dash import Dash, dash_table, dcc, callback, Output, Input
import pandas as pd
import plotly.express as px
import dash_mantine_components as dmc

df = pd.read_csv('https://raw.githubusercontent.com/GarciaShanCW/DATA/main/DataAnalysis01.csv')

app = Dash(__name__)

app.layout = dmc.MantineProvider(
    theme={'colorScheme': 'light'},
    children=dmc.Container([
        dmc.Title('My First App with Data, Graph, and Control', 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)
)


@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


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

三、解读

dash_mantine_components 是一个基于 Mantine Design System 的 Dash 组件库。它允许开发者在 Dash 应用程序中使用 Mantine 的组件来构建用户界面。Mantine 是一个现代化的、功能丰富的 React UI 组件库。

python 复制代码
from dash import Dash, dash_table, dcc, callback, Output, Input
import pandas as pd
import plotly.expree as px
imoprt dash_mantine_components as dmc
  • 导入 Dash 库中的主要组件,包括Dash 类、dash_table、dcc(Dash 核心组件库)以及回调函数所需的 Output 和 Input
  • 导入 pandas 库,并简称 pd,用于数据处理
  • 导入 plotly.express 库,并简称为 px,用于创建交互式图表
  • 导入 dash_mantine_components 库,并简称为 dmc ,这是一个 Dash UI 组件库
python 复制代码
app = Dash(__name__)

app.layout = dmc.MantineProvider(
    theme={'colorScheme': 'light'},
    children=dmc.Container([
        dmc.Title('My First App with Data, Graph, and Control', 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)
)
  • app.layout = dmc.MantineProvider(....) 设置 Dash 应用的布局,使用 MantineProvider 组件来提供主题样式
  • theme={'colorScheme': 'light'}, 设置应用的主题色为浅色
  • children=dmc.Container([...]) 在 MantineProvider 中添加一个容器组件,包含应用的主要内容
  • dmc.Title(...) 添加一个标题组件,显示应用的标题
  • dmc.RadioGroup([...]) 创建一个单选按钮组,允许用户选择不同的数据列进行图表展示
  • dmc.Grid([...]) 创建一个网格布局,用于在页面上排列不同的组件
  • dmc.Col([...]) 在网格布局中添加列组件,用户放置 DataTable 或 Graph 等组件
  • dash_table.DataTable(...) 添加一个 DataTable 组件,用于显示数据表
  • dcc.Graph(...) 添加 Graph 组件,用于显示图表
python 复制代码
@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
  • 定义一个回调函数,用于更新图表
  • Output 指定回调函数的输出,即更新 graph-placeholder 组件的 figure 属性
  • Input 指定回调函数的输入,即监听 my-dmc-radio-item 组件的 value 属性变化
  • 定义回调函数 update_garaph,根据用户选择的列更新图表
  • px.histogram(...) 使用 plotly.express 创建一个直方图,返回更新后的图表对象
相关推荐
lzhlizihang1 分钟前
python如何使用spark操作hive
hive·python·spark
q0_0p2 分钟前
牛客小白月赛105 (Python题解) A~E
python·牛客
极客代码5 分钟前
【Python TensorFlow】进阶指南(续篇三)
开发语言·人工智能·python·深度学习·tensorflow
庞传奇7 分钟前
TensorFlow 的基本概念和使用场景
人工智能·python·tensorflow
华清远见IT开放实验室15 分钟前
【每天学点AI】实战图像增强技术在人工智能图像处理中的应用
图像处理·人工智能·python·opencv·计算机视觉
mqiqe39 分钟前
Elasticsearch 分词器
python·elasticsearch
不去幼儿园2 小时前
【MARL】深入理解多智能体近端策略优化(MAPPO)算法与调参
人工智能·python·算法·机器学习·强化学习
幽兰的天空3 小时前
Python 中的模式匹配:深入了解 match 语句
开发语言·python
网易独家音乐人Mike Zhou6 小时前
【卡尔曼滤波】数据预测Prediction观测器的理论推导及应用 C语言、Python实现(Kalman Filter)
c语言·python·单片机·物联网·算法·嵌入式·iot
安静读书6 小时前
Python解析视频FPS(帧率)、分辨率信息
python·opencv·音视频