【Dash】使用 HTML 和 CSS 创建图表

avatar
作者
筋斗云
阅读量:0

一、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

二、HTML and CSS

HTML and CSS are the lowest level of interface for rendering content on the web. The HTML is a set of components, and CSS is a set of styles applied to those components. CSS styles can be applied within components via the style property, or they can be defined as a separate CSS file in reference with the className property.

# Import packages from dash import Dash, html, dash_table, dcc, callback, Output, Input import pandas as pd import plotly.express as px  # Incorporate data df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')  # Initialize th app - incorporate css external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] app = Dash(external_stylesheets=external_stylesheets)  # App layout app.layout = html.Div([     html.Div(className='row', children='My First App with Data, Graph, and Controls',              style={'textAlign': 'center', 'color': 'blue', 'fontSize': 30}),      html.Div(className='row', children=[         dcc.RadioItems(options=['pop', 'lifeExp', 'gdpPercap'],                        value='lifeExp',                        inline=True,                        id='my-radio-buttons-final')     ]),      html.Div(className='row', children=[         html.Div(className='six columns', children=[             dash_table.DataTable(data=df.to_dict('records'),                                  page_size=11,                                  style_table={'overflowX': 'auto'})         ]),         html.Div(className='six columns', children=[             dcc.Graph(figure={}, id='histo-chart-final')         ])     ]) ])   # Add controls to build the interaction @callback(     Output(component_id='histo-chart-final', component_property='figure'),     Input(component_id='my-radio-buttons-final', component_property='value') ) def update_graph(col_chosen):     fig = px.histogram(df, x='continent', y=col_chosen, histfunc='avg')     return fig   # Run the app if __name__ == '__main__':     app.run(debug=True)  

三、解读

# Import packages from dash import Dash, html, dash_table, dcc, callback, Output, Input import pandas as pd import plotly.express as px
  • 导入所需 Python 包。 Dash 用于创建 Web 应用,pandas 用于数据处理,plotly.express 用于快速生成图表。
# Incorporate data df =  pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
  • 使用 pandas 的 read_csv 函数读取URL的csv数据文件,加载到 DataFrame df。
# Initialize the app - incorporate css external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] app = Dash(external_stylesheets=external_stylesheets)
  • 初始化 Dash 应用,并提供一个外部 CSS 文件的链接,该 CSS 将被用于应用的样式。
# App layout app.layout = html.Div([     # ..... Layout components ])
  • 设置应用的布局,使用 html.Div 作为根容器。
html.Div(className='row', children='My First App with Data, Graph, and controls',         style={'textAlign': 'center', 'color': 'blue', 'fontSize': 30}),
  • 创建一个包含文本的 div 容器,使用 className 指定一个 CSS 类,使用 style 属性直接设置样式。(文本居中,蓝色,字体大小30)
html.Div(className='row', children=[     dcc.RadioItems(options=['pop', 'lifeExp', 'gdpPercap'],                     value='lefeExp',                     inline=True,                     id='my-radio-buttons-final') ]),
  • 创建一个包含单选按钮的 div 容器(dcc.RadioItems())。
  • 使用 className 指定 CSS 类,children 包含 dcc.RadioItems 组件。
  • className='row' : 给 dvi 元素添加一个或多个 CSS 类。这些类通常在 CSS 央视表中定义,用于控制元素的布局和外观。这里表示子元素水平排列。
  • children=[...]:是一个列表,包含要放在 dvi 容器内的组件,在 Dash 中,children 参数可以是单个组件或组件列表,用于定义组件的嵌套结构。
  • options=['pop', 'lifeExp', 'gdpPercap']:包含单选按钮组的选项,每个字符串代表一个选项的标签,用户可以从中选择。
  • value='leftExp' : 指定单选按钮组的初始值。
  • inline=True:这个布尔值参数决定单选按钮是否应该内联显示(即水平排列)。如果设置为 True 则按钮会水平排列;如果为 False 或省略则按钮会垂直排列。
  • id='my-radio-buttons-final':是组件的唯一标识符,用于在应用的布局和回调函数中引用和这个组件,ID 在 Dash 应用中是必须的,用于控制交互和动态更新。
html.Div(className='row', children=[     html.Div(className='six columns', children=[         dash_table.DataTable(data=df.to_dict('records'), page_size=11, style_table={'overflowX': 'auto'})     ]),          html.Div(className='six columns', children=[         dcc.Graph(figure={}, id='histo-char-final')     ]) ])
  • 创建一个包含两列的 div 容器,通常用于构建栅格布局,每列由 html.Div 组件表示,并且各自包含不同的组件。
  • 一个是 dash_table.DataTable 组件,用于显示数据表
  • 另一个是 dcc.Graph 组件,用于显示图表。

外层 html.Div 参数 html.Div(className='row', children=[...])

  • className='row':指定 CSS 类名,用于定义这个 div 容器的样式。在很多前段框架中(如 Bootstrap 或 Foundation),'row' 类用于创建一个行容器,其子元素将水平排列。
  • children=[...] 列表:包含要放在当前 div 容器内的子组件。这里包含两个子组件 html.Div。

子组件 html.Div 参数:

html.Div(className='six columns', children=[     dash_table.DataTable(data=df.to_dict('records'), page_size=11,                         style_table={'overflowX': 'auto'}) ]),
  • 第一个子组件 
  • className='six columns':指定 CSS 类名,通常用于定义这个 div 容器占据的栅格列数。在栅格系统中,这可能表示该容器占据六列,具体解释取决于 CSS 框架或自定义样式的定义。
  • children:包含一个 dash_table.DataTable 组件,用于显示数据表。
html.Div(className='six columns', children=[     dcc.Graph(figure={}, id='histo-chart-final') ])
  • 第二个子组件
  • className='six columns':同上,表示这个 div 容器占据六列。
  • children:包含一个 dcc.Graph 组件,用于显示图表。

dash_table.DataTable 参数:

  • data=df.to_dict('records'):指定要显示在数据表中的数据,这里使用 pandas DataFrame 的 to_dict('records') 方法将数据转换为字典列表。
  • page_size=11:指定数据表每页显示的行数。
  • style_table={'overflowX': 'auto'}:指定表格的内联格式。这里设置 overflowX 为 'auto',意味着如果表格内容超出容器宽度,将显示水平滚动条。

dcc.Graph 参数:

  • figure={}:指定图表的数据和配置。这里设置为空字典,意味着图表初始时没有数据。
  • id='histo-chart-final' :指定图表的唯一标识符,用在回调函数中引用这个图表组件。
# Add controls to build the interacion @callback(     Output(component_id='histo-chart-final', component_property='figuure'),     Input(component_id='my-radio-buttons-final', component_property='value') ) def update_graph(col_chosen):     fig = px.histogram(df, x='continent', y=col_chosen, histfunc='avg')     return fig )
  • 定义一个回调函数 update_graph,根据 dcc.RadioItems 组件的选中值动态更新 dcc.Graph 组件的图表。
  • @callback 是一个装饰器,用于注册一个回调函数,定义应用中的交互逻辑。
  • def update_graph(col_chosen):这一行定义了回调函数本身,update_graph 是函数名,col_chosen是函数的参数名,代表从 Input 属性传递回调函数的值。
  • fig = px.historgram(...):使用 plotly.express 的 px.histogram 创建一个直方图。
  • 从回调函数中返回对象 fig,Dash 将使用这个对象更新图表组件。
# Run the app if __name__ == '__main__':     app.run(debug=True)
  • 启动 Dash 应用服务,并开启调试模式。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!