Bokeh 数学符号渲染完全指南在图表与控件中使用 LaTeX 和 MathML【免费下载链接】bokehInteractive Data Visualization in the browser, from Python项目地址: https://gitcode.com/GitHub_Trending/bo/bokehBokeh 原生支持在图表中渲染数学公式允许开发者使用 LaTeX 与 MathML 两种标记语言来书写轴标签、标题、刻度标签、标注Label以及各类控件文本。本指南以 Bokeh 用户手册的数学符号Mathematical notation章节为核心结合仓库中 examples/styling/mathtext 目录下的完整示例与bokeh.models.text源码实现系统讲解如何在当前项目中为图表注入专业、美观的数学排版读完后你将能熟练使用$$...$$、\[...\]、\(...\)定界符书写 LaTeX并掌握MathML模型与major_label_overrides等核心配置方法。一、Bokeh 数学符号支持总览Bokeh 支持用 LaTeX 和 MathML 两种标记语言表达数学记号目前可应用于以下元素元素说明相关文档轴标签Axis labels通过axis_label属性设置样式指南-绘图章节刻度标签Tick labels通过major_label_overrides覆盖见下文刻度标签小节标题Titles通过title属性设置基础注解-标题标注LabelsLabel注解对象基础注解-标注颜色条Color bars颜色条上的标签文本基础注解-颜色条RangeSlider / Slider 控件控件的title参数交互-控件Div / Paragraph 控件控件正文中的任意位置交互-控件渲染层面Bokeh 依赖 MathJax 库来处理 LaTeX 与 MathML 的排版。这意味着你无需在页面中自行引入其他数学渲染库Bokeh 已经集成了完整的 MathJax 支持。从源码结构看Bokeh 在 src/bokeh/models/text.py 中定义了完整的文本模型体系抽象基类BaseText提供text属性必填字符串抽象类MathText作为数学内容的基类其下派生出TeXLaTeX 记号、MathMLMathML 记号、AsciiAsciiMath 记号三个具体模型另有PlainText表示普通文本。这套模型体系正是 Bokeh 将数学文本作为一等公民传递到前端的核心载体。注意重要如果你使用components函数将 Bokeh 组件嵌入自定义 HTML 模板务必在模板中显式引入bokeh-mathjax-资源否则数学公式将无法渲染。二、使用 LaTeX 记号2.1 定界符如何让 Bokeh 识别数学表达式要使用 LaTeX 记号只需把字符串直接传给任意受支持的元素。该字符串必须以 MathJax 默认定界符开头和结尾$$...$$块级数学display math\[...\]块级数学的另一种写法\(...\)行内数学inline math例如r$$\sin(x)$$。注意示例代码中普遍使用 Python 原始字符串r...以避免反斜杠被 Python 转义。仓库示例 latex_axis_labels_titles_labels.py 同时演示了三种定界符的用法from numpy import arange, pi, sin from bokeh.models.annotations.labels import Label from bokeh.plotting import figure, show x arange(-2*pi, 2*pi, 0.1) y sin(x) p figure(height250, titler$$\sin(x)$$ for \[x\] between \(-2\pi\) and $$2\pi$$) p.scatter(x, y, alpha0.6, size7) label Label( textr$$y \sin(x)$$, x150, y130, x_unitsscreen, y_unitsscreen, ) p.add_layout(label) p.yaxis.axis_label r\(\sin(x)\) p.xaxis.axis_label r\[x\pi\] show(p)2.2 LaTeX 应用于轴标签、标题与标注将 LaTeX 用作轴标签、标题或标注时做法完全一致传入以 MathJax 默认定界符开头和结尾的原始字符串字面量即可。上面的示例中title、Label.text、p.yaxis.axis_label、p.xaxis.axis_label均直接接收了带定界符的 LaTeX 字符串。2.3 LaTeX 应用于刻度标签major_label_overrides要给刻度标签添加 LaTeX 记号需要使用轴对象的major_label_overrides方法。从源码 src/bokeh/models/axes.py 可以看到其定义major_label_overrides Dict(Either(Float, String), TextLike, default{}, help Provide explicit tick label values for specific tick locations that override normal formatting. )该属性接受一个字典键是刻度位置的原始数值或字符串值是你自定义的替换文本TextLike类型意味着它可以是普通字符串也可以是MathML、TeX等文本模型。Bokeh 会用字典中的值覆盖对应位置的默认格式化标签。仓库示例 latex_tick_labels.py 演示了电阻-电流关系图中用 LaTeX 替换普通刻度文本的方法from numpy import arange from bokeh.plotting import figure, show x arange(1, 4.5, 0.25) y 1 / x plot figure(height200) plot.title Current over Resistance at a static voltage of 1 volt plot.scatter(x, y, fill_colorblue, size5) plot.line(x, y, colordarkgrey) plot.xaxis.axis_label Resistance plot.xaxis.ticker [1, 2, 3, 4] plot.xaxis.major_label_overrides { 1: r1 $$\Omega$$, 2: r2 $$\Omega$$, 3: r3 $$\Omega$$, 4: r4 $$\Omega$$, } plot.yaxis.axis_label Current plot.yaxis.ticker [0.2, 0.4, 0.6, 0.8, 1.0] plot.yaxis.major_label_overrides { 0.2: 0.2 $$A$$, 0.4: 0.4 $$A$$, 0.6: 0.6 $$A$$, 0.8: 0.8 $$A$$, 1: 1 $$A$$, } show(plot)关键点先用plot.xaxis.ticker [1, 2, 3, 4]明确指定刻度位置再用major_label_overrides把每个位置映射到带单位符号欧姆 Ω、安培 A的 LaTeX 文本从而实现单位符号以数学字体排版的效果。2.4 LaTeX 应用于 RangeSlider 与 Slider 控件标题在 RangeSlider 或 Slider 控件的title参数中传入带定界符的原始字符串即可让控件标题显示数学公式。仓库示例 latex_slider_widget_title.py 演示from bokeh.io import show from bokeh.models import Slider slider Slider(start0, end10, value1, step.1, titler$$\delta \text{ (damping factor, 1/s)}$$) show(slider)这里除了数学符号\delta外还借助\text{}扩展把普通文字 damping factor, 1/s 嵌入数学表达式中这正是 LaTeX 扩展的典型用法见下文第五节。2.5 LaTeX 应用于 Div 与 Paragraph 控件在 Div 或 Paragraph 控件的文本中可以在字符串的任意位置使用 MathJax 默认定界符实现正文中混排数学公式的效果。仓库示例 latex_div_widget.py 演示from bokeh.io import show from bokeh.models import Div div Div( width400, height100, background#fafafa, textrThe Pythagorean identity is $$\sin^2(x) \cos^2(x) 1$$, ) show(div)关闭数学渲染如果不希望 Div 或 Paragraph 对数学记号做渲染可以把控件的disable_math属性设为True。该属性在 src/bokeh/models/widgets/markups.py 中定义为disable_math Bool(False, ...)默认开启数学处理Markdown 控件同样支持该开关见 src/bokeh/models/widgets/markdown.py。三、调整渲染后数学文本的样式Bokeh 标准的文本属性text properties同样作用于渲染后的数学文本用text_font_size改变字号用text_color改变颜色。例如原文档给出的轴标签样式设置p.xaxis.axis_label r$$\nu \:(10^{15} s^{-1})$$ p.xaxis.axis_label_text_color green p.xaxis.axis_label_text_font_size 50px在 latex_blackbody_radiation.py 中可以看到更完整的组合用法白色轴标签配合暗色主题dark_minimal并使用了\text{}在公式中混排单位文本p.xaxis.axis_label r$$\nu \:(10^{15}\ \text{Hz})$$ p.yaxis.axis_label r$$B_\nu(\nu, T) \quad\left(10^{-9}\ \text{W} / (\text{m}^2 \cdot \text{sr} \cdot \text{Hz})\right)$$在 latex_bessel.py 中标题、轴标签与Label标注共同使用了复杂的求和公式与上下标p figure( width700, height500, title( rBessel functions of the first kind: $$J_\alpha(x) \sum_{m0}^{\infty} r\frac{(-1)^m}{m!\:\Gamma(m\alpha1)} \left(\frac{x}{2}\right)^{2m\alpha}$$ ), ) ... p.title.text_font_size 14px p.title.text_color white ... p.add_layout(Label(textf$$J_{i}(x)$$, xxlabel, yylabel, text_colorwhite))此外在 Bokeh 主题theme中定义的文本颜色与字号对数学文本同样生效。例如上述两个示例分别通过curdoc().theme night_sky与curdoc().theme dark_minimal切换主题数学公式会随之继承主题中的文本样式。四、LaTeX 扩展与渲染限制除了基础数学排版你还可以使用 MathJax 内置的 LaTeX 扩展\text{}在数学表达式中插入字面文本例如\text{Hz}、\text{ (damping factor, 1/s)}非常适合物理量 单位的场景color 扩展直接改变渲染颜色例如\color{white} \sin(x)。需要特别注意的是用 LaTeX 扩展如\color{}设置的文本属性优先级高于代码中或主题里设置的其他文本属性也就是说扩展声明会覆盖同位置的text_color等设置。同时要明确一个限制MathJax 对 LaTeX 的支持存在边界它并不完全等同于完整的 TeX/LaTeX 实现——例如 MathJax 主要支持数学模式math-mode下的宏不支持文本模式text-mode宏。从 src/bokeh/models/text.py 中TeX模型的文档注释也能看到这一说明。对复杂宏或扩展行为有疑问时应以 MathJax 官方文档中 Differences from Actual TeX 一节为准按 MathJax 的实际能力编写公式。五、使用 MathML 记号除 LaTeX 外Bokeh 还支持 MathML。与 LaTeX 的字符串 定界符方式不同MathML 需要直接使用bokeh.models.text.MathML模型。该模型的text属性接受一个包含 MathML 标记的字符串例如 mathml_axis_labels.py 中的演示from numpy import arange from bokeh.models import MathML from bokeh.plotting import figure, show x arange(-10, 10, 0.1) y (x * 0.5) ** 2 mathml math mrow mfrac mn1/mn mn4/mn /mfrac msup mix/mi mn2/mn /msup /mrow /math plot figure(height200) plot.line(x, y) plot.xaxis.axis_label MathML(textmathml) show(plot)上面的 MathML 字符串等价于数学表达式1/4 · x²mfrac表示分数msup表示上标mi/mn分别表示标识符变量与数字。与 LaTeX 类似MathML 渲染结果同样支持标准文本属性plot.xaxis.axis_label MathML(textmathml) plot.xaxis.axis_label_text_color green plot.xaxis.axis_label_text_font_size 50px从源码 src/bokeh/models/text.py 可见MathML继承自MathText再继承自BaseTextBaseText定义了必填的text属性同时MathML.__init__支持位置参数直接传入文本即MathML(math.../math)与MathML(text...)等价。由于MathML本身属于TextLike类型族凡是接受TextLike的属性如major_label_overrides的值、轴标签等都可以直接传入MathML实例。六、更多实战示例与进一步阅读仓库 examples/styling/mathtext 目录还提供了多个可直接运行的高级示例可作为深入学习的素材latex_normal_distribution.py、latex_schrodinger.py物理/统计公式在标题、轴标签中的典型应用latex_outline_shapes.py数学文本与其他图形的组合排版latex_blackbody_radiation.py轴标签与 Div 控件中混排公式 \text{}单位文本 主题联动latex_bessel.py求和、分数、希腊字母等复杂公式在标题、轴标签与标注上的综合演示。这些示例的运行方式与普通 Bokeh 脚本一致直接执行python examples/styling/mathtext/latex_bessel.py即可在浏览器中查看渲染效果部分示例依赖scipy如贝塞尔函数示例。七、要点速查定界符三件套$$...$$、\[...\]、\(...\)字符串用r...原始字符串书写应用范围轴标签、标题、标注、刻度标签major_label_overrides、颜色条、Slider/RangeSlider 标题、Div/Paragraph 文本刻度标签axis.major_label_overrides {位置: 文本}文本可为字符串或MathML/TeX模型关闭渲染Div/Paragraph 设置disable_mathTrueMathML使用MathML(text...)模型支持text_font_size、text_color样式继承文本属性与主题均对数学文本生效但\color{}等 LaTeX 扩展声明的样式优先级更高嵌入注意使用components时记得在 HTML 模板中包含bokeh-mathjax-资源。【免费下载链接】bokehInteractive Data Visualization in the browser, from Python项目地址: https://gitcode.com/GitHub_Trending/bo/bokeh创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
