【Dash】简单的直方图

news2024/11/15 13:29:08

一、Visualizing Data

The Plotly graphing library has more than 50 chart types to choose from. In this example, we will make use of the histogram chart.

# Import packages
from dash import Dash, html, dash_table, dcc
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 the app
app = Dash()

# App layout
app.layout = html.Div([
    html.Div(children='My First App with Data and a Graph'),
    dash_table.DataTable(data=df.to_dict('records'), page_size=15),
    dcc.Graph(figure=px.histogram(df, x='continent', y='lifeExp', histfunc='avg'))
])

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

二、解读

题目要求创建一个基本的仪表板，包含文本、数据表和图表。

# Import packages
from dash import Dash, html, dash_table, dcc
import pandas as pd
import plotly.express as px
Dash用于创建Web应用。
html、dash_table 和 dcc 是 Dash 的组件库。
pandas 是一个数据处理库。
plotly.express 用于快速生成图表。

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
使用 pandas 的 read_csv 函数读取 URL 加载的 CSV 数据文件。
DataFrame df 接收读取的数据。

app = Dash()
app.layout = html.Div([
    html.Div(children='My First App with Data and a Graph'),
    dash_table.DataTable(data=df.to_dict('records'), page_size=15),
    dcc.Graph(figure=px.histogram(df, x='continent', y='lifeExp', histfunc='avg'))
])
创建一个 Dash 应用实例。
app.layout = html.Div([]) 设置 html.Div 组件布局。
html.Div(......) 创建一个包含文本 "My First App with Data and a Graph" 的 div 元素。
dash_table.DataTable(......) 接收一个数据框 df 并将其转换成字典列表，然后显示为一个数据表。page_size = 15 指定显示的页数。
dcc.Graph(......) 用于显示图表，使用 plotly.express 的 px.histogram 函数，根据DataFram df 中的数据创建一个直方图图表的 X 轴是'continent'， Y轴是'liftExp' ，并使用了 'avg' 函数来计算直方图的均值。