尧图网页设计 
用 Plotly FigureWidget 构建 ipywidgets 交互式数据探索应用NYC 航班延误分析实战【免费下载链接】plotly.pyThe interactive graphing library for Python :sparkles:项目地址: https://gitcode.com/gh_mirrors/pl/plotly.pyPlotly FigureWidget 是 plotly.py 提供的一种可交互的图表组件它把 Plotly 图表封装为标准的 Jupyter ipywidgets 控件因此可以和其他控件滑杆、下拉框、复选框一起放进同一个HBox/VBox布局由 Python 回调实时驱动图表更新。本文以 2013 年纽约NYC出发航班延误数据为例完整演示从数据加载、控件搭建、事件绑定到可视化联动的全流程并结合仓库源码剖析 FigureWidget 的前后端同步机制、batch_update批量更新原理与使用限制。读完本文你将能够用 FigureWidget ipywidgets 独立搭建一个可交互的数据分析面板。前置准备安装依赖FigureWidget 在 Jupyter 等兼容 notebook 中以交互式控件的形式展示 Plotly 图表其渲染依赖anywidget包BaseFigureWidget直接继承自anywidget.AnyWidget见 plotly/basewidget.py。因此使用前需要安装pip install anywidget同时还需要ipywidgets控件系统本身、pandas数据处理与numpypip install ipywidgets pandas numpy从源码角度看FigureWidget 的可用性取决于运行环境在 plotly/graph_objects/init.py 中FigureWidget通过延迟导入__getattr__按需解析——只有当ipywidgets版本不低于 7.0.0 时才导入真实的plotly.graph_objs._figurewidget.FigureWidget否则或anywidget缺失时会回退到 plotly/missing_anywidget.py 中的占位类该占位类在构造时会抛出ImportError(Please install anywidget to use the FigureWidget class)给出明确的安装提示。对应的行为由 tests/test_core/test_figure_widget_backend/test_missing_anywidget.py 验证。数据准备2013 年纽约出发航班数据集本文应用的数据集为 2013 年从纽约三大机场JFK、LGA、EWR出发的所有航班延误记录nycflights.csv。首先加载并清洗数据import datetime import numpy as np import pandas as pd import plotly.graph_objects as go from ipywidgets import widgets df pd.read_csv(nycflights.csv) df df.drop(df.columns[[0]], axis1)其中df.drop(df.columns[[0]], axis1)用于丢弃第一列无用的索引列。接着可以抽样查看数据、并提取航空公司与出发机场的取值集合供后续下拉框使用df.sample(3) df[carrier].unique() # 航空公司列表如 [DL, UA, ...] list(df[origin].unique()) # 出发机场列表如 [LGA, JFK, EWR]构建控件层用 ipywidgets 组装过滤面板应用的核心交互思路是所有控件都用来过滤数据集进而驱动图表内容。文档中定义了四个控件month widgets.IntSlider( value1.0, min1.0, max12.0, step1.0, descriptionMonth:, continuous_updateFalse ) use_date widgets.Checkbox( descriptionDate: , valueTrue, ) container widgets.HBox(children[use_date, month]) textbox widgets.Dropdown( descriptionAirline: , valueDL, optionsdf[carrier].unique().tolist() ) origin widgets.Dropdown( optionslist(df[origin].unique()), valueLGA, descriptionOrigin Airport:, )各控件的作用与参数说明如下控件类型关键参数用途monthIntSlidervalue1初始月份、min1、max12、step1、continuous_updateFalse选择要查看的月份。continuous_updateFalse表示拖动滑杆过程中不连续触发回调只在松开时更新避免高频重算use_dateCheckboxvalueTrue是否启用按月份过滤取消勾选后回退到只看DL航空公司的默认数据textboxDropdownvalueDL、optionsdf[carrier].unique().tolist()选择航空公司originDropdownvalueLGA、optionslist(df[origin].unique())选择出发机场其中container widgets.HBox(children[use_date, month])先把复选框与滑杆横向排列成一个容器稍后与其他控件再组合成完整布局。构建可视化层FigureWidget 双直方图先创建带两条 trace 的FigureWidget分别展示到达延误Arrival Delays与出发延误Departure Delays的分布# Assign an empty figure widget with two traces trace1 go.Histogram(xdf[arr_delay], opacity0.75, nameArrival Delays) trace2 go.Histogram(xdf[dep_delay], opacity0.75, nameDeparture Delays) g go.FigureWidget(data[trace1, trace2], layoutgo.Layout( titledict( textNYC FlightDatabase ), barmodeoverlay ))这里opacity0.75让两条半透明直方图叠加时都能看清barmodeoverlay指定直方图以叠加而非并排方式渲染。FigureWidget的构造函数签名与普通Figure一致data、layout、frames、skip_invalid见 plotly/graph_objs/_figurewidget.py因此它天然兼容 Plotly 图对象体系既可以直接传入go.Histogram/go.Layout对象也可以把现成的go.Figure实例直接传给构造函数完成普通图 → 交互控件的转换figure go.Figure(datadata, layoutlayout) f2 go.FigureWidget(figure)关于 FigureWidget 的基础用法创建空控件、f.add_scatter(...)、f.layout.title ...、直接修改f.data[0].y实时刷新等可参考同主题的入门文档 doc/python/figurewidget.md。事件驱动observe 绑定与响应函数接下来编写处理控件输入、并更新图表状态的函数。文档中拆分为校验与响应两部分def validate(): if origin.value in df[origin].unique() and textbox.value in df[carrier].unique(): return True else: return False def response(change): if validate(): if use_date.value: filter_list [i and j and k for i, j, k in zip(df[month] month.value, df[carrier] textbox.value, df[origin] origin.value)] temp_df df[filter_list] else: filter_list [i and j for i, j in zip(df[carrier] DL, df[origin] origin.value)] temp_df df[filter_list] x1 temp_df[arr_delay] x2 temp_df[dep_delay] with g.batch_update(): g.data[0].x x1 g.data[1].x x2 g.layout.barmode overlay g.layout.xaxis.title Delay in Minutes g.layout.yaxis.title Number of Delays origin.observe(response, namesvalue) textbox.observe(response, namesvalue) month.observe(response, namesvalue) use_date.observe(response, namesvalue)逻辑拆解validate()守卫函数只有当下拉框中的航空公司/机场取值仍属于数据集合法取值时才继续防止控件状态与数据不同步时出错。response(change)回调主体。勾选use_date时用zip将三个布尔 Series月份、航空公司、出发机场逐行做and逻辑与得到同时满足三个条件的行级过滤列表未勾选时则只按航空公司为DL和出发机场两个条件过滤。with g.batch_update():关键的性能优化手段。batch_update是BaseFigure提供的上下文管理器plotly/basedatatypes.py把块内多次 trace 与 layout 赋值合并为一条plotly_update消息在退出上下文时一次性发给前端。若不加batch_updateg.data[0].x、g.layout.xaxis.title等每次赋值都会各自触发一次前端重绘批量更新则保证整组修改原子、高效地生效。observe(response, namesvalue)ipywidgets 的事件绑定 API四个控件任一value变化都会触发response实现改控件 → 自动重画直方图的联动。组装展示HBox / VBox 布局最后把控件与图表组合成完整应用并显示container2 widgets.HBox([origin, textbox]) widgets.VBox([container, container2, g])VBox垂直排列第一行是日期复选框 月份滑杆第二行是机场 航空公司下拉框第三行是 FigureWidget 图表本身。notebook 渲染该 cell 时控件与图表同框呈现用户可即时交互。底层原理Python 与 JS 的双向同步FigureWidget 不是简单地把静态 HTML 塞进 cell而是一套完整的Python ↔ 前端实时双向同步协议核心实现位于 plotly/basewidget.py。状态载体traitlets 同步属性_widget_layout、_widget_data、_config三个属性用.tag(syncTrue)标记在构造时通过deepcopy从图对象快照plotly/basewidget.py中self._widget_layout deepcopy(self._layout_obj._props)初始化并同步到前端 widget 模型。Python → JS 消息所有对图表的修改都被编码为 Plotly 风格的消息通过赋值后立刻置None的写协议发送_py2js_addTraces新增 trace_py2js_restyle/_py2js_relayout/_py2js_update样式、布局、混合更新_py2js_animate动画_py2js_deleteTraces/_py2js_moveTraces删除、移动 trace_py2js_removeLayoutProps/_py2js_removeTraceProps属性回退JS → Python 消息前端通过observe注册的 handler 反向接收消息包括_handler_js2py_traceDeltas、_handler_js2py_layoutDelta将前端编辑后的 trace/layout 增量合并回 Python 状态、_handler_js2py_restyle/_handler_js2py_relayout/_handler_js2py_update把用户在工具栏上的操作如缩放、隐藏 trace 同步回 Python以及_handler_js2py_pointsCallback——它把前端上报的点击/悬停/框选事件还原为Points、BoxSelector、LassoSelector、InputDeviceState等对象并分发到trace._dispatch_on_click、_dispatch_on_hover、_dispatch_on_selection等回调。对应的前端 JavaScript 模型消息类型定义、Py2JsMsg/Js2PyMsg结构位于 js/src/widget.ts。编辑 ID 追踪为避免前端编辑尚未完成时又收到新的 Python 更新导致状态不一致_last_layout_edit_id/_last_trace_edit_id两个整数属性被用于对消息排序plotly/basewidget.py只有编辑 ID 匹配最新操作的增量才会被应用同时on_edits_completed(fn)支持在全部挂起编辑完成后执行回调。使用限制与注意事项不支持 FramesFigureWidget 明确不支持动画帧frames。在构造函数中传入非空frames或对实例的frames属性赋值非空列表都会抛出ValueError提示Frames are not supported by the plotly.graph_objs.FigureWidget class见 plotly/basewidget.py空列表则被允许。该约束由 tests/test_core/test_figure_widget_backend/test_validate_no_frames.py 覆盖验证。依赖版本需要ipywidgets 7.0.0且安装anywidget否则FigureWidget会回退为占位实现并在构造时抛出ImportError可参考 plotly/graph_objects/init.py 的分支逻辑。展示方式FigureWidget 通过_repr_mimebundle_返回application/vnd.jupyter.widget-viewjsonMIME bundleplotly/basewidget.py因此必须运行在支持 widget 渲染的 Jupyter 内核环境中在普通print或静态脚本场景下需要另行处理。参考help(go.FigureWidget)在 notebook 中执行help(go.FigureWidget)可查看完整的构造签名与属性说明进一步的 FigureWidget 入门示例可继续阅读 doc/python/figurewidget.md。【免费下载链接】plotly.pyThe interactive graphing library for Python :sparkles:项目地址: https://gitcode.com/gh_mirrors/pl/plotly.py创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 用 Plotly FigureWidget 构建 ipywidgets 交互式数据探索应用：NYC 航班延误分析实战
用 Plotly FigureWidget 构建 ipywidgets 交互式数据探索应用NYC 航班延误分析实战【免费下载链接】plotly.pyThe interactive graphing library for Python :sparkles:项目地址: https://gitcode.com/gh_mirrors/pl/plotly.pyPlotly FigureWidget 是 plotly.py 提供的一种可交互的图表组件它把 Plotly 图表封装为标准的 Jupyter ipywidgets 控件因此可以和其他控件滑杆、下拉框、复选框一起放进同一个HBox/VBox布局由 Python 回调实时驱动图表更新。本文以 2013 年纽约NYC出发航班延误数据为例完整演示从数据加载、控件搭建、事件绑定到可视化联动的全流程并结合仓库源码剖析 FigureWidget 的前后端同步机制、batch_update批量更新原理与使用限制。读完本文你将能够用 FigureWidget ipywidgets 独立搭建一个可交互的数据分析面板。前置准备安装依赖FigureWidget 在 Jupyter 等兼容 notebook 中以交互式控件的形式展示 Plotly 图表其渲染依赖anywidget包BaseFigureWidget直接继承自anywidget.AnyWidget见 plotly/basewidget.py。因此使用前需要安装pip install anywidget同时还需要ipywidgets控件系统本身、pandas数据处理与numpypip install ipywidgets pandas numpy从源码角度看FigureWidget 的可用性取决于运行环境在 plotly/graph_objects/init.py 中FigureWidget通过延迟导入__getattr__按需解析——只有当ipywidgets版本不低于 7.0.0 时才导入真实的plotly.graph_objs._figurewidget.FigureWidget否则或anywidget缺失时会回退到 plotly/missing_anywidget.py 中的占位类该占位类在构造时会抛出ImportError(Please install anywidget to use the FigureWidget class)给出明确的安装提示。对应的行为由 tests/test_core/test_figure_widget_backend/test_missing_anywidget.py 验证。数据准备2013 年纽约出发航班数据集本文应用的数据集为 2013 年从纽约三大机场JFK、LGA、EWR出发的所有航班延误记录nycflights.csv。首先加载并清洗数据import datetime import numpy as np import pandas as pd import plotly.graph_objects as go from ipywidgets import widgets df pd.read_csv(nycflights.csv) df df.drop(df.columns[[0]], axis1)其中df.drop(df.columns[[0]], axis1)用于丢弃第一列无用的索引列。接着可以抽样查看数据、并提取航空公司与出发机场的取值集合供后续下拉框使用df.sample(3) df[carrier].unique() # 航空公司列表如 [DL, UA, ...] list(df[origin].unique()) # 出发机场列表如 [LGA, JFK, EWR]构建控件层用 ipywidgets 组装过滤面板应用的核心交互思路是所有控件都用来过滤数据集进而驱动图表内容。文档中定义了四个控件month widgets.IntSlider( value1.0, min1.0, max12.0, step1.0, descriptionMonth:, continuous_updateFalse ) use_date widgets.Checkbox( descriptionDate: , valueTrue, ) container widgets.HBox(children[use_date, month]) textbox widgets.Dropdown( descriptionAirline: , valueDL, optionsdf[carrier].unique().tolist() ) origin widgets.Dropdown( optionslist(df[origin].unique()), valueLGA, descriptionOrigin Airport:, )各控件的作用与参数说明如下控件类型关键参数用途monthIntSlidervalue1初始月份、min1、max12、step1、continuous_updateFalse选择要查看的月份。continuous_updateFalse表示拖动滑杆过程中不连续触发回调只在松开时更新避免高频重算use_dateCheckboxvalueTrue是否启用按月份过滤取消勾选后回退到只看DL航空公司的默认数据textboxDropdownvalueDL、optionsdf[carrier].unique().tolist()选择航空公司originDropdownvalueLGA、optionslist(df[origin].unique())选择出发机场其中container widgets.HBox(children[use_date, month])先把复选框与滑杆横向排列成一个容器稍后与其他控件再组合成完整布局。构建可视化层FigureWidget 双直方图先创建带两条 trace 的FigureWidget分别展示到达延误Arrival Delays与出发延误Departure Delays的分布# Assign an empty figure widget with two traces trace1 go.Histogram(xdf[arr_delay], opacity0.75, nameArrival Delays) trace2 go.Histogram(xdf[dep_delay], opacity0.75, nameDeparture Delays) g go.FigureWidget(data[trace1, trace2], layoutgo.Layout( titledict( textNYC FlightDatabase ), barmodeoverlay ))这里opacity0.75让两条半透明直方图叠加时都能看清barmodeoverlay指定直方图以叠加而非并排方式渲染。FigureWidget的构造函数签名与普通Figure一致data、layout、frames、skip_invalid见 plotly/graph_objs/_figurewidget.py因此它天然兼容 Plotly 图对象体系既可以直接传入go.Histogram/go.Layout对象也可以把现成的go.Figure实例直接传给构造函数完成普通图 → 交互控件的转换figure go.Figure(datadata, layoutlayout) f2 go.FigureWidget(figure)关于 FigureWidget 的基础用法创建空控件、f.add_scatter(...)、f.layout.title ...、直接修改f.data[0].y实时刷新等可参考同主题的入门文档 doc/python/figurewidget.md。事件驱动observe 绑定与响应函数接下来编写处理控件输入、并更新图表状态的函数。文档中拆分为校验与响应两部分def validate(): if origin.value in df[origin].unique() and textbox.value in df[carrier].unique(): return True else: return False def response(change): if validate(): if use_date.value: filter_list [i and j and k for i, j, k in zip(df[month] month.value, df[carrier] textbox.value, df[origin] origin.value)] temp_df df[filter_list] else: filter_list [i and j for i, j in zip(df[carrier] DL, df[origin] origin.value)] temp_df df[filter_list] x1 temp_df[arr_delay] x2 temp_df[dep_delay] with g.batch_update(): g.data[0].x x1 g.data[1].x x2 g.layout.barmode overlay g.layout.xaxis.title Delay in Minutes g.layout.yaxis.title Number of Delays origin.observe(response, namesvalue) textbox.observe(response, namesvalue) month.observe(response, namesvalue) use_date.observe(response, namesvalue)逻辑拆解validate()守卫函数只有当下拉框中的航空公司/机场取值仍属于数据集合法取值时才继续防止控件状态与数据不同步时出错。response(change)回调主体。勾选use_date时用zip将三个布尔 Series月份、航空公司、出发机场逐行做and逻辑与得到同时满足三个条件的行级过滤列表未勾选时则只按航空公司为DL和出发机场两个条件过滤。with g.batch_update():关键的性能优化手段。batch_update是BaseFigure提供的上下文管理器plotly/basedatatypes.py把块内多次 trace 与 layout 赋值合并为一条plotly_update消息在退出上下文时一次性发给前端。若不加batch_updateg.data[0].x、g.layout.xaxis.title等每次赋值都会各自触发一次前端重绘批量更新则保证整组修改原子、高效地生效。observe(response, namesvalue)ipywidgets 的事件绑定 API四个控件任一value变化都会触发response实现改控件 → 自动重画直方图的联动。组装展示HBox / VBox 布局最后把控件与图表组合成完整应用并显示container2 widgets.HBox([origin, textbox]) widgets.VBox([container, container2, g])VBox垂直排列第一行是日期复选框 月份滑杆第二行是机场 航空公司下拉框第三行是 FigureWidget 图表本身。notebook 渲染该 cell 时控件与图表同框呈现用户可即时交互。底层原理Python 与 JS 的双向同步FigureWidget 不是简单地把静态 HTML 塞进 cell而是一套完整的Python ↔ 前端实时双向同步协议核心实现位于 plotly/basewidget.py。状态载体traitlets 同步属性_widget_layout、_widget_data、_config三个属性用.tag(syncTrue)标记在构造时通过deepcopy从图对象快照plotly/basewidget.py中self._widget_layout deepcopy(self._layout_obj._props)初始化并同步到前端 widget 模型。Python → JS 消息所有对图表的修改都被编码为 Plotly 风格的消息通过赋值后立刻置None的写协议发送_py2js_addTraces新增 trace_py2js_restyle/_py2js_relayout/_py2js_update样式、布局、混合更新_py2js_animate动画_py2js_deleteTraces/_py2js_moveTraces删除、移动 trace_py2js_removeLayoutProps/_py2js_removeTraceProps属性回退JS → Python 消息前端通过observe注册的 handler 反向接收消息包括_handler_js2py_traceDeltas、_handler_js2py_layoutDelta将前端编辑后的 trace/layout 增量合并回 Python 状态、_handler_js2py_restyle/_handler_js2py_relayout/_handler_js2py_update把用户在工具栏上的操作如缩放、隐藏 trace 同步回 Python以及_handler_js2py_pointsCallback——它把前端上报的点击/悬停/框选事件还原为Points、BoxSelector、LassoSelector、InputDeviceState等对象并分发到trace._dispatch_on_click、_dispatch_on_hover、_dispatch_on_selection等回调。对应的前端 JavaScript 模型消息类型定义、Py2JsMsg/Js2PyMsg结构位于 js/src/widget.ts。编辑 ID 追踪为避免前端编辑尚未完成时又收到新的 Python 更新导致状态不一致_last_layout_edit_id/_last_trace_edit_id两个整数属性被用于对消息排序plotly/basewidget.py只有编辑 ID 匹配最新操作的增量才会被应用同时on_edits_completed(fn)支持在全部挂起编辑完成后执行回调。使用限制与注意事项不支持 FramesFigureWidget 明确不支持动画帧frames。在构造函数中传入非空frames或对实例的frames属性赋值非空列表都会抛出ValueError提示Frames are not supported by the plotly.graph_objs.FigureWidget class见 plotly/basewidget.py空列表则被允许。该约束由 tests/test_core/test_figure_widget_backend/test_validate_no_frames.py 覆盖验证。依赖版本需要ipywidgets 7.0.0且安装anywidget否则FigureWidget会回退为占位实现并在构造时抛出ImportError可参考 plotly/graph_objects/init.py 的分支逻辑。展示方式FigureWidget 通过_repr_mimebundle_返回application/vnd.jupyter.widget-viewjsonMIME bundleplotly/basewidget.py因此必须运行在支持 widget 渲染的 Jupyter 内核环境中在普通print或静态脚本场景下需要另行处理。参考help(go.FigureWidget)在 notebook 中执行help(go.FigureWidget)可查看完整的构造签名与属性说明进一步的 FigureWidget 入门示例可继续阅读 doc/python/figurewidget.md。【免费下载链接】plotly.pyThe interactive graphing library for Python :sparkles:项目地址: https://gitcode.com/gh_mirrors/pl/plotly.py创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考