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

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

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

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

前期基础教程:

「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 的功能!

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

相关推荐

《Queendom》宣布冠军!女团MAMAMOO四人激动落泪

网易娱乐11月1日报道据台湾媒体报道,南韩女团竞争回归的生死斗《Queendom》昨(10/31)晚播出大决赛,并以直播方式进行,6组女团、女歌手皆演唱新歌,并加总前三轮的赛前赛、音源成绩与直播现场投...

正确复制、重写别人的代码,不算抄袭

我最近在一篇文章提到,工程师应该怎样避免使用大量的库、包以及其他依赖关系。我建议的另一种方案是,如果你没有达到重用第三方代码的阈值时,那么你就可以自己编写代码。在本文中,我将讨论一个在重用和从头开始编...

HTML DOM tr 对象_html event对象

tr对象tr对象代表了HTML表格的行。HTML文档中出现一个<tr>标签,就会创建一个tr对象。tr对象集合W3C:W3C标签。集合描述W3Ccells返回...

JS 打造动态表格_js如何动态改变表格内容

后台列表页最常见的需求:点击表头排序+一键全选。本文用原生js代码实现零依赖方案,涵盖DOM查询、排序算法、事件代理三大核心技能。效果速览一、核心思路事件入口:为每个<th>绑...

连肝7个晚上,总结了66条计算机网络的知识点

作者|哪吒来源|程序员小灰(ID:chengxuyuanxiaohui)计算机网络知识是面试常考的内容,在实际工作中经常涉及。最近,我总结了66条计算机网络相关的知识点。1、比较http0....

Vue 中 强制组件重新渲染的正确方法

作者:MichaelThiessen译者:前端小智来源:hackernoon有时候,依赖Vue响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据。或者,我们可能只想抛开当前的...

为什么100个前端只有1人能说清?浏览器重排/重绘深度解析

面试现场的"致命拷问""你的项目里做过哪些性能优化?能具体讲讲重排和重绘的区别吗?"作为面试官,我在秋招季连续面试过100多位前端候选人,这句提问几乎成了必考题。但令...

HTML DOM 介绍_dom4j html

HTMLDOM(文档对象模型)是一种基于文档的编程接口,它是HTML和XML文档的编程接口。它可以让开发人员通过JavaScript或其他脚本语言来访问和操作HTML和XML文档...

JavaScript 事件——“事件流和事件处理程序”的注意要点

事件流事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流,而NetscapeCommunicator的事件流是事件捕获流。事件冒泡即事件开始时由最具体的元素接收,然后逐级向上传播到较为不...

探秘 Web 水印技术_水印制作网页

作者:fransli,腾讯PCG前端开发工程师Web水印技术在信息安全和版权保护等领域有着广泛的应用,对防止信息泄露或知识产品被侵犯有重要意义。水印根据可见性可分为可见水印和不可见水印(盲水印)...

国外顶流网红为流量拍摄性侵女学生?仅被封杀三月,回归仍爆火

曾经的油管之王,顶流网红DavidDobrik复出了。一切似乎都跟他因和成员灌酒性侵女学生被骂到退网之前一样:住在950万美元的豪宅,开着20万美元的阿斯顿马丁,每条视频都有数百万观看...人们仿佛...

JavaScript 内存泄漏排查方法_js内存泄漏及解决方法

一、概述本文主要介绍了如何通过Devtools的Memory内存工具排查JavaScript内存泄漏问题。先介绍了一些相关概念,说明了Memory内存工具的使用方式,然后介绍了堆快照的...

外贸独立站,网站优化的具体内容_外贸独立站,网站优化的具体内容有哪些

Wordpress网站优化,是通过优化代码、数据库、缓存、CSS/JS等内容,提升网站加载速度、交互性和稳定性。网站加载速度,是Google搜索引擎的第一权重,也是SEO优化的前提。1.优化渲染阻塞。...

这8个CSS工具可以提升编程速度_css用什么编译器

下面为大家推荐的这8个CSS工具,有提供函数的,有提供类的,有提取代码的,还有收集CSS的统计数据的……请花费两分钟的时间看完这篇文章,或许你会找到意外的惊喜,并且为你的编程之路打开了一扇新的大门。1...

vue的理解-vue源码 历史 简介 核心特性 和jquery区别 和 react对比

一、从历史说起Web是WorldWideWeb的简称,中文译为万维网我们可以将它规划成如下的几个时代来进行理解石器时代文明时代工业革命时代百花齐放时代石器时代石器时代指的就是我们的静态网页,可以欣...