{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"(dash:layout)=\n",
"# Dash 布局\n",
"\n",
"```{topic} 导航\n",
"本节将通过一些应用程序带领你了解 Dash 应用程序的基础方面：应用程序布局。\n",
"```\n",
"\n",
"Dash 为应用程序的所有可视组件提供了 Python 类。"
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {},
"outputs": [],
"source": [
"import pandas as pd\n",
"import plotly.express as px\n",
"from dash import dcc, html\n",
"from dash import Dash"
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {},
"outputs": [],
"source": [
"app = Dash(__name__)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Dash 小例子"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"创建 plotly 图："
]
},
{
"cell_type": "code",
"execution_count": 3,
"metadata": {},
"outputs": [],
"source": [
"# 假设您有一个 \"long-form\" 数据帧\n",
"# 更多选项请参见 https://plotly.com/python/px-arguments/\n",
"df = pd.DataFrame({\n",
" \"Fruit\": [\"Apples\", \"Oranges\", \"Bananas\", \"Apples\", \"Oranges\", \"Bananas\"],\n",
" \"Amount\": [4, 1, 2, 2, 4, 5],\n",
" \"City\": [\"SF\", \"SF\", \"SF\", \"Montreal\", \"Montreal\", \"Montreal\"]\n",
"})\n",
"\n",
"fig = px.bar(df, x=\"Fruit\", y=\"Amount\", color=\"City\", barmode=\"group\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"设置 Dash 布局："
]
},
{
"cell_type": "code",
"execution_count": 4,
"metadata": {},
"outputs": [],
"source": [
"app.layout = dcc.Graph(\n",
" id='example-graph',\n",
" figure=fig\n",
")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"```python\n",
"if __name__ == '__main__':\n",
" app.run_server(debug=True)\n",
"```"
]
},
{
"cell_type": "code",
"execution_count": 5,
"metadata": {
"tags": [
"remove-input"
]
},
"outputs": [
{
"data": {
"application/vnd.plotly.v1+json": {
"config": {
"plotlyServerURL": "https://plot.ly"
},
"data": [
{
"alignmentgroup": "True",
"hovertemplate": "City=SF
Fruit=%{x}
Amount=%{y}",
"legendgroup": "SF",
"marker": {
"color": "#636efa",
"pattern": {
"shape": ""
}
},
"name": "SF",
"offsetgroup": "SF",
"orientation": "v",
"showlegend": true,
"textposition": "auto",
"type": "bar",
"x": [
"Apples",
"Oranges",
"Bananas"
],
"xaxis": "x",
"y": [
4,
1,
2
],
"yaxis": "y"
},
{
"alignmentgroup": "True",
"hovertemplate": "City=Montreal
Fruit=%{x}
Amount=%{y}",
"legendgroup": "Montreal",
"marker": {
"color": "#EF553B",
"pattern": {
"shape": ""
}
},
"name": "Montreal",
"offsetgroup": "Montreal",
"orientation": "v",
"showlegend": true,
"textposition": "auto",
"type": "bar",
"x": [
"Apples",
"Oranges",
"Bananas"
],
"xaxis": "x",
"y": [
2,
4,
5
],
"yaxis": "y"
}
],
"layout": {
"barmode": "group",
"legend": {
"title": {
"text": "City"
},
"tracegroupgap": 0
},
"margin": {
"t": 60
},
"template": {
"data": {
"bar": [
{
"error_x": {
"color": "#2a3f5f"
},
"error_y": {
"color": "#2a3f5f"
},
"marker": {
"line": {
"color": "#E5ECF6",
"width": 0.5
},
"pattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
}
},
"type": "bar"
}
],
"barpolar": [
{
"marker": {
"line": {
"color": "#E5ECF6",
"width": 0.5
},
"pattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
}
},
"type": "barpolar"
}
],
"carpet": [
{
"aaxis": {
"endlinecolor": "#2a3f5f",
"gridcolor": "white",
"linecolor": "white",
"minorgridcolor": "white",
"startlinecolor": "#2a3f5f"
},
"baxis": {
"endlinecolor": "#2a3f5f",
"gridcolor": "white",
"linecolor": "white",
"minorgridcolor": "white",
"startlinecolor": "#2a3f5f"
},
"type": "carpet"
}
],
"choropleth": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"type": "choropleth"
}
],
"contour": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "contour"
}
],
"contourcarpet": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"type": "contourcarpet"
}
],
"heatmap": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "heatmap"
}
],
"heatmapgl": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "heatmapgl"
}
],
"histogram": [
{
"marker": {
"pattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
}
},
"type": "histogram"
}
],
"histogram2d": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "histogram2d"
}
],
"histogram2dcontour": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "histogram2dcontour"
}
],
"mesh3d": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"type": "mesh3d"
}
],
"parcoords": [
{
"line": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "parcoords"
}
],
"pie": [
{
"automargin": true,
"type": "pie"
}
],
"scatter": [
{
"fillpattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
},
"type": "scatter"
}
],
"scatter3d": [
{
"line": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scatter3d"
}
],
"scattercarpet": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scattercarpet"
}
],
"scattergeo": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scattergeo"
}
],
"scattergl": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scattergl"
}
],
"scattermapbox": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scattermapbox"
}
],
"scatterpolar": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scatterpolar"
}
],
"scatterpolargl": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scatterpolargl"
}
],
"scatterternary": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scatterternary"
}
],
"surface": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "surface"
}
],
"table": [
{
"cells": {
"fill": {
"color": "#EBF0F8"
},
"line": {
"color": "white"
}
},
"header": {
"fill": {
"color": "#C8D4E3"
},
"line": {
"color": "white"
}
},
"type": "table"
}
]
},
"layout": {
"annotationdefaults": {
"arrowcolor": "#2a3f5f",
"arrowhead": 0,
"arrowwidth": 1
},
"autotypenumbers": "strict",
"coloraxis": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"colorscale": {
"diverging": [
[
0,
"#8e0152"
],
[
0.1,
"#c51b7d"
],
[
0.2,
"#de77ae"
],
[
0.3,
"#f1b6da"
],
[
0.4,
"#fde0ef"
],
[
0.5,
"#f7f7f7"
],
[
0.6,
"#e6f5d0"
],
[
0.7,
"#b8e186"
],
[
0.8,
"#7fbc41"
],
[
0.9,
"#4d9221"
],
[
1,
"#276419"
]
],
"sequential": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"sequentialminus": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
]
},
"colorway": [
"#636efa",
"#EF553B",
"#00cc96",
"#ab63fa",
"#FFA15A",
"#19d3f3",
"#FF6692",
"#B6E880",
"#FF97FF",
"#FECB52"
],
"font": {
"color": "#2a3f5f"
},
"geo": {
"bgcolor": "white",
"lakecolor": "white",
"landcolor": "#E5ECF6",
"showlakes": true,
"showland": true,
"subunitcolor": "white"
},
"hoverlabel": {
"align": "left"
},
"hovermode": "closest",
"mapbox": {
"style": "light"
},
"paper_bgcolor": "white",
"plot_bgcolor": "#E5ECF6",
"polar": {
"angularaxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
},
"bgcolor": "#E5ECF6",
"radialaxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
}
},
"scene": {
"xaxis": {
"backgroundcolor": "#E5ECF6",
"gridcolor": "white",
"gridwidth": 2,
"linecolor": "white",
"showbackground": true,
"ticks": "",
"zerolinecolor": "white"
},
"yaxis": {
"backgroundcolor": "#E5ECF6",
"gridcolor": "white",
"gridwidth": 2,
"linecolor": "white",
"showbackground": true,
"ticks": "",
"zerolinecolor": "white"
},
"zaxis": {
"backgroundcolor": "#E5ECF6",
"gridcolor": "white",
"gridwidth": 2,
"linecolor": "white",
"showbackground": true,
"ticks": "",
"zerolinecolor": "white"
}
},
"shapedefaults": {
"line": {
"color": "#2a3f5f"
}
},
"ternary": {
"aaxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
},
"baxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
},
"bgcolor": "#E5ECF6",
"caxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
}
},
"title": {
"x": 0.05
},
"xaxis": {
"automargin": true,
"gridcolor": "white",
"linecolor": "white",
"ticks": "",
"title": {
"standoff": 15
},
"zerolinecolor": "white",
"zerolinewidth": 2
},
"yaxis": {
"automargin": true,
"gridcolor": "white",
"linecolor": "white",
"ticks": "",
"title": {
"standoff": 15
},
"zerolinecolor": "white",
"zerolinewidth": 2
}
}
},
"xaxis": {
"anchor": "y",
"domain": [
0,
1
],
"title": {
"text": "Fruit"
}
},
"yaxis": {
"anchor": "x",
"domain": [
0,
1
],
"title": {
"text": "Amount"
}
}
}
}
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"fig"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"```{admonition} 解析\n",
"- `layout` 由诸如 `html.Div` 和 `dcc.Graph` 之类的组件树组成。\n",
"- 对于每个 HTML 标签都有一个 `html` 库的组件与之对应。比如 `html.H1(children='Hello Dash')` 组件会在应用程序中生成一个 ` Hello Dash
` HTML 元素。\n",
"- 并非所有组件都是纯 HTML。`dcc` 描述了交互式的更高级组件，这些组件是通过 `React.js` 库使用 JavaScript，HTML 和 CSS 生成的。\n",
"- 每个组件都完全通过关键字属性来描述。Dash 是声明性的：将主要通过这些属性来描述您的应用程序。`children` 属性是特殊的。按照惯例，它始终是第一个属性，这意味着您可以忽略它：`html.H1(children='Hello Dash')` 与 `html.H1('Hello Dash')` 相同。而且，它可以包含字符串，数字，单个组件或组件列表。\n",
"- 应用程序中的字体看起来与此处显示的字体可能略有不同。此应用程序使用自定义 CSS 样式表来修改元素的默认样式。您可以在 [CSS 教程](https://dash.plotly.com/external-resources) 中了解更多信息，但现在您可以使用：\n",
"\n",
":::python\n",
"external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']\n",
"\n",
"app = dash.Dash(__name__, external_stylesheets=external_stylesheets)\n",
":::\n",
"\n",
"以获得与这些示例相同的外观。\n",
"```\n",
"\n",
"```{attention} \n",
"（非 Jupyter 环境）\n",
"dash 0.30.0 和 dash-renderer 0.15.0 中的新增功能\n",
"\n",
"Dash 包含“热重载”（\"hot-reloading\"），默认情况下，当您使用 `app.run_server(debug=True)` 运行应用程序时，此功能已激活。这意味着当您更改代码时，Dash 将自动刷新浏览器。\n",
"\n",
"试试看：在应用程序中更改标题“Hello Dash”或更改 x 或 y 数据。您的应用应随您的更改自动刷新。\n",
"\n",
"> 不喜欢热重载吗？您可以使用 `app.run_server(dev_tools_hot_reload=False)` 将其关闭。在 [Dash Dev Tools](https://dash.plotly.com/devtools) 文档中了解更多信息有疑问吗？请参阅[社区论坛热重载](https://community.plotly.com/t/announcing-hot-reload/14177)讨论。\n",
"```\n",
"\n",
"可以更新 plotly 图的主题："
]
},
{
"cell_type": "code",
"execution_count": 6,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.plotly.v1+json": {
"config": {
"plotlyServerURL": "https://plot.ly"
},
"data": [
{
"alignmentgroup": "True",
"hovertemplate": "City=SF
Fruit=%{x}
Amount=%{y}",
"legendgroup": "SF",
"marker": {
"color": "#636efa",
"pattern": {
"shape": ""
}
},
"name": "SF",
"offsetgroup": "SF",
"orientation": "v",
"showlegend": true,
"textposition": "auto",
"type": "bar",
"x": [
"Apples",
"Oranges",
"Bananas"
],
"xaxis": "x",
"y": [
4,
1,
2
],
"yaxis": "y"
},
{
"alignmentgroup": "True",
"hovertemplate": "City=Montreal
Fruit=%{x}
Amount=%{y}",
"legendgroup": "Montreal",
"marker": {
"color": "#EF553B",
"pattern": {
"shape": ""
}
},
"name": "Montreal",
"offsetgroup": "Montreal",
"orientation": "v",
"showlegend": true,
"textposition": "auto",
"type": "bar",
"x": [
"Apples",
"Oranges",
"Bananas"
],
"xaxis": "x",
"y": [
2,
4,
5
],
"yaxis": "y"
}
],
"layout": {
"barmode": "group",
"font": {
"color": "#7FDBFF"
},
"legend": {
"title": {
"text": "City"
},
"tracegroupgap": 0
},
"margin": {
"t": 60
},
"paper_bgcolor": "#111111",
"plot_bgcolor": "#111111",
"template": {
"data": {
"bar": [
{
"error_x": {
"color": "#2a3f5f"
},
"error_y": {
"color": "#2a3f5f"
},
"marker": {
"line": {
"color": "#E5ECF6",
"width": 0.5
},
"pattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
}
},
"type": "bar"
}
],
"barpolar": [
{
"marker": {
"line": {
"color": "#E5ECF6",
"width": 0.5
},
"pattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
}
},
"type": "barpolar"
}
],
"carpet": [
{
"aaxis": {
"endlinecolor": "#2a3f5f",
"gridcolor": "white",
"linecolor": "white",
"minorgridcolor": "white",
"startlinecolor": "#2a3f5f"
},
"baxis": {
"endlinecolor": "#2a3f5f",
"gridcolor": "white",
"linecolor": "white",
"minorgridcolor": "white",
"startlinecolor": "#2a3f5f"
},
"type": "carpet"
}
],
"choropleth": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"type": "choropleth"
}
],
"contour": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "contour"
}
],
"contourcarpet": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"type": "contourcarpet"
}
],
"heatmap": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "heatmap"
}
],
"heatmapgl": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "heatmapgl"
}
],
"histogram": [
{
"marker": {
"pattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
}
},
"type": "histogram"
}
],
"histogram2d": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "histogram2d"
}
],
"histogram2dcontour": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "histogram2dcontour"
}
],
"mesh3d": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"type": "mesh3d"
}
],
"parcoords": [
{
"line": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "parcoords"
}
],
"pie": [
{
"automargin": true,
"type": "pie"
}
],
"scatter": [
{
"fillpattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
},
"type": "scatter"
}
],
"scatter3d": [
{
"line": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scatter3d"
}
],
"scattercarpet": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scattercarpet"
}
],
"scattergeo": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scattergeo"
}
],
"scattergl": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scattergl"
}
],
"scattermapbox": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scattermapbox"
}
],
"scatterpolar": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scatterpolar"
}
],
"scatterpolargl": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scatterpolargl"
}
],
"scatterternary": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scatterternary"
}
],
"surface": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "surface"
}
],
"table": [
{
"cells": {
"fill": {
"color": "#EBF0F8"
},
"line": {
"color": "white"
}
},
"header": {
"fill": {
"color": "#C8D4E3"
},
"line": {
"color": "white"
}
},
"type": "table"
}
]
},
"layout": {
"annotationdefaults": {
"arrowcolor": "#2a3f5f",
"arrowhead": 0,
"arrowwidth": 1
},
"autotypenumbers": "strict",
"coloraxis": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"colorscale": {
"diverging": [
[
0,
"#8e0152"
],
[
0.1,
"#c51b7d"
],
[
0.2,
"#de77ae"
],
[
0.3,
"#f1b6da"
],
[
0.4,
"#fde0ef"
],
[
0.5,
"#f7f7f7"
],
[
0.6,
"#e6f5d0"
],
[
0.7,
"#b8e186"
],
[
0.8,
"#7fbc41"
],
[
0.9,
"#4d9221"
],
[
1,
"#276419"
]
],
"sequential": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"sequentialminus": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
]
},
"colorway": [
"#636efa",
"#EF553B",
"#00cc96",
"#ab63fa",
"#FFA15A",
"#19d3f3",
"#FF6692",
"#B6E880",
"#FF97FF",
"#FECB52"
],
"font": {
"color": "#2a3f5f"
},
"geo": {
"bgcolor": "white",
"lakecolor": "white",
"landcolor": "#E5ECF6",
"showlakes": true,
"showland": true,
"subunitcolor": "white"
},
"hoverlabel": {
"align": "left"
},
"hovermode": "closest",
"mapbox": {
"style": "light"
},
"paper_bgcolor": "white",
"plot_bgcolor": "#E5ECF6",
"polar": {
"angularaxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
},
"bgcolor": "#E5ECF6",
"radialaxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
}
},
"scene": {
"xaxis": {
"backgroundcolor": "#E5ECF6",
"gridcolor": "white",
"gridwidth": 2,
"linecolor": "white",
"showbackground": true,
"ticks": "",
"zerolinecolor": "white"
},
"yaxis": {
"backgroundcolor": "#E5ECF6",
"gridcolor": "white",
"gridwidth": 2,
"linecolor": "white",
"showbackground": true,
"ticks": "",
"zerolinecolor": "white"
},
"zaxis": {
"backgroundcolor": "#E5ECF6",
"gridcolor": "white",
"gridwidth": 2,
"linecolor": "white",
"showbackground": true,
"ticks": "",
"zerolinecolor": "white"
}
},
"shapedefaults": {
"line": {
"color": "#2a3f5f"
}
},
"ternary": {
"aaxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
},
"baxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
},
"bgcolor": "#E5ECF6",
"caxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
}
},
"title": {
"x": 0.05
},
"xaxis": {
"automargin": true,
"gridcolor": "white",
"linecolor": "white",
"ticks": "",
"title": {
"standoff": 15
},
"zerolinecolor": "white",
"zerolinewidth": 2
},
"yaxis": {
"automargin": true,
"gridcolor": "white",
"linecolor": "white",
"ticks": "",
"title": {
"standoff": 15
},
"zerolinecolor": "white",
"zerolinewidth": 2
}
}
},
"xaxis": {
"anchor": "y",
"domain": [
0,
1
],
"title": {
"text": "Fruit"
}
},
"yaxis": {
"anchor": "x",
"domain": [
0,
1
],
"title": {
"text": "Amount"
}
}
}
}
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"colors = {\n",
" 'background': '#111111',\n",
" 'text': '#7FDBFF'\n",
"}\n",
"\n",
"fig.update_layout(\n",
" plot_bgcolor=colors['background'],\n",
" paper_bgcolor=colors['background'],\n",
" font_color=colors['text']\n",
")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Dash `html` 样式\n",
"\n",
"`html` 库包含每个 HTML 标记的组件类以及所有 HTML 参数的关键字参数。使用 `style` 属性可以修改 `html.Div` 和 `html.H1` 等组件的内联样式。比如，`html.H1('Hello Dash', style={'textAlign': 'center', 'color': '#7FDBFF'})` 在 Dash 应用程序中呈现为`Hello Dash
`。\n",
"\n",
"`html` 和 HTML 属性之间有一些重要的区别：\n",
"\n",
"1. HTML 中的 `style` 属性是用分号分隔的字符串。在 Dash 中，仅提供字典。\n",
"2. `style` 字典中的键是驼峰式的。比如，可以是 `textAlign`，而不是 `text-align`。\n",
"3. HTML `class` 属性是 Dash 中的 `className`。\n",
"4. HTML 标记的子代是通过 `children` 关键字参数指定的。按照惯例，这始终是第一个参数，因此经常被省略。\n",
"\n",
"除此之外，您还可以在 Python 上下文中使用所有可用的 HTML 属性和标记。\n",
"\n",
"## Dash 可重复使用的组件\n",
"\n",
"通过使用 Python 编写标记，可以创建复杂的可重用组件（例如表），而无需切换上下文或语言。\n",
"\n",
"这是一个简单的示例，该示例根据 Pandas 数据框生成“表格”。使用以下代码创建一个名为 {download}`../tests/dash-examples/reusable_components.py` 的文件：\n",
"\n",
"\n",
"```{include} ../tests/dash-examples/reusable_components.py\n",
":code: python\n",
"```"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Dash 可视化组件\n",
"\n",
"`dcc` 库包含一个名为 `Graph` 的组件。`Graph` 使用开源 [plotly.js](https://github.com/plotly/plotly.js) JavaScript 图形库呈现交互式数据可视化。Plotly.js 支持超过 35 种图表类型，并以矢量质量 SVG 和高性能 WebGL 呈现图表。\n",
"\n",
"`dcc.Graph` 组件中的 `Figure` 参数与 Plotly 的开源 Python 图形库 `plotly.py` 使用的图形参数相同。请查看 [plotly.py 文档和画廊](https://plotly.com/python) 以了解更多信息。\n",
"\n",
"这是一个从 Pandas 数据框创建散点图的示例。"
]
},
{
"cell_type": "code",
"execution_count": 7,
"metadata": {},
"outputs": [],
"source": [
"import pandas as pd\n",
"\n",
"df = pd.read_csv('https://gist.githubusercontent.com/chriddyp/5d1ea79569ed194d432e56108a04d188/raw/a9f9e8076b837d541398e999dcbac2b2826a81f8/gdp-life-exp-2007.csv')\n",
"fig = px.scatter(df, x=\"gdp per capita\", y=\"life expectancy\",\n",
" size=\"population\", color=\"continent\", hover_name=\"country\",\n",
" log_x=True, size_max=60)\n",
"layout = html.Div([\n",
" dcc.Graph(\n",
" id='life-exp-vs-gdp',\n",
" figure=fig\n",
" )\n",
"])"
]
},
{
"cell_type": "code",
"execution_count": 8,
"metadata": {
"tags": [
"remove-input"
]
},
"outputs": [
{
"data": {
"application/vnd.plotly.v1+json": {
"config": {
"plotlyServerURL": "https://plot.ly"
},
"data": [
{
"hovertemplate": "%{hovertext}
continent=Asia
gdp per capita=%{x}
life expectancy=%{y}
population=%{marker.size}",
"hovertext": [
"Afghanistan",
"Bahrain",
"Bangladesh",
"Cambodia",
"China",
"Hong Kong, China",
"India",
"Indonesia",
"Iran",
"Iraq",
"Israel",
"Japan",
"Jordan",
"Korea, Dem. Rep.",
"Korea, Rep.",
"Kuwait",
"Lebanon",
"Malaysia",
"Mongolia",
"Myanmar",
"Nepal",
"Oman",
"Pakistan",
"Philippines",
"Saudi Arabia",
"Singapore",
"Sri Lanka",
"Syria",
"Taiwan",
"Thailand",
"Vietnam",
"West Bank and Gaza",
"Yemen, Rep."
],
"legendgroup": "Asia",
"marker": {
"color": "#636efa",
"size": [
31889923,
708573,
150448339,
14131858,
1318683096,
6980412,
1110396331,
223547000,
69453570,
27499638,
6426679,
127467972,
6053193,
23301725,
49044790,
2505559,
3921278,
24821286,
2874127,
47761980,
28901790,
3204897,
169270617,
91077287,
27601038,
4553009,
20378239,
19314747,
23174294,
65068149,
85262356,
4018332,
22211743
],
"sizemode": "area",
"sizeref": 366300.86,
"symbol": "circle"
},
"mode": "markers",
"name": "Asia",
"orientation": "v",
"showlegend": true,
"type": "scatter",
"x": [
974.5803384,
29796.04834,
1391.253792,
1713.778686,
4959.114854,
39724.97867,
2452.210407,
3540.651564,
11605.71449,
4471.061906,
25523.2771,
31656.06806,
4519.461171,
1593.06548,
23348.13973,
47306.98978,
10461.05868,
12451.6558,
3095.772271,
944,
1091.359778,
22316.19287,
2605.94758,
3190.481016,
21654.83194,
47143.17964,
3970.095407,
4184.548089,
28718.27684,
7458.396327,
2441.576404,
3025.349798,
2280.769906
],
"xaxis": "x",
"y": [
43.828,
75.635,
64.062,
59.723,
72.961,
82.208,
64.698,
70.65,
70.964,
59.545,
80.745,
82.603,
72.535,
67.297,
78.623,
77.588,
71.993,
74.241,
66.803,
62.069,
63.785,
75.64,
65.483,
71.688,
72.777,
79.972,
72.396,
74.143,
78.4,
70.616,
74.249,
73.422,
62.698
],
"yaxis": "y"
},
{
"hovertemplate": "%{hovertext}
continent=Europe
gdp per capita=%{x}
life expectancy=%{y}
population=%{marker.size}",
"hovertext": [
"Albania",
"Austria",
"Belgium",
"Bosnia and Herzegovina",
"Bulgaria",
"Croatia",
"Czech Republic",
"Denmark",
"Finland",
"France",
"Germany",
"Greece",
"Hungary",
"Iceland",
"Ireland",
"Italy",
"Montenegro",
"Netherlands",
"Norway",
"Poland",
"Portugal",
"Romania",
"Serbia",
"Slovak Republic",
"Slovenia",
"Spain",
"Sweden",
"Switzerland",
"Turkey",
"United Kingdom"
],
"legendgroup": "Europe",
"marker": {
"color": "#EF553B",
"size": [
3600523,
8199783,
10392226,
4552198,
7322858,
4493312,
10228744,
5468120,
5238460,
61083916,
82400996,
10706290,
9956108,
301931,
4109086,
58147733,
684736,
16570613,
4627926,
38518241,
10642836,
22276056,
10150265,
5447502,
2009245,
40448191,
9031088,
7554661,
71158647,
60776238
],
"sizemode": "area",
"sizeref": 366300.86,
"symbol": "circle"
},
"mode": "markers",
"name": "Europe",
"orientation": "v",
"showlegend": true,
"type": "scatter",
"x": [
5937.029526,
36126.4927,
33692.60508,
7446.298803,
10680.79282,
14619.22272,
22833.30851,
35278.41874,
33207.0844,
30470.0167,
32170.37442,
27538.41188,
18008.94444,
36180.78919,
40675.99635,
28569.7197,
9253.896111,
36797.93332,
49357.19017,
15389.92468,
20509.64777,
10808.47561,
9786.534714,
18678.31435,
25768.25759,
28821.0637,
33859.74835,
37506.41907,
8458.276384,
33203.26128
],
"xaxis": "x",
"y": [
76.423,
79.829,
79.441,
74.852,
73.005,
75.748,
76.486,
78.332,
79.313,
80.657,
79.406,
79.483,
73.338,
81.757,
78.885,
80.546,
74.543,
79.762,
80.196,
75.563,
78.098,
72.476,
74.002,
74.663,
77.926,
80.941,
80.884,
81.701,
71.777,
79.425
],
"yaxis": "y"
},
{
"hovertemplate": "%{hovertext}
continent=Africa
gdp per capita=%{x}
life expectancy=%{y}
population=%{marker.size}",
"hovertext": [
"Algeria",
"Angola",
"Benin",
"Botswana",
"Burkina Faso",
"Burundi",
"Cameroon",
"Central African Republic",
"Chad",
"Comoros",
"Congo, Dem. Rep.",
"Congo, Rep.",
"Cote d'Ivoire",
"Djibouti",
"Egypt",
"Equatorial Guinea",
"Eritrea",
"Ethiopia",
"Gabon",
"Gambia",
"Ghana",
"Guinea",
"Guinea-Bissau",
"Kenya",
"Lesotho",
"Liberia",
"Libya",
"Madagascar",
"Malawi",
"Mali",
"Mauritania",
"Mauritius",
"Morocco",
"Mozambique",
"Namibia",
"Niger",
"Nigeria",
"Reunion",
"Rwanda",
"Sao Tome and Principe",
"Senegal",
"Sierra Leone",
"Somalia",
"South Africa",
"Sudan",
"Swaziland",
"Tanzania",
"Togo",
"Tunisia",
"Uganda",
"Zambia",
"Zimbabwe"
],
"legendgroup": "Africa",
"marker": {
"color": "#00cc96",
"size": [
33333216,
12420476,
8078314,
1639131,
14326203,
8390505,
17696293,
4369038,
10238807,
710960,
64606759,
3800610,
18013409,
496374,
80264543,
551201,
4906585,
76511887,
1454867,
1688359,
22873338,
9947814,
1472041,
35610177,
2012649,
3193942,
6036914,
19167654,
13327079,
12031795,
3270065,
1250882,
33757175,
19951656,
2055080,
12894865,
135031164,
798094,
8860588,
199579,
12267493,
6144562,
9118773,
43997828,
42292929,
1133066,
38139640,
5701579,
10276158,
29170398,
11746035,
12311143
],
"sizemode": "area",
"sizeref": 366300.86,
"symbol": "circle"
},
"mode": "markers",
"name": "Africa",
"orientation": "v",
"showlegend": true,
"type": "scatter",
"x": [
6223.367465,
4797.231267,
1441.284873,
12569.85177,
1217.032994,
430.0706916,
2042.09524,
706.016537,
1704.063724,
986.1478792,
277.5518587,
3632.557798,
1544.750112,
2082.481567,
5581.180998,
12154.08975,
641.3695236,
690.8055759,
13206.48452,
752.7497265,
1327.60891,
942.6542111,
579.231743,
1463.249282,
1569.331442,
414.5073415,
12057.49928,
1044.770126,
759.3499101,
1042.581557,
1803.151496,
10956.99112,
3820.17523,
823.6856205,
4811.060429,
619.6768924,
2013.977305,
7670.122558,
863.0884639,
1598.435089,
1712.472136,
862.5407561,
926.1410683,
9269.657808,
2602.394995,
4513.480643,
1107.482182,
882.9699438,
7092.923025,
1056.380121,
1271.211593,
469.7092981
],
"xaxis": "x",
"y": [
72.301,
42.731,
56.728,
50.728,
52.295,
49.58,
50.43,
44.741,
50.651,
65.152,
46.462,
55.322,
48.328,
54.791,
71.338,
51.579,
58.04,
52.947,
56.735,
59.448,
60.022,
56.007,
46.388,
54.11,
42.592,
45.678,
73.952,
59.443,
48.303,
54.467,
64.164,
72.801,
71.164,
42.082,
52.906,
56.867,
46.859,
76.442,
46.242,
65.528,
63.062,
42.568,
48.159,
49.339,
58.556,
39.613,
52.517,
58.42,
73.923,
51.542,
42.384,
43.487
],
"yaxis": "y"
},
{
"hovertemplate": "%{hovertext}
continent=Americas
gdp per capita=%{x}
life expectancy=%{y}
population=%{marker.size}",
"hovertext": [
"Argentina",
"Bolivia",
"Brazil",
"Canada",
"Chile",
"Colombia",
"Costa Rica",
"Cuba",
"Dominican Republic",
"Ecuador",
"El Salvador",
"Guatemala",
"Haiti",
"Honduras",
"Jamaica",
"Mexico",
"Nicaragua",
"Panama",
"Paraguay",
"Peru",
"Puerto Rico",
"Trinidad and Tobago",
"United States",
"Uruguay",
"Venezuela"
],
"legendgroup": "Americas",
"marker": {
"color": "#ab63fa",
"size": [
40301927,
9119152,
190010647,
33390141,
16284741,
44227550,
4133884,
11416987,
9319622,
13755680,
6939688,
12572928,
8502814,
7483763,
2780132,
108700891,
5675356,
3242173,
6667147,
28674757,
3942491,
1056608,
301139947,
3447496,
26084662
],
"sizemode": "area",
"sizeref": 366300.86,
"symbol": "circle"
},
"mode": "markers",
"name": "Americas",
"orientation": "v",
"showlegend": true,
"type": "scatter",
"x": [
12779.37964,
3822.137084,
9065.800825,
36319.23501,
13171.63885,
7006.580419,
9645.06142,
8948.102923,
6025.374752,
6873.262326,
5728.353514,
5186.050003,
1201.637154,
3548.330846,
7320.880262,
11977.57496,
2749.320965,
9809.185636,
4172.838464,
7408.905561,
19328.70901,
18008.50924,
42951.65309,
10611.46299,
11415.80569
],
"xaxis": "x",
"y": [
75.32,
65.554,
72.39,
80.653,
78.553,
72.889,
78.782,
78.273,
72.235,
74.994,
71.878,
70.259,
60.916,
70.198,
72.567,
76.195,
72.899,
75.537,
71.752,
71.421,
78.746,
69.819,
78.242,
76.384,
73.747
],
"yaxis": "y"
},
{
"hovertemplate": "%{hovertext}
continent=Oceania
gdp per capita=%{x}
life expectancy=%{y}
population=%{marker.size}",
"hovertext": [
"Australia",
"New Zealand"
],
"legendgroup": "Oceania",
"marker": {
"color": "#FFA15A",
"size": [
20434176,
4115771
],
"sizemode": "area",
"sizeref": 366300.86,
"symbol": "circle"
},
"mode": "markers",
"name": "Oceania",
"orientation": "v",
"showlegend": true,
"type": "scatter",
"x": [
34435.36744,
25185.00911
],
"xaxis": "x",
"y": [
81.235,
80.204
],
"yaxis": "y"
}
],
"layout": {
"legend": {
"itemsizing": "constant",
"title": {
"text": "continent"
},
"tracegroupgap": 0
},
"margin": {
"t": 60
},
"template": {
"data": {
"bar": [
{
"error_x": {
"color": "#2a3f5f"
},
"error_y": {
"color": "#2a3f5f"
},
"marker": {
"line": {
"color": "#E5ECF6",
"width": 0.5
},
"pattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
}
},
"type": "bar"
}
],
"barpolar": [
{
"marker": {
"line": {
"color": "#E5ECF6",
"width": 0.5
},
"pattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
}
},
"type": "barpolar"
}
],
"carpet": [
{
"aaxis": {
"endlinecolor": "#2a3f5f",
"gridcolor": "white",
"linecolor": "white",
"minorgridcolor": "white",
"startlinecolor": "#2a3f5f"
},
"baxis": {
"endlinecolor": "#2a3f5f",
"gridcolor": "white",
"linecolor": "white",
"minorgridcolor": "white",
"startlinecolor": "#2a3f5f"
},
"type": "carpet"
}
],
"choropleth": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"type": "choropleth"
}
],
"contour": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "contour"
}
],
"contourcarpet": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"type": "contourcarpet"
}
],
"heatmap": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "heatmap"
}
],
"heatmapgl": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "heatmapgl"
}
],
"histogram": [
{
"marker": {
"pattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
}
},
"type": "histogram"
}
],
"histogram2d": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "histogram2d"
}
],
"histogram2dcontour": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "histogram2dcontour"
}
],
"mesh3d": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"type": "mesh3d"
}
],
"parcoords": [
{
"line": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "parcoords"
}
],
"pie": [
{
"automargin": true,
"type": "pie"
}
],
"scatter": [
{
"fillpattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
},
"type": "scatter"
}
],
"scatter3d": [
{
"line": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scatter3d"
}
],
"scattercarpet": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scattercarpet"
}
],
"scattergeo": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scattergeo"
}
],
"scattergl": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scattergl"
}
],
"scattermapbox": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scattermapbox"
}
],
"scatterpolar": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scatterpolar"
}
],
"scatterpolargl": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scatterpolargl"
}
],
"scatterternary": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scatterternary"
}
],
"surface": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "surface"
}
],
"table": [
{
"cells": {
"fill": {
"color": "#EBF0F8"
},
"line": {
"color": "white"
}
},
"header": {
"fill": {
"color": "#C8D4E3"
},
"line": {
"color": "white"
}
},
"type": "table"
}
]
},
"layout": {
"annotationdefaults": {
"arrowcolor": "#2a3f5f",
"arrowhead": 0,
"arrowwidth": 1
},
"autotypenumbers": "strict",
"coloraxis": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"colorscale": {
"diverging": [
[
0,
"#8e0152"
],
[
0.1,
"#c51b7d"
],
[
0.2,
"#de77ae"
],
[
0.3,
"#f1b6da"
],
[
0.4,
"#fde0ef"
],
[
0.5,
"#f7f7f7"
],
[
0.6,
"#e6f5d0"
],
[
0.7,
"#b8e186"
],
[
0.8,
"#7fbc41"
],
[
0.9,
"#4d9221"
],
[
1,
"#276419"
]
],
"sequential": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"sequentialminus": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
]
},
"colorway": [
"#636efa",
"#EF553B",
"#00cc96",
"#ab63fa",
"#FFA15A",
"#19d3f3",
"#FF6692",
"#B6E880",
"#FF97FF",
"#FECB52"
],
"font": {
"color": "#2a3f5f"
},
"geo": {
"bgcolor": "white",
"lakecolor": "white",
"landcolor": "#E5ECF6",
"showlakes": true,
"showland": true,
"subunitcolor": "white"
},
"hoverlabel": {
"align": "left"
},
"hovermode": "closest",
"mapbox": {
"style": "light"
},
"paper_bgcolor": "white",
"plot_bgcolor": "#E5ECF6",
"polar": {
"angularaxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
},
"bgcolor": "#E5ECF6",
"radialaxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
}
},
"scene": {
"xaxis": {
"backgroundcolor": "#E5ECF6",
"gridcolor": "white",
"gridwidth": 2,
"linecolor": "white",
"showbackground": true,
"ticks": "",
"zerolinecolor": "white"
},
"yaxis": {
"backgroundcolor": "#E5ECF6",
"gridcolor": "white",
"gridwidth": 2,
"linecolor": "white",
"showbackground": true,
"ticks": "",
"zerolinecolor": "white"
},
"zaxis": {
"backgroundcolor": "#E5ECF6",
"gridcolor": "white",
"gridwidth": 2,
"linecolor": "white",
"showbackground": true,
"ticks": "",
"zerolinecolor": "white"
}
},
"shapedefaults": {
"line": {
"color": "#2a3f5f"
}
},
"ternary": {
"aaxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
},
"baxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
},
"bgcolor": "#E5ECF6",
"caxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
}
},
"title": {
"x": 0.05
},
"xaxis": {
"automargin": true,
"gridcolor": "white",
"linecolor": "white",
"ticks": "",
"title": {
"standoff": 15
},
"zerolinecolor": "white",
"zerolinewidth": 2
},
"yaxis": {
"automargin": true,
"gridcolor": "white",
"linecolor": "white",
"ticks": "",
"title": {
"standoff": 15
},
"zerolinecolor": "white",
"zerolinewidth": 2
}
}
},
"xaxis": {
"anchor": "y",
"domain": [
0,
1
],
"title": {
"text": "gdp per capita"
},
"type": "log"
},
"yaxis": {
"anchor": "x",
"domain": [
0,
1
],
"title": {
"text": "life expectancy"
}
}
}
}
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"fig"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Dash Markdown\n",
"\n",
"虽然 Dash 通过 `html` 库公开 HTML，但是用 HTML 编写副本可能很繁琐。要编写文本块，可以使用 `dcc` 库中的 `Markdown` 组件。使用以下代码创建一个名为 `app.py` 的文件："
]
},
{
"cell_type": "code",
"execution_count": 10,
"metadata": {},
"outputs": [],
"source": [
"markdown_text = '''\n",
"### Dash and Markdown\n",
"\n",
"Dash apps can be written in Markdown.\n",
"Dash uses the [CommonMark](http://commonmark.org/)\n",
"specification of Markdown.\n",
"Check out their [60 Second Markdown Tutorial](http://commonmark.org/help/)\n",
"if this is your first introduction to Markdown!\n",
"'''\n",
"\n",
"layout = html.Div([\n",
" dcc.Markdown(children=markdown_text)\n",
"])"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"\n",
"Dash and Markdown
\n",
"\n",
"Dash apps can be written in Markdown.\n",
"Dash uses the [CommonMark](http://commonmark.org/)\n",
"specification of Markdown.\n",
"Check out their [60 Second Markdown Tutorial](http://commonmark.org/help/)\n",
"if this is your first introduction to Markdown!\n",
""
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"\n",
"\n",
"## Dash 核心组件\n",
"\n",
"`dcc` 包含一组更高级别的组件，例如下拉列表，图形，Markdown 块等。\n",
"\n",
"像所有 Dash 组件一样，对它们进行了完全声明式的描述。每个可配置的选项都可以用作组件的关键字参数。\n",
"\n",
"在整个教程中，我们将看到许多这些组件。您可以在 [Dash Core 组件库](https://dash.plotly.com/dash-core-components) 中查看所有可用的组件。\n",
"\n",
"以下是一些可用的组件。\n",
"\n",
"```{include} ../tests/dash-examples/intro.py\n",
":code: python\n",
"```\n",
"\n",
"## 总结\n",
"\n",
"Dash 应用程序的 `layout` 描述了该应用程序的外观。`layout` 是组件的分层树。`html` 库提供了所有 HTML 标记的类，关键字参数描述了 HTML 属性，例如样式，`className` 和 `id`。 `dcc` 库生成更高级别的组件，如控件和图形。\n",
"\n",
"更多内容，请参阅：\n",
"\n",
"- [`dcc` 画廊](https://dash.plotly.com/dash-core-components)\n",
"- [`html` 画廊](https://dash.plotly.com/dash-html-components)\n",
"\n"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "py311",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.11.7"
}
},
"nbformat": 4,
"nbformat_minor": 2
}