Bokeh Contour Plots 完全指南等值线与填充区域的 Python 可视化实现【免费下载链接】bokehInteractive Data Visualization in the browser, from Python项目地址: https://gitcode.com/GitHub_Trending/bo/bokeh导读本文围绕 Bokeh 的figure.contour()等高线绘图能力展开讲解如何在二维四边形网格上计算并渲染等值线contour lines与等值线之间的填充区域filled regions。你将学会从简单的笛卡尔网格示例出发掌握标量与向量视觉属性、调色板插值规则、ContourRenderer与ContourColorBar的配套用法并进一步实现基于bokeh serve的动画等高线以及掩码数组等高级技巧。全文以仓库中的用户指南 contour.rst 为主体结合 contour.py 源码与 contour_simple.py、contour_polar.py、contour_animated.py 三个真实示例逐层展开。什么是 Contour Plot等高线图Contour plot用于在二维四边形网格two-dimensional quadrilateral grids上计算并渲染等值线即数值恒定的曲线。Bokeh 的等高线功能有两个显著特点一次函数调用即可同时渲染等值线与相邻等值线之间的填充多边形网格本身不限于笛卡尔坐标系极坐标等任意四边形网格同样支持。等值线对应的二维数据约定为z它定义在x、y网格之上levels则给出要计算等值线所依据的数值序列。Bokeh 自 3.0 版本起加入等高线支持后续版本仍在持续改进。简单示例一条语句画出等值线与填充区域先看仓库中完整的入门示例 contour_simple.pyimport numpy as np from bokeh.palettes import Sunset8 from bokeh.plotting import figure, show # 待轮廓化的数据是两个高斯函数的和 x, y np.meshgrid(np.linspace(0, 3, 40), np.linspace(0, 2, 30)) z 1.3*np.exp(-2.5*((x-1.3)**2 (y-0.8)**2)) - 1.2*np.exp(-2*((x-1.8)**2 (y-1.3)**2)) p figure(width550, height300, x_range(0, 3), y_range(0, 2)) levels np.linspace(-1, 1, 9) contour_renderer p.contour(x, y, z, levels, fill_colorSunset8, line_colorblack) colorbar contour_renderer.construct_color_bar() p.add_layout(colorbar, right) show(p)这段代码包含四个关键环节逐一说明如下。数据约定z 定义在 x、y 网格上x、y由np.meshgrid生成是规则间距的笛卡尔网格z是形状为(ny, nx)的二维数组本例中是两个高斯函数的叠加levels np.linspace(-1, 1, 9)给出需要计算的 9 个等值层级。视觉属性的标量与向量语义line_color与fill_color都是figure.contour的可选关键字参数指定line_color才会绘制等值线指定fill_color才会绘制填充多边形二者既可以是标量scalar也可以是向量vector视觉属性。重要长度约定等值线视觉属性如line_color的向量长度为len(levels)而填充多边形视觉属性如fill_color、hatch_color的向量长度为len(levels)-1。原因在于等值线在每一层 level 上各有一组而填充区域位于每对相邻 level 之间。本例中line_colorblack是标量因此每条等值线都渲染为纯黑实线fill_colorSunset8是向量8 种颜色于是相邻层级之间的填充区域以不同颜色呈现——这里的Sunset8恰好长度也是 8与len(levels)-1 8精确匹配。颜色条由 ContourRenderer 自动构建右侧的颜色条通过ContourRenderer.construct_color_bar()获得它自动复用等高线图的填充与线条视觉属性无需手工同步颜色。随后用p.add_layout(colorbar, right)放置到画布右侧。其底层实现见 contour_renderer.py方法内部以fill_renderer、line_renderer、levels以及由 levels 生成的FixedTicker构造一个 ContourColorBar 模型。极坐标网格示例向量视觉属性全面进阶仓库中的 contour_polar.py 展示了极坐标网格与更多视觉属性import numpy as np from bokeh.palettes import Cividis from bokeh.plotting import figure, show # 数据是极坐标网格上的二维正弦波 radius, angle np.meshgrid(np.linspace(0, 1, 20), np.linspace(0, 2*np.pi, 120)) x radius*np.cos(angle) y radius*np.sin(angle) z 1 np.sin(3*angle)*np.sin(np.pi*radius) p figure(width550, height400) levels np.linspace(0, 2, 11) contour_renderer p.contour( xx, yy, zz, levelslevels, fill_colorCividis, hatch_pattern[x]*5 [ ]*5, hatch_colorwhite, hatch_alpha0.5, line_color[white]*5 [black] [red]*5, line_dash[solid]*6 [dashed]*5, line_width[1]*6 [2]*5, ) colorbar contour_renderer.construct_color_bar(titleColorbar title) p.add_layout(colorbar, right) show(p)环绕自身的极坐标网格网格由radius20 个点与angle120 个点网格化后投影到直角坐标得到z随角度与半径正弦变化因此网格在圆周方向自行环绕。极坐标网格与笛卡尔网格在 API 层面没有差别x、y、z依然是一一对应的数组。line、fill、hatch 三组视觉属性此例用到了三类视觉属性它们对应源码 contour.py 中引入的LineProps、FillProps、HatchProps三个属性混合类line 属性line_color、line_dash、line_widthfill 属性fill_color、fill_alpha等hatch 属性hatch_pattern、hatch_color、hatch_alpha。本例中的向量长度全部符合约定11 个 levels因此 line 类向量长度为 11fill/hatch 类向量长度为 10。向量化让强调正负层级这类需求变得直接——例如line_color前 5 个为白色、中间 1 个为黑色、后 5 个为红色配合line_width前 6 个为 1、后 5 个为 2正值区与负值区的等值线在粗细、颜色、虚实上都被区分开来。颜色属性的两种额外指定方式所有视觉属性都支持标量或正确长度的向量但line_color、fill_color、hatch_color这类颜色视觉属性还额外支持两种便捷写法其实现位于 contour.py 的 _color 函数任意长度颜色序列的自动重采样传入的颜色序列若长度不等于所需长度过长或过短会被bokeh.palettes.interp_palette线性插值重采样到所需长度。长度为 256 的调色板如Cividis256在这种场景下特别有用。调色板集合Palette Collection如Cividis它本质上是从调色板长度颜色数到调色板的字典。若集合中恰好存在所需长度的调色板则直接使用若所需长度超出集合覆盖范围则取长度最接近的调色板做线性插值。插值细节见 _palette_from_collection先在集合中精确查找超长则对最长调色板插值过短则对最短调色板插值。颜色条的标题construct_color_bar()接受任意关键字参数并透传给ContourColorBar构造函数用于设置title等BaseColorBar属性。此外由于ContourColorBar同时持有填充渲染器与线条渲染器见 legends.py它可以展示 hatch 图案与线型这是普通颜色条不具备的能力。动画等高线在 Bokeh Server 中循环更新数据等高线的计算发生在 Python 侧因此用bokeh serve运行脚本即可轻松实现动画。仓库中的完整示例位于 contour_animated.py运行方式bokeh serve --show contour_animated.py动画的关键动作序列如下照常调用figure.contour(...)并保存返回的ContourRenderer对象计算更新后的z数组例如从文件读取或实时计算得到将新的z与保持不变的x、y、levels一起传给bokeh.plotting.contour.contour_data生成等高线数据对象调用ContourRenderer.set_data传入新的等高线数据对象回到第 2 步循环执行。这一流程对应源码中的两个关键 APIcontour_data返回一个ContourData数据类对象内部包含FillData填充多边形的 xs/ys 与lower_levels/upper_levels和LineData等值线 xs/ys 与levels两部分ContourRenderer.set_data把新数据写入内部的fill_renderer与line_renderer的ColumnDataSource同时保留旧的填充/线条视觉属性只替换 xs、ys 与 levels 相关字段从而实现视觉样式不重置的数据刷新。需要说明的是此动画方案的前提是网格、等高线层级与视觉属性保持不变。若这些也需要动态改变虽然技术上可行但必须小心处理画布边界变化以及视觉属性到等高线层级的重新分配更稳妥的做法是移除旧的等高线图再新建一个替换。高级细节必填与可选参数figure.contour的签名见 _figure.py。唯一必填的关键字参数是z二维数组即待轮廓化的数据levels等值层级序列fill_color与line_color中至少指定一个。x、y均为可选参数x可以是与z.shape相同的二维数组或长度为nx z.shape[1]的一维数组且必须单调有序y可以是与z.shape相同的二维数组或长度为ny z.shape[0]的一维数组且必须单调有序两者都省略时默认使用两个方向间距均为 1 的笛卡尔网格等价于np.arange(nx)、np.arange(ny)。levels必须严格递增。源码 _validate_levels 会做三件事拒绝缺失或空 levels、强制转换为float数组、校验相邻差值必须大于 0若 levels 少于 2 个填充区域将自动关闭因为没有相邻层级对。排除网格点Masked Array 与 NaN要从等高线计算中排除某些网格点有两种等价方式对z使用 NumPy 掩码数组masked array被掩码的网格点不参与计算将这些网格点的z值设为np.nan。源码层面from_contour的 docstring见 contour.py明确说明z可以是掩码数组且任何无效值np.inf或np.nan同样会被排除。底层图形与计算引擎等值线使用MultiLine图形实现填充多边形使用MultiPolygons图形实现填充多边形的line_width被置为 0、line_alpha置为 0避免填充区域边缘出现额外描边见 contour.py等高线几何计算由ContourPy完成。在 _contour_coords 中Bokeh 以LineType.ChunkCombinedNan获取等值线同一层级的多条线以np.nan分隔存储在一个数组中以FillType.OuterOffset获取填充多边形每个多边形由外边界与零个或多个孔洞组成再转换为绘图所需的坐标数据结构填充数据通过contourpy.ContourGenerator.filled(lower, upper)逐对相邻层级计算等值线通过contourpy.ContourGenerator.lines(level)逐层级计算。快速对照API 一览关注点用法仓库依据创建等高线p.contour(x, y, z, levels, **visuals)_figure.py底层构造器from_contour(x, y, z, levels, **visuals)contour.py生成可复用的数据对象contour_data(x, y, z, levels, want_fill, want_line)contour.py更新渲染器数据renderer.set_data(contour_data_obj)contour_renderer.py构建颜色条renderer.construct_color_bar(title...)contour_renderer.py长度约定线len(levels)填充/hatchlen(levels)-1contour.py颜色自动插值任意长度序列经interp_palette重采样调色板集合取最近长度插值[contour.py](https://link.gitcode.com/i/cfcf56ff5ba7c73055d696d583a7f517#L302-L310, L383-L404)小结与建议从入门到进阶Bokeh 的等高线功能覆盖了标量与向量视觉属性的一行式渲染、极坐标等非笛卡尔网格、自动同步样式的ContourColorBar、基于contour_dataset_data的服务端动画以及掩码数组排除网格点等边界处理。建议下一步直接运行仓库中的三个示例contour_simple.py、contour_polar.py、contour_animated.py逐一验证上述行为动画示例记得使用bokeh serve --show启动因为等高线计算发生在 Python 进程中静态 HTML 页面无法驱动这类循环刷新。【免费下载链接】bokehInteractive Data Visualization in the browser, from Python项目地址: https://gitcode.com/GitHub_Trending/bo/bokeh创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考