【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 创建一个直方图,返回更新后的图表对象
相关推荐
计算机学姐9 分钟前
基于Python的高校成绩分析管理系统
开发语言·vue.js·后端·python·mysql·pycharm·django
北京_宏哥13 分钟前
《最新出炉》系列入门篇-Python+Playwright自动化测试-50-滚动条操作
python·前端框架·测试
九年义务漏网鲨鱼16 分钟前
【人脸伪造检测后门攻击】 Exploring Frequency Adversarial Attacks for Face Forgery Detection
论文阅读·python·算法·aigc
天冬忘忧30 分钟前
Spark 共享变量:广播变量与累加器解析
大数据·python·spark
NK.MainJay1 小时前
Go语言 HTTP 服务模糊测试教程
python·http·golang
南宫理的日知录1 小时前
106、Python并发编程:深入浅出理解线程池的内部实现原理
开发语言·python·学习·编程学习
萧鼎1 小时前
Python中的随机数生成与控制:random库实战解析
python·random·随机数
三维重建--小博主2 小时前
人群计数制作私有数据集教程-----自用
python·opencv·计算机视觉
sagima_sdu2 小时前
Python 操作 Neo4J,Python 库 Py2Neo
python·oracle·neo4j
B站计算机毕业设计超人2 小时前
计算机毕业设计Python+Neo4j中华古诗词可视化 古诗词智能问答系统 古诗词数据分析 古诗词情感分析 PyTorch Tensorflow LSTM
pytorch·python·深度学习·机器学习·知识图谱·neo4j·数据可视化