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

Python可视化交互库——dash

myzbx 2025-05-27 16:23 20 浏览

Dash 是一款构建 Web 应用的 Python 低代码框架,建立在 Plotly.jsReactFlask 之上,将现代 UI 元素如下拉框、滑块和图形直接与 Python 代码绑定,使得熟悉python的朋友可以快速打造出演示程序。

  1. 安装

pip install dash

pip install pandas

  1. 初试
import pandas as pd
import plotly.express as px
from dash import Dash, html, dcc

app = Dash()
df = pd.DataFrame({'x': [1, 2, 3], 'SF': [4, 1, 2], 'Montreal': [2, 4, 5]})     # x是坐标轴刻度;
fig = px.bar(df, x='x', y=['SF', 'Montreal'], barmode='group')           # 柱状图

app.layout = html.Div(children=[
    html.H1(children='This is Dash Demo'),
    html.Div(children='Dash: 一款Python web应用框架'),
    dcc.Graph(id='dash-example-graph', figure=fig)
])

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

程序运行后,会有如下输出结果:

Dash is running on http://127.0.0.1:8050/

* Serving Flask app 'test'

* Debug mode: on

按照提示访问 : http://127.0.0.1:8050/

可以得到如下结果:


  1. 说明

layout(布局) 就像 HTML 一样,由一棵组件树构成。如代码中的 html.H1、html.Div、dcc.Graph。

dash.html 包含所有 HTML 标签,如 html.H1(children='Hello Dash') 实际上生成的 HTML 代码为 <h1>Hello Dash</h1>。

不是所有组件都是纯 HTML,模块 dash.dcc 包含交互的高级组件,底层通过 React.js、JavaScript、HTML、CSS实现。

每个组件通过关键字参数进行描述,但属性 children 比较特殊,一般总是作为第一个属性,因此不用关键字参数来描述。

app.run_server(debug=True) 可实现热加载,即修改代码后会自动刷新浏览器。

相关推荐

前端 面试题(前端面试题2025及答案)

1.性能优化的几个方面?1.资源压缩合并,减少HTTP请求2.非核心代码异步加载3.利用浏览器缓存4.使用CDN5.预解析DNS2.如何进行首屏优化1》首先对于首屏,我认为用户体验有三个阶段:①就是页...

建筑钢筋等级在CAD绘图中符号标注

#来兴趣频道选好礼#建筑钢筋等级CAD图形符号标注按照国家相关规范规定,常用的是热轧钢筋,分为热轧带肋钢筋和热轧光圆钢筋。热轧光圆钢筋按屈服强度特征值分为235、300级,分别以HPB235、HP...

东莞车友 | 战斗范锐志G’s样式改装案例

【改装清单】MarkXG’s包围叶子板碳纤维头盖DIY头铲DIY尾翼ce28轮毂AD08轮胎前ap9040后ap5200cusco刹车顶游客底盘8件套游客前后虾苏游客前后顶吧BCBR避震3.5膛缸...

全国首艘J型、S型双型多功能铺管船在沪建成

5月28日,全国首艘J型、S型双型多功能铺管船在上海建成。JSD6000深水起重铺管船是一艘集世界先进船舶技术、智能控制系统和高强度材料于一体的海上工程。该船总长215.88米、型宽49.00米、型深...

[.net编程自学网]JavaScript DOM编程(一)

为什么要学习JavaScript操作DOMJavaScript最终是要操作Html页面,让Html变成DHtml,而操作Html页面就要用到DOM。DOM就是把Html页面模拟成一个对象,就像XDoc...

web前端:使用nw.js 做桌面程序(node.js开发桌面应用)

1.同类型产品electronnw.js原名为node-webkit,后更名为nw.js,基于node.js&Chromium,以浏览器为核心,入口为一个index.htm;...

JS 跳过 debugger 的几种方法,看完就会了

前端写自动脚本中最常见的就是debugger的干扰,debugger仅在调试模式中起作用,需要手动点击才会继续向下执行,这样我们的自动脚本也就卡住无法向下执行,本篇文章介绍几种跳过debugg...

《我的世界》最全萌新入坑指南!老MC看了都直呼来晚了

“如果在我一开始玩游戏的时候就有一份完整的攻略,那该多好啊!”《我的世界》作为一个极度开放的游戏,玩法不计其数,以至于在游戏最早期的时候,那一批玩家都是自己花费大量时间摸索各种玩法,研究特性。不过,在...

别再瞎调 JVM 了!Arthas 一键精准优化,性能飙升 10 倍不是梦

别再瞎调JVM了!Arthas一键精准优化,性能飙升10倍不是梦在Java开发的世界里,JVM性能优化就像一场永无止境的马拉松。开发人员常常被各种性能问题折磨得焦头烂额,比如内存泄漏、...

HEU KMS Activato使用说明手册(heu_kms_activatorv11.2.0)

第1节KMS概述1.1KMS简介通常企业、学校等拥有多台计算机,设想如果安装了Windows,然后管理员一台一台的去激活,管理起来十分不方便。为了解决这种问题,微软设计了一...

JD745X多功能水泵控制阀工作原理,安装调试,使用说明

JD745X多功能水泵控制阀安装在水泵出口。依靠介质自身压力实现开泵时缓开,关泵时先快速关闭,后缓闭的功能。符合离心泵特性曲线,有效消除水锤危害,保证用水安全。离心泵特性曲线标明,开泵时,关阀启动轴功...

优迈系统(一体化控制柜)快车调试(八)

逻辑故障和驱动故障分析段码管上显示警告码和故障码对照表警告码操作模式故障码操作模式或驱动故障AL000EPC(紧急电源管制模式)ER100DTC(门在设定时间内不能关到位)AL001COR(复位模式)...

Firefox 如何对发送的参数进行调试

在网页或者API进行调试的时候,尤其是在OAuth调试的时候,我们希望能够调试发送到API的数据,这个时候如何进行调试呢?使用Firefox不是十分清楚如何使用Chrome进行调试,...

V8调试器调试Node.js程序(veh调试器)

Node程序的调试不太容易,Node没有专用的调试程序,但Node使用的V8引擎提供了一个强大的调试器,可以通过TCP协议从外部访问。Node内置了这个调试器的客户端,可以方便的对Node程序进行...

JavaScript报错了?不要慌!怎么看怎么处理都在这里

在开发中,有时,我们花了几个小时写的JS代码,在游览器调试一看,控制台一堆红,瞬间一万头草泥马奔腾而来。至此,本文主要记录JS常见的一些报错类型,以及常见的报错信息,分析其报错原因,并给予处理...