如何使用Plotly和Dash进行数据可视化

章台客

本文分享自华为云社区《从数据到部署使用Plotly和Dash实现数据可视化与生产环境部署》，作者： 柠檬味拥抱。
数据可视化是数据分析中至关重要的一环，它能够帮助我们更直观地理解数据并发现隐藏的模式和趋势。在Python中，有许多强大的工具可以用来进行数据可视化，其中Plotly和Dash是两个备受欢迎的选择。Plotly提供了丰富多样的交互式绘图功能，而Dash则是一个用于构建交互式Web应用的Python框架。本文将介绍如何使用Plotly和Dash进行数据可视化，并通过案例代码展示其应用。
安装Plotly与Dash

首先，我们需要安装Plotly和Dash库。你可以通过以下命令使用pip来安装它们：

1. pip install plotly dash

复制代码

安装完成后，我们就可以开始使用这两个库了。
案例代码：简单的数据可视化应用

让我们以一个简单的例子开始，假设我们有一些关于销售数据的CSV文件，我们想要创建一个交互式的图表来可视化这些数据，并将其部署为一个Web应用。首先，我们需要导入必要的库：

1. import dash
2. from dash import dcc, html
3. import plotly.express as px
4. import pandas as pd
6. # 读取数据
7. df = pd.read_csv('sales_data.csv')
9. # 创建Dash应用
10. app = dash.Dash(__name__)
12. # 布局
13. app.layout = html.Div([
14.     html.H1("销售数据可视化"),
15.     dcc.Graph(
16.         id='sales-graph'
17.     )
18. ])
20. # 回调函数
21. @app.callback(
22.     dash.dependencies.Output('sales-graph', 'figure'),
23.     [dash.dependencies.Input('sales-graph', 'value')]
24. )
25. def update_graph(selected_year):
26.     filtered_df = df[df['Year'] == selected_year]
27.     fig = px.bar(filtered_df, x='Month', y='Sales', title=f'销售数据 - {selected_year}')
28.     return fig
30. # 启动应用
31. if __name__ == '__main__':
32.     app.run_server(debug=True)

复制代码

在这个例子中，我们首先读取了名为sales_data.csv的CSV文件，然后创建了一个Dash应用。在应用的布局中，我们定义了一个标题和一个空的图表区域。然后，我们设置了一个回调函数，当用户选择不同的年份时，图表将会更新以显示相应年份的销售数据。最后，我们通过调用run_server方法来启动应用。
确保你的sales_data.csv文件包含了必要的数据字段（比如Year、Month和Sales），这样代码才能正常运行。
案例代码：高级数据可视化与交互

在上一个案例中，我们展示了如何使用Dash和Plotly创建一个简单的数据可视化应用。现在，让我们进一步探索一些高级功能，比如添加更多交互性和定制化。
假设我们想要展示销售数据的趋势，并允许用户通过选择不同的产品类别来查看不同的趋势。我们可以通过下面的代码来实现这个功能：

1. import dash
2. from dash import dcc, html
3. import plotly.express as px
4. import pandas as pd
6. # 读取数据
7. df = pd.read_csv('sales_data.csv')
9. # 创建Dash应用
10. app = dash.Dash(__name__)
12. # 布局
13. app.layout = html.Div([
14.     html.H1("销售数据趋势"),
15.     dcc.Dropdown(
16.         id='product-dropdown',
17.         options=[
18.             {'label': '产品A', 'value': 'Product A'},
19.             {'label': '产品B', 'value': 'Product B'},
20.             {'label': '产品C', 'value': 'Product C'}
21.         ],
22.         value='Product A'
23.     ),
24.     dcc.Graph(
25.         id='sales-trend'
26.     )
27. ])
29. # 回调函数
30. @app.callback(
31.     dash.dependencies.Output('sales-trend', 'figure'),
32.     [dash.dependencies.Input('product-dropdown', 'value')]
33. )
34. def update_trend(selected_product):
35.     filtered_df = df[df['Product'] == selected_product]
36.     fig = px.line(filtered_df, x='Month', y='Sales', title=f'{selected_product}销售趋势')
37.     return fig
39. # 启动应用
40. if __name__ == '__main__':
41.     app.run_server(debug=True)

复制代码

在这个例子中，我们添加了一个下拉菜单，允许用户选择不同的产品类别。当用户选择不同的产品后，图表将会更新以显示所选产品的销售趋势。这样，用户就可以更灵活地探索不同产品的销售情况。
除了简单的折线图外，Plotly还提供了丰富的图表类型和定制选项，可以满足更多复杂的可视化需求。Dash则允许我们构建交互式的Web应用，并通过回调函数实现图表的动态更新，为用户提供更好的体验。
添加交互性与样式美化

