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

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

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

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

前期基础教程:

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

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

相关推荐

Excel新函数TEXTSPLIT太强大了,轻松搞定数据拆分!

我是【桃大喵学习记】,欢迎大家关注哟~,每天为你分享职场办公软件使用技巧干货!最近我把WPS软件升级到了版本号:12.1.0.15990的最新版本,最版本已经支持文本拆分函数TEXTSPLIT了,并...

Excel超强数据拆分函数TEXTSPLIT,从入门到精通!

我是【桃大喵学习记】,欢迎大家关注哟~,每天为你分享职场办公软件使用技巧干货!今天跟大家分享的是Excel超强数据拆分函数TEXTSPLIT,带你从入门到精通!TEXTSPLIT函数真是太强大了,轻松...

看完就会用的C++17特性总结(c++11常用新特性)

作者:taoklin,腾讯WXG后台开发一、简单特性1.namespace嵌套C++17使我们可以更加简洁使用命名空间:2.std::variant升级版的C语言Union在C++17之前,通...

plsql字符串分割浅谈(plsql字符集设置)

工作之中遇到的小问题,在此抛出问题,并给出解决方法。一方面是为了给自己留下深刻印象,另一方面给遇到相似问题的同学一个解决思路。如若其中有写的不好或者不对的地方也请不加不吝赐教,集思广益,共同进步。遇到...

javascript如何分割字符串(javascript切割字符串)

javascript如何分割字符串在JavaScript中,您可以使用字符串的`split()`方法来将一个字符串分割成一个数组。`split()`方法接收一个参数,这个参数指定了分割字符串的方式。如...

TextSplit函数的使用方法(入门+进阶+高级共八种用法10个公式)

在Excel和WPS新增的几十个函数中,如果按实用性+功能性排名,textsplit排第二,无函数敢排第一。因为它不仅使用简单,而且解决了以前用超复杂公式才能搞定的难题。今天小编用10个公式,让你彻底...

Python字符串split()方法使用技巧

在Python中,字符串操作可谓是基础且关键的技能,而今天咱们要重点攻克的“堡垒”——split()方法,它能将看似浑然一体的字符串,按照我们的需求进行拆分,极大地便利了数据处理与文本解析工作。基本语...

go语言中字符串常用的系统函数(golang 字符串)

最近由于工作比较忙,视频有段时间没有更新了,在这里跟大家说声抱歉了,我尽快抽些时间整理下视频今天就发一篇关于go语言的基础知识吧!我这我工作中用到的一些常用函数,汇总出来分享给大家,希望对...

无规律文本拆分,这些函数你得会(没有分隔符没规律数据拆分)

今天文章来源于表格学员训练营群内答疑,混合文本拆分。其实拆分不难,只要规则明确就好办。就怕规则不清晰,或者规则太多。那真是,Oh,mygod.如上图所示进行拆分,文字表达实在是有点难,所以小熊变身灵...

Python之文本解析:字符串格式化的逆操作?

引言前面的文章中,提到了关于Python中字符串中的相关操作,更多地涉及到了字符串的格式化,有些地方也称为字符串插值操作,本质上,就是把多个字符串拼接在一起,以固定的格式呈现。关于字符串的操作,其实还...

忘记【分列】吧,TEXTSPLIT拆分文本好用100倍

函数TEXTSPLIT的作用是:按分隔符将字符串拆分为行或列。仅ExcelM365版本可用。基本应用将A2单元格内容按逗号拆分。=TEXTSPLIT(A2,",")第二参数设置为逗号...

Excel365版本新函数TEXTSPLIT,专攻文本拆分

Excel中字符串的处理,拆分和合并是比较常见的需求。合并,当前最好用的函数非TEXTJOIN不可。拆分,Office365于2022年3月更新了一个专业函数:TEXTSPLIT语法参数:【...

站长在线Python精讲使用正则表达式的split()方法分割字符串详解

欢迎你来到站长在线的站长学堂学习Python知识,本文学习的是《在Python中使用正则表达式的split()方法分割字符串详解》。使用正则表达式分割字符串在Python中使用正则表达式的split(...

Java中字符串分割的方法(java字符串切割方法)

技术背景在Java编程中,经常需要对字符串进行分割操作,例如将一个包含多个信息的字符串按照特定的分隔符拆分成多个子字符串。常见的应用场景包括解析CSV文件、处理网络请求参数等。实现步骤1.使用Str...

因为一个函数strtok踩坑,我被老工程师无情嘲笑了

在用C/C++实现字符串切割中,strtok函数经常用到,其主要作用是按照给定的字符集分隔字符串,并返回各子字符串。但是实际上,可不止有strtok(),还有strtok、strtok_s、strto...