百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

Python启航:30天编程速成之旅(第22天)- Dash创建交互式 Web 应用

itomcoil 2025-02-03 13:22 41 浏览

喜欢的条友记得关注、点赞、转发、收藏,你们的支持就是我最大的动力源泉。

前期基础教程:

「Python3.11.0」手把手教你安装最新版Python运行环境

讲讲Python环境使用Pip命令快速下载各类库的方法

Python启航:30天编程速成之旅(第2天)-IDE安装

【Python教程】JupyterLab 开发环境安装


Python启航:30天编程速成之旅(第22天)- Dash创建交互式 Web 应用

引言

Dash 是一个用于构建数据可视化和交互式 Web 应用程序的 Python 框架,由 Plotly 开发。它允许开发者快速创建具有响应式的用户界面,并且与 Flask 和 React.js 紧密集成。通过本教程,将学习如何使用 Dash 创建一个简单的交互式 Web 应用程序。

安装 Dash

使用 pip 安装 dash 及其相关依赖。

pip install dash

创建第一个 Dash 应用程序

导入必要的模块

首先,导入 dash 和其他必要的模块。

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd

创建 Dash 应用实例

创建一个 Dash 应用实例,并设置应用程序的标题。

app = dash.Dash(__name__)
app.title = "我的第一个 Dash 应用"

加载数据

加载一些示例数据,用于创建图表。

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

创建布局

定义应用程序的布局,包括标题、下拉菜单和图表。

app.layout = html.Div(children=[
    html.H1(children='水果销售数据'),
    
    html.Div(children='''
        选择城市:
    '''),

    dcc.Dropdown(
        id='city-dropdown',
        options=[{'label': city, 'value': city} for city in df['City'].unique()],
        value='SF'
    ),
    
    dcc.Graph(id='fruit-sales-chart')
])

添加回调函数

使用回调函数来处理用户输入并更新图表。

@app.callback(
    Output('fruit-sales-chart', 'figure'),
    [Input('city-dropdown', 'value')]
)
def update_graph(selected_city):
    filtered_df = df[df.City == selected_city]
    fig = px.bar(filtered_df, x="Fruit", y="Amount", title=f"水果销售数据 ({selected_city})")
    return fig

运行应用程序

最后,启动 Dash 应用程序。

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

完整代码示例

以下是上述步骤的完整代码示例:

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd

# 创建 Dash 应用实例
app = dash.Dash(__name__)
app.title = "我的第一个 Dash 应用"

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

# 创建布局
app.layout = html.Div(children=[
    html.H1(children='水果销售数据'),
    
    html.Div(children='''
        选择城市:
    '''),

    dcc.Dropdown(
        id='city-dropdown',
        options=[{'label': city, 'value': city} for city in df['City'].unique()],
        value='SF'
    ),
    
    dcc.Graph(id='fruit-sales-chart')
])

# 添加回调函数
@app.callback(
    Output('fruit-sales-chart', 'figure'),
    [Input('city-dropdown', 'value')]
)
def update_graph(selected_city):
    filtered_df = df[df.City == selected_city]
    fig = px.bar(filtered_df, x="Fruit", y="Amount", title=f"水果销售数据 ({selected_city})")
    return fig

# 运行应用程序
if __name__ == '__main__':
    app.run_server(debug=True)

总结

通过本教程,相信大家已经学会了如何使用 Python 常用库 Dash 创建一个简单的交互式 Web 应用程序。Dash 提供了许多强大的功能,可以快速构建数据可视化和交互式 Web 应用。希望大家喜欢这个教程,并继续探索更多 Dash 的功能!

喜欢的条友记得关注、点赞、转发、收藏,你们的支持就是我最大的动力源泉。

相关推荐

selenium(WEB自动化工具)

定义解释Selenium是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中,就像真正的用户在操作一样。支持的浏览器包括IE(7,8,9,10,11),MozillaF...

开发利器丨如何使用ELK设计微服务中的日志收集方案?

【摘要】微服务各个组件的相关实践会涉及到工具,本文将会介绍微服务日常开发的一些利器,这些工具帮助我们构建更加健壮的微服务系统,并帮助排查解决微服务系统中的问题与性能瓶颈等。我们将重点介绍微服务架构中...

高并发系统设计:应对每秒数万QPS的架构策略

当面试官问及"如何应对每秒几万QPS(QueriesPerSecond)"时,大概率是想知道你对高并发系统设计的理解有多少。本文将深入探讨从基础设施到应用层面的解决方案。01、理解...

2025 年每个 JavaScript 开发者都应该了解的功能

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发。1.Iteratorhelpers开发者...

JavaScript Array 对象

Array对象Array对象用于在变量中存储多个值:varcars=["Saab","Volvo","BMW"];第一个数组元素的索引值为0,第二个索引值为1,以此类推。更多有...

Gemini 2.5编程全球霸榜,谷歌重回AI王座,神秘模型曝光,奥特曼迎战

刚刚,Gemini2.5Pro编程登顶,6美元性价比碾压Claude3.7Sonnet。不仅如此,谷歌还暗藏着更强的编程模型Dragontail,这次是要彻底翻盘了。谷歌,彻底打了一场漂亮的翻...

动力节点最新JavaScript教程(高级篇),深入学习JavaScript

JavaScript是一种运行在浏览器中的解释型编程语言,它的解释器被称为JavaScript引擎,是浏览器的一部分,JavaScript广泛用于浏览器客户端编程,通常JavaScript脚本是通过嵌...

一文看懂Kiro,其 Spec工作流秒杀Cursor,可移植至Claude Code

当Cursor的“即兴编程”开始拖累项目质量,AWS新晋IDEKiro以Spec工作流打出“先规范后编码”的系统工程思维:需求-设计-任务三件套一次生成,文档与代码同步落地,复杂项目不...

「晚安·好梦」努力只能及格,拼命才能优秀

欢迎光临,浏览之前点击上面的音乐放松一下心情吧!喜欢的话给小编一个关注呀!Effortscanonlypass,anddesperatelycanbeexcellent.努力只能及格...

JavaScript 中 some 与 every 方法的区别是什么?

大家好,很高兴又见面了,我是姜茶的编程笔记,我们一起学习前端相关领域技术,共同进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力在JavaScript中,Array.protot...

10个高效的Python爬虫框架,你用过几个?

小型爬虫需求,requests库+bs4库就能解决;大型爬虫数据,尤其涉及异步抓取、内容管理及后续扩展等功能时,就需要用到爬虫框架了。下面介绍了10个爬虫框架,大家可以学习使用!1.Scrapysc...

12个高效的Python爬虫框架,你用过几个?

实现爬虫技术的编程环境有很多种,Java、Python、C++等都可以用来爬虫。但很多人选择Python来写爬虫,为什么呢?因为Python确实很适合做爬虫,丰富的第三方库十分强大,简单几行代码便可实...

pip3 install pyspider报错问题解决

运行如下命令报错:>>>pip3installpyspider观察上面的报错问题,需要安装pycurl。是到这个网址:http://www.lfd.uci.edu/~gohlke...

PySpider框架的使用

PysiderPysider是一个国人用Python编写的、带有强大的WebUI的网络爬虫系统,它支持多种数据库、任务监控、项目管理、结果查看、URL去重等强大的功能。安装pip3inst...

「机器学习」神经网络的激活函数、并通过python实现激活函数

神经网络的激活函数、并通过python实现whatis激活函数感知机的网络结构如下:左图中,偏置b没有被画出来,如果要表示出b,可以像右图那样做。用数学式来表示感知机:上面这个数学式子可以被改写:...