【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 创建一个直方图,返回更新后的图表对象
相关推荐
程序员shen16161136 分钟前
抖音短视频saas矩阵源码系统开发所需掌握的技术
java·前端·数据库·python·算法
人人人人一样一样1 小时前
作业Python
python
四口鲸鱼爱吃盐1 小时前
Pytorch | 利用VMI-FGSM针对CIFAR10上的ResNet分类器进行对抗攻击
人工智能·pytorch·python
四口鲸鱼爱吃盐1 小时前
Pytorch | 利用PI-FGSM针对CIFAR10上的ResNet分类器进行对抗攻击
人工智能·pytorch·python
小陈phd2 小时前
深度学习之超分辨率算法——SRCNN
python·深度学习·tensorflow·卷积
CodeClimb2 小时前
【华为OD-E卷-简单的自动曝光 100分(python、java、c++、js、c)】
java·python·华为od
数据小小爬虫2 小时前
如何利用Python爬虫获取商品历史价格信息
开发语言·爬虫·python
NiNg_1_2342 小时前
Python的sklearn中的RandomForestRegressor使用详解
开发语言·python·sklearn
黑色叉腰丶大魔王2 小时前
《基于 Python 的网页爬虫详细教程》
开发语言·爬虫·python