【Dash搭建可视化网站】项目1：使用Dash创建简单网页

手动反爬虫，禁止转载： 原博地址 https://blog.csdn.net/lys_828/article/details/122061934（CSDN博主：Be_melting）

 知识梳理不易，请尊重劳动成果，文章仅发布在CSDN网站上，在其他网站看到该博文均属于未经作者授权的恶意爬取信息

项目1 ：使用Dash创建简单网页

1.1 官网示例

学习Dash之前，最重要工具参考就是官方网址：https://dash.plotly.com/。先白嫖官网中的示例代码，对于任何新模块的学习都可以如此，官网的示例是最简单可以直接上手理解的内容。

[1] 首先打开命令行窗口，安装dash模块。

[2] 安装完成后，创建一个py文件，先把官网的示例赋值粘贴到文件中。

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

app = dash.Dash(__name__)

df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for your data.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

[3] 保存文件后运行，然后把输出结果中的网址：http://127.0.0.1:8050/ 在浏览器中打开，网页显示如下。输出的内容中包含了标题、文字信息还有可交互式图形。第一个官方的示例就满足对Dash的期待，接下来就是一步步进行拆解，弄清Dash制作网页的原理，从而实现这个这个页面的制作。

1.2 绘制简单网页的基本步骤

[1] Dash创建网页的基本框架如下，三行代码的功能完成模块导入，创建Dash应用和Dash运行。

import dash
app = dash.Dash(__name__) #其中的__name__可以进行删除，也可以进行起名app = dash.Dash("myApp")
app.run_server()

[2] 框架搭建完成后，需要进行网页内容信息的添加，接着任务就是导入制作网页信息的模块。

from dash import html   #将python代码转写成html代码

#官方的示例中是这条语句：import dash_html_components as html
#实际输出中提示使用的是这条语句：from dash import html
#两种方式均可，只是版本迭代，导入的名称不同而已，不影响具体功能

[3] 如果愿意，网页html中的任何信息都可以使用Div的方式进行创建，这里的children代表着：[]中的信息都是在添加在Div中。其中直接写的字符串就代表着文字信息，使用H1括号后的信息就代表着一级标题。

block = html.Div(
	children = [
		'hell0',
		html.H1('Hello again!')
	]
)

[4] 然后将设计好的block信息放置在html网页的布局上面，就完成了网页信息的添加。最后运行Dash应用，开启debug功能。

app.layout = block
app.run_server(debug=True)  #开启debug功能

[5] 运行整个py文件，程序输出结果如下。（编辑器使用的是VS Code）

[6] 刷新网址：http://127.0.0.1:8050/ ，自己创建的第一个简单的页面如下。文字和一级标题都能正常添加，右下方的按钮就是debug模式，点击后会进行提醒。

1.3 创建一个稍微有意思的页面

最简单的页面创建完成后，更进一步写一个稍微有意思的页面，设置一个梗图。其中很重要的一个知识点，就是图片的添加。

[1] 新建一个py文件，将上面创建简答页面的代码全部复制到该文件中，删除其中children中列表中的元素

import dash
from dash import html

app = dash.Dash('dashApp') 

block = html.Div(
	children =[
        xxx   #待输入
    ]
)

app.layout = block
app.run_server(debug=True)

[2] 添加标题和图片。标题还是按照H1一级标题设置；在Dash操作中，图片的导入，可以在对应的代码文件同路径下建立一个assets文件夹用于存放照片和设置样式相关的信息。

children =[
       html.H1('Use DASH write all stuff!'),
       html.Img(src = './assets/meme.png')
    ]

[3] 添加完毕后，运行py文件，刷新网址：http://127.0.0.1:8050/ ，输出内容信息如下。

[4] 标题和图片都添加到页面之上，但是完善需要进一步设置样式。比如对Div中的全部内容进行居中处理，文字设置一下大小和颜色。

import dash
from dash import html

app = dash.Dash('dashApp') 

block = html.Div(children=
    [
        html.H1('Use DASH write all stuff!',
                style ={'fontSize':'6rem', # 6rem表示6倍正常字体的大小
                        'color':'black'}), # 由于背景是白色，字体采用黑色
        html.Img(src = '/assets/meme.png')
    ],style={'textAlign':'center'}
)

app.layout = block
app.run_server(debug=True)

此时运行py文件，刷新网址：http://127.0.0.1:8050/ ，输出的界面如下。

[5] 梗图一般是背景为黑色，字体为白色，可以进一步设置。字体颜色直接将color参数修改为white即可；背景样式的设置需要在assets文件夹下创建一个style.css文件夹，其中输入背景颜色的样式后保存，代码如下。

body {
    background-color : black;
}

此时保存py文件后运行，刷新网址：http://127.0.0.1:8050/ ，输出结果如下。

至此整个项目1，利用Dash创建简单网页的实例就介绍完毕，已经实现了文字和本地图片的加载。针对官网示例中的数据出图过程在后续的内容中也会进行详细介绍。