Bokeh 坐标范围与坐标轴完全指南自动 Range、五大轴类型、双轴与固定轴实战【免费下载链接】bokehInteractive Data Visualization in the browser, from Python项目地址: https://gitcode.com/GitHub_Trending/bo/bokehBokeh 在浏览器中交互式渲染数据可视化其绘图坐标系由x_range/y_range两个范围对象与各类坐标轴共同构成。本文以官方用户指南 Ranges and axes 为主线系统讲解 Bokeh 的自动范围auto-ranging、窗口化自动范围、手动指定范围、五种坐标轴类型线性、分类、日期时间、对数、Mercator、时间差以及双轴与固定位置轴的高级用法。读完本文你将掌握如何精确控制图表的可视范围与坐标轴形态并能直接在 examples/basic/axes 目录的官方示例基础上改造出自己的图表。Axis Ranges控制绘图的坐标范围Bokeh 中每个 Plot 都有x_range与y_range两个核心属性它们决定了数据在画布上的映射区间。根据需求不同你可以让范围自动贴合数据也可以手动指定上下限甚至限制用户缩放平移的边界。默认自动范围Default auto-ranging默认情况下Bokeh 会自动把绘图的数据边界设定为“紧贴全部数据”。这一自动范围行为由DataRange1d模型完成它是 Plot 的x_range与y_range属性的默认值from bokeh.plotting import figure p figure() # x_range 与 y_range 均为 DataRange1d自动贴合数据从 DataRange1d 源码 可以看到其核心语义默认情况下范围的start和end会自动取关联渲染器renderer数据的 min/max 值并且支持若干微调属性range_padding在计算出的数据边界外额外填充多少。当range_padding_units为percent时范围跨度按百分比扩大为absolute时start/end 按绝对量外扩。默认值为0.1即 10% 填充。range_padding_units填充单位percent默认或absolute。bounds范围允许到达的边界常用于阻止用户平移/缩放离开数据区域下文详述。min_interval/max_interval范围最小/最大跨度约束缩放粒度。flipped是否反转轴方向。follow与follow_interval让范围“跟随”某个端点滑动适合滚动时间序列。default_span默认跨度。only_visible是否只基于可见的渲染器计算范围。这些属性表明DataRange1d并非简单的“取 min/max”而是一个可精细调节的自动拟合引擎。窗口化自动范围Windowed auto-ranging有时你希望某一轴上的自动范围只依据另一轴当前视口viewport内的数据来计算。典型场景是在 x 方向平移一条很长的时序数据时希望 y 轴范围随时调整只拟合当前屏幕可见的部分。这可以通过 Plot 的window_axis属性实现。例如要让 x 轴为 y 轴自动范围定义窗口设置p.window_axis xwindow_axis属性在 plots.py 源码 中定义同时暴露在plots.pyi类型声明中可取值x或y。完整可运行示例见 range_tool.py该示例演示了 RangeTool 与窗口化自动范围的组合拖动 x 方向的窗口工具时另一张图的 y 轴会自动聚焦于窗口内的数据。手动设置范围Setting ranges manually当需要显式固定坐标范围时可用Range1d对象设置x_range和/或y_range通过start与end指定区间的起止点p.x_range Range1d(0, 100)为方便起见figure函数也允许直接把(start, end)元组作为x_range或y_range参数传入。两种方式可以混用官方示例 figure_range.py 同时演示了两种写法from bokeh.models import Range1d from bokeh.plotting import figure, show # 创建绘图时用元组设置 x_range p figure(width400, height400, x_range(0, 20)) # 之后用 Range1d 对象覆盖 y_range p.y_range Range1d(0, 15) p.scatter([1, 2, 3, 4, 5], [2, 5, 8, 2, 7], size10) show(p)除了Range1d范围还提供bounds属性用于限定用户平移pan与缩放zoom的极限。下面代码用Range1d设置 y 轴范围 0~15但限制bounds(0, None)——表示用户只能在这个区间内缩放平移y 轴下界被钳制在 0# set a range using a Range1d p.y_range Range1d(0, 15, bounds(0, None))bounds使用(start, end)形式其中任意一端可为None表示不限。从 DataRange1d 的 bounds 定义 看它同样支持accept_datetimeTrue即日期时间类型的边界约束。Axis Types五大坐标轴类型前面所有示例都使用默认的线性轴linear axis适合以线性刻度展示数值数据。但实际场景中你还会遇到分类数据、日期时间、对数刻度甚至 Web 地图坐标。Bokeh 在bokeh.plotting接口下通过figure的x_axis_type与y_axis_type参数指定轴类型。分类轴Categorical axes要创建分类轴需要为某个 range 指定FactorRange或者直接传入因子factor列表让其自动转换为FactorRange。例如 categorical_axis.pyfrom bokeh.plotting import figure, show factors [a, b, c, d, e, f, g, h] x [50, 40, 65, 10, 25, 37, 80, 60] p figure(y_rangefactors) # 因子列表自动转换为 FactorRange p.scatter(x, factors, size15, fill_colororange, line_colorgreen, line_width3) show(p)FactorRange在 ranges.py 源码 中定义支持factors因子序列以及factor_padding、subgroup_padding、group_padding、range_padding、bounds、min_interval、max_interval等属性可精细控制分类轴各层级之间的留白。分类轴还天然支持嵌套分组、堆叠条形等高级图表参见 categorical_axis.py 及 categorical 主题示例。日期时间轴Datetime axes对于时间序列或任何涉及日期/时间的数据你可能希望轴标签按不同的时间尺度年、月、日、时、分、秒自适应格式化。figure接受x_axis_type和y_axis_type参数传入datetime即可import pandas as pd from bokeh.plotting import figure, show from bokeh.sampledata.stocks import AAPL df pd.DataFrame(AAPL) df[date] pd.to_datetime(df[date]) # 创建使用 datetime 轴的绘图 p figure(width800, height250, x_axis_typedatetime) p.line(df[date], df[close], colornavy, alpha0.5) show(p)该示例来自 datetime_axis.py它使用内置采样数据 AAPL 股票收盘价绘制折线。注意此示例需要网络连接下载采样数据且依赖开源 Pandas 库。官方文档还指出未来版本的 Bokeh 会尝试自动检测适合使用日期时间轴的场景并自动启用。对数刻度轴Log scale axes当数据呈指数增长或跨越多个数量级时通常需要一个对数轴对于幂律power law关系的数据两个轴都可能需要对数刻度。同样使用x_axis_type/y_axis_type传入log即可from bokeh.plotting import figure, show x [0.1, 0.5, 1.0, 1.5, 2.0, 2.5, 3.0] y [10**xx for xx in x] # 创建使用 log 轴的绘图 p figure(width400, height400, y_axis_typelog) p.line(x, y, line_width2) p.scatter(x, y, fill_colorwhite, size8) show(p)以上即 log_scale_axis.py 的完整代码y 10**x在普通刻度下会迅速冲出画面而对数 y 轴能完整展示全部数量级。默认情况下Bokeh 计算对数轴范围时会贴合正数值数据如需自定义范围参见上文“手动设置范围”一节使用Range1d与bounds精确控制。Web 墨卡托轴Mercator axesMercator 轴专门用于瓦片底图tile sources。与前面一致在figure的x_axis_type/y_axis_type中传mercator即可。官方示例 tile_source.py 展示了完整用法from bokeh.plotting import figure, show # 范围边界以 Web Mercator 坐标给出 p figure(x_range(-2000000, 2000000), y_range(1000000, 7000000), x_axis_typemercator, y_axis_typemercator) p.add_tile(CartoDB Positron, retinaTrue) show(p)注意这里x_range/y_range直接以 Web Mercator 投影坐标米指定范围这是与普通数值轴的主要区别更完整的地图主题示例可参阅 geo 主题目录。时间差轴Timedelta axes对于涉及时间差time deltas或时间间隔的时序数据可以使用标签适配不同时间尺度的轴。同样在figure的x_axis_type/y_axis_type中传入timedeltafrom bokeh.plotting import figure, show from bokeh.sampledata.cycling import cycling # 创建使用 timedelta 轴的绘图 p figure(width800, height250, x_axis_typetimedelta, y_axis_labelPower [W]) p.line(cycling[time], cycling[power], colorgreen) show(p)该代码来自 timedelta_axis.py使用内置的骑行功率采样数据bokeh.sampledata.cycling绘制“时间差—功率”曲线。与 datetime 示例类似该示例同样需要网络连接与 Pandas 依赖。Twin Axes同一绘图上的多轴系统有时需要在同一个图中叠加多组不同量纲的数据此时可以借助“额外命名范围”实现双轴乃至多轴。做法是在 Plot 的extra_x_ranges与extra_y_ranges属性中配置命名范围随后在新增字形glyph方法时通过x_range_name/y_range_name引用这些命名范围并用add_layout方法添加新的轴对象。官方示例 twin_axes.py 完整演示了这一流程主数据是 x ∈ [-2π, 2π] 上的正弦波蓝色圆点y ∈ [-1, 1]副数据是线性增长到 100 的红色圆点二者共用 x 轴刻度但 y 轴量纲完全不同from numpy import arange, linspace, pi, sin from bokeh.layouts import column from bokeh.models import (CustomJS, LinearAxis, Range1d, Select, WheelZoomTool, ZoomInTool, ZoomOutTool) from bokeh.palettes import Sunset6 from bokeh.plotting import figure, show x arange(-2*pi, 2*pi, 0.2) y sin(x) y2 linspace(0, 100, len(x)) blue, red Sunset6[2], Sunset6[5] p figure(x_range(-2*pi, 2*pi), y_range(-1, 1), toolspan,box_zoom,save,reset) p.background_fill_color #fafafa # 主数据蓝色正弦波 blue_circles p.scatter(x, y, line_colorblack, fill_colorblue, size12) p.axis.axis_label light blue circles p.axis.axis_label_text_color blue # 定义命名范围 foo量纲与主范围不同 p.extra_x_ranges[foo] Range1d(-2*pi, 2*pi) p.extra_y_ranges[foo] Range1d(0, 100) red_circles p.scatter(x, y2, colorred, size8, x_range_namefoo, y_range_namefoo, ) # 为 foo 范围创建左侧与下方两个 LinearAxis ax2 LinearAxis( axis_labelred circles, x_range_namefoo, y_range_namefoo, ) ax2.axis_label_text_color red p.add_layout(ax2, left) ax3 LinearAxis( axis_labelred circles, x_range_namefoo, y_range_namefoo, ) ax3.axis_label_text_color red p.add_layout(ax3, below) show(p)关键点总结命名范围extra_x_ranges[foo]与extra_y_ranges[foo]注册了一个名为foo的独立坐标系量纲与默认范围无关。字形绑定scatter的x_range_name/y_range_name指定该字形使用哪个坐标系。轴绑定新建的LinearAxis同样通过x_range_name/y_range_name绑定到foo坐标系再用add_layout(ax, left)/add_layout(ax, below)放到指定侧边。示例中还额外演示了axis_label_text_color等标签样式定制以及为不同渲染器分别配置ZoomInTool/ZoomOutTool的用法。双轴机制同样适用于 x 轴方向extra_x_ranges例如绘制共享 y 轴但 x 量纲不同的两组曲线。更简洁的柱状图双轴场景可参考 twin_axis.py 与 twin_axes.py。Fixed Location Axis把坐标轴放到任意位置默认情况下Bokeh 把坐标轴放在绘图区域的两侧左侧、下方等。你也可以通过坐标轴的fixed_location属性把轴定位到范围中的任意数值处。例如让 x 轴与 y 轴都穿过原点0 点形成数学教科书式的十字坐标系import numpy as np from bokeh.plotting import figure, show x np.linspace(-6, 6, 500) y 8*np.sin(x)*np.sinc(x) p figure(width800, height300, title, tools, toolbar_locationNone, match_aspectTrue) p.line(x, y, colornavy, alpha0.4, line_width4) p.background_fill_color #efefef # 把 x 轴与 y 轴固定在数值 0 处 p.xaxis.fixed_location 0 p.yaxis.fixed_location 0 show(p)以上来自 fixed_axis.pyp.xaxis.fixed_location 0把 x 轴默认位于下方移动到 y0 的水平位置p.yaxis.fixed_location 0把 y 轴默认位于左侧移动到 x0 的垂直位置二者交叉形成贯穿原点的十字轴。示例还设置了match_aspectTrue保持纵横比一致并移除了工具栏以获得更干净的展示效果。fixed_location适用于任何数值型轴线性、对数、日期时间等只需把轴移动到数据范围内的目标值即可若设置的值超出当前范围轴会被绘制在对应侧的边界之外。小结Range 与 Axis 的搭配选择回顾本文要点控制 Bokeh 坐标系的基本决策路径如下范围Range默认DataRange1d自动贴合数据需要窗口化自动范围时设置p.window_axis x参考 range_tool.py需要固定区间时用Range1d(start, end)或元组并可用bounds限制用户的缩放平移边界。轴类型Axis type通过figure的x_axis_type/y_axis_type选择linear默认、categorical配合FactorRange、datetime、timedelta、log或mercator配合瓦片底图。多轴Twin axes用extra_x_ranges/extra_y_ranges注册命名范围在字形与LinearAxis上通过x_range_name/y_range_name绑定再用add_layout添加轴。轴位置通过fixed_location把坐标轴固定到范围内任意数值处。所有示例源码均可在 examples/basic/axes 目录中找到并直接运行配合 DataRange1d 实现 与 FactorRange/Range1d 类型声明你可以在此基础上继续深入探索 Bokeh 坐标系统的更多细节。【免费下载链接】bokehInteractive Data Visualization in the browser, from Python项目地址: https://gitcode.com/GitHub_Trending/bo/bokeh创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考