在上述案例中，我们展示了如何使用Dash和Plotly创建数据可视化应用，并提供了基本的交互功能。现在，让我们进一步添加一些交互性和样式美化，使我们的应用更加吸引人和易于使用。

1. import dash
2. from dash import dcc, html, callback_context
3. import plotly.express as px
4. import pandas as pd
6. # 读取数据
7. df = pd.read_csv('sales_data.csv')
9. # 获取唯一的产品列表
10. available_products = df['Product'].unique()
12. # 创建Dash应用
13. app = dash.Dash(__name__)
15. # 应用样式
16. app.layout = html.Div([
17.     html.H1("销售数据趋势", style={'textAlign': 'center'}),
18.     html.Div([
19.         html.Label("选择产品："),
20.         dcc.Dropdown(
21.             id='product-dropdown',
22.             options=[{'label': product, 'value': product} for product in available_products],
23.             value=available_products[0]
24.         )
25.     ], style={'width': '50%', 'margin': 'auto', 'textAlign': 'center'}),
26.     dcc.Graph(
27.         id='sales-trend',
28.         config={'displayModeBar': False}  # 禁用图表的模式栏
29.     )
30. ], style={'padding': '20px'})
32. # 回调函数
33. @app.callback(
34.     dash.dependencies.Output('sales-trend', 'figure'),
35.     [dash.dependencies.Input('product-dropdown', 'value')]
36. )
37. def update_trend(selected_product):
38.     filtered_df = df[df['Product'] == selected_product]
39.     fig = px.line(filtered_df, x='Month', y='Sales', title=f'{selected_product}销售趋势')
40.     return fig
42. # 启动应用
43. if __name__ == '__main__':
44.     app.run_server(debug=True)

复制代码

在这个例子中，我们添加了一些样式以使应用看起来更吸引人。我们设置了标题居中显示，并在产品下拉菜单周围添加了一些空白空间以增加布局的美观性。此外，我们还禁用了图表的模式栏，以简化用户界面。
通过这些改进，我们的应用现在不仅提供了强大的交互式数据可视化功能，而且具有更好的外观和用户体验。这将使用户更愿意使用我们的应用来探索数据，并从中获得有价值的见解。
部署至生产环境

在完成数据可视化应用的开发之后，我们通常希望将应用部署到生产环境中，以便其他用户能够访问和使用。在本节中，我们将讨论如何将我们的Dash应用部署到生产服务器上。
使用Gunicorn和Nginx

Gunicorn是一个Python WSGI(HTTP服务器) HTTP服务器，它能够处理来自Web应用的HTTP请求。Nginx则是一个高性能的HTTP和反向代理服务器，通常用于处理静态文件和负载均衡。
首先，我们需要安装Gunicorn和Nginx：

1. pip install gunicorn
2. sudo apt-get install nginx

复制代码

接下来，我们使用Gunicorn来运行我们的Dash应用：

1. gunicorn -w 4 -b 0.0.0.0:8050 your_app:app

复制代码

这将在本地启动Gunicorn服务器，并将Dash应用运行在8050端口上。接下来，我们需要配置Nginx来作为反向代理，将HTTP请求转发到Gunicorn服务器上。
配置Nginx

在Nginx的配置文件中添加以下内容：

1. server {
2.     listen 80;
3.     server_name your_domain.com;
5.     location / {
6.         proxy_pass http://127.0.0.1:8050;
7.         proxy_redirect off;
8.         proxy_set_header Host $host;
9.         proxy_set_header X-Real-IP $remote_addr;
10.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
11.         proxy_set_header X-Forwarded-Proto $scheme;
12.     }
13. }

复制代码

将your_domain.com替换为你的域名。然后重新加载Nginx配置：

1. sudo systemctl reload nginx

复制代码

现在，你的Dash应用已经成功部署到生产环境中，并且可以通过你的域名访问了。
使用HTTPS

为了提高安全性，我们还可以配置Nginx来使用HTTPS协议。你需要获取SSL证书并将其配置到Nginx中。一种简单的方法是使用Let’s Encrypt来获取免费的SSL证书。以下是一个简单的配置示例：

1. server {
2.     listen 80;
3.     server_name your_domain.com;
5.     location / {
6.         return 301 https://$host$request_uri;
7.     }
8. }
10. server {
11.     listen 443 ssl;
12.     server_name your_domain.com;
14.     ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem;
15.     ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem;
17.     location / {
18.         proxy_pass http://127.0.0.1:8050;
19.         proxy_redirect off;
20.         proxy_set_header Host $host;
21.         proxy_set_header X-Real-IP $remote_addr;
22.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
23.         proxy_set_header X-Forwarded-Proto $scheme;
24.     }
25. }

复制代码

这样配置后，你的Dash应用将通过HTTPS协议提供服务，并且所有的HTTP请求都会被重定向到HTTPS。
集成用户认证和权限管理

