doc/ui/dash/layout.ipynb

{
 "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<br>Fruit=%{x}<br>Amount=%{y}<extra></extra>",
         "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<br>Fruit=%{x}<br>Amount=%{y}<extra></extra>",
         "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')` 组件会在应用程序中生成一个 `<h1> Hello Dash </h1>` 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<br>Fruit=%{x}<br>Amount=%{y}<extra></extra>",
         "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<br>Fruit=%{x}<br>Amount=%{y}<extra></extra>",
         "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 应用程序中呈现为`<h1 style=\"text-align: center; color: #7FDBFF\">Hello Dash</h1>`。\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": "<b>%{hovertext}</b><br><br>continent=Asia<br>gdp per capita=%{x}<br>life expectancy=%{y}<br>population=%{marker.size}<extra></extra>",
         "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": "<b>%{hovertext}</b><br><br>continent=Europe<br>gdp per capita=%{x}<br>life expectancy=%{y}<br>population=%{marker.size}<extra></extra>",
         "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": "<b>%{hovertext}</b><br><br>continent=Africa<br>gdp per capita=%{x}<br>life expectancy=%{y}<br>population=%{marker.size}<extra></extra>",
         "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": "<b>%{hovertext}</b><br><br>continent=Americas<br>gdp per capita=%{x}<br>life expectancy=%{y}<br>population=%{marker.size}<extra></extra>",
         "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": "<b>%{hovertext}</b><br><br>continent=Oceania<br>gdp per capita=%{x}<br>life expectancy=%{y}<br>population=%{marker.size}<extra></extra>",
         "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": [
    "<article class=\"w3-card w3-padding\">\n",
    "<h3>Dash and Markdown</h3>\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",
    "</article>"
   ]
  },
  {
   "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
}