在某些情况下，你可能希望限制对数据可视化应用的访问，只允许特定用户或用户组访问。为了实现这一点，我们可以集成用户认证和权限管理系统。
使用基本认证

一种简单的方法是使用基本认证（Basic Authentication）。你可以在Nginx中配置基本认证，要求用户在访问应用之前提供用户名和密码。以下是一个示例Nginx配置：

1. server {
2.     listen 443 ssl;
3.     server_name your_domain.com;
5.     ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem;
6.     ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem;
8.     location / {
9.         auth_basic "Restricted Access";
10.         auth_basic_user_file /etc/nginx/.htpasswd;
12.         proxy_pass http://127.0.0.1:8050;
13.         proxy_redirect off;
14.         proxy_set_header Host $host;
15.         proxy_set_header X-Real-IP $remote_addr;
16.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
17.         proxy_set_header X-Forwarded-Proto $scheme;
18.     }
19. }

复制代码

在这个配置中，我们使用auth_basic指令启用基本认证，并指定了一个密码文件/etc/nginx/.htpasswd。你需要使用htpasswd工具创建这个密码文件，并向其中添加用户名和密码。
使用OAuth认证

另一种常见的方法是使用OAuth认证。通过OAuth，你可以将用户的认证过程委托给第三方身份提供者，如Google、GitHub等。一旦用户通过第三方身份提供者认证成功，他们就可以访问你的应用。
你可以使用Dash的dash-auth库来实现OAuth认证。该库提供了一种简单的方式来集成多种OAuth提供者，并限制对Dash应用的访问。
添加权限管理

除了认证之外，你可能还希望对用户进行授权，以确定他们是否有权访问特定的数据或功能。一种常见的方法是在应用中实现角色基础的访问控制（Role-Based Access Control，RBAC）系统。通过RBAC，你可以将用户分配到不同的角色，并在应用中限制不同角色的访问权限。
你可以在Dash应用中实现RBAC系统，根据用户的角色来决定他们是否有权执行特定操作。这可能涉及到在用户登录时检查他们的角色，并根据角色动态地调整应用中的功能和数据访问权限。
日志记录和错误处理

在部署生产环境的应用时，日志记录和错误处理是非常重要的。良好的日志记录可以帮助你追踪应用的运行情况，并及时发现和解决问题。错误处理能够提高应用的稳定性，减少因错误而导致的服务中断。
配置日志记录

首先，让我们配置应用的日志记录。Dash应用通常会输出日志到stdout或stderr，我们可以通过重定向这些日志到一个文件来进行记录。我们还可以使用Python的logging模块来实现更高级的日志记录。

1. import logging
3. logging.basicConfig(filename='app.log', level=logging.INFO)

复制代码

在Dash应用中添加上述代码将会把日志记录到名为app.log的文件中，并设置记录级别为INFO。你可以根据需要调整日志级别，以便记录不同程度的信息。
错误处理

另一个重要的方面是错误处理。当应用发生错误时，我们希望能够捕获并记录这些错误，同时向用户提供友好的错误信息。
在Dash应用中，你可以使用try-except块来捕获异常，并在发生异常时返回一个错误页面或显示一条友好的错误消息。

1. @app.server.errorhandler(Exception)
2. def handle_error(e):
3.     logging.error(f'An error occurred: {str(e)}')
4.     return html.H1("Oops! Something went wrong."), 500

复制代码

在上述代码中，我们定义了一个错误处理函数handle_error，它捕获了所有的异常。当发生异常时，它会将错误信息记录到日志中，并返回一个包含错误消息的页面给用户。
通过良好的日志记录和错误处理，我们可以更好地了解应用的运行情况，并在发生错误时采取相应的措施来保障应用的稳定性和可靠性。
监控和性能优化

最后，一旦应用部署到生产环境中，我们还需要定期监控应用的性能，并采取措施来优化性能。这包括监控应用的响应时间、内存使用情况、CPU负载等指标，并根据监控结果进行优化。
你可以使用监控工具如Prometheus、Grafana等来监控应用的性能指标，并根据监控结果进行调整和优化。
总结

本文详细介绍了将Dash应用部署到生产环境的关键步骤和必要措施。首先，我们讨论了使用Gunicorn和Nginx来部署Dash应用的方法，并展示了如何通过HTTPS协议提高应用的安全性。接着，我们探讨了如何集成用户认证和权限管理系统，以及如何配置日志记录和错误处理，从而提高应用的稳定性和可靠性。最后，我们强调了监控和性能优化的重要性，并提出了一些监控工具和优化方法。通过这些措施，我们可以将Dash应用部署到生产环境中，并使其在生产环境中更加健壮和可靠，为用户提供优质的服务和体验。
 
点击关注，第一时间了解华为云新鲜技术~
 

来源:https://www.cnblogs.com/huaweiyun/p/18136051
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！