Bokeh项目教程：如何组合多个图表进行布局展示

Bokeh项目教程：如何组合多个图表进行布局展示

bokeh bokeh/bokeh: 是一个用于创建交互式图形和数据的 Python 库。适合用于数据可视化、数据分析和呈现，以及创建动态的 Web 应用。特点是提供了一种简洁、直观的 API 来描述和处理数据，并生成交互式的可视化效果。 项目地址: https://gitcode.com/gh_mirrors/bo/bokeh

前言

在数据可视化项目中，我们经常需要将多个图表以特定方式组合展示。Bokeh作为强大的Python可视化库，提供了灵活的布局功能。本文将详细介绍如何使用Bokeh实现图表的行列布局和网格布局，以及如何控制它们的尺寸响应行为。

基础布局方法

水平行布局

创建水平排列的图表行非常简单：

from bokeh.layouts import row
from bokeh.plotting import figure, show

# 创建多个图表
p1 = figure(width=250, height=250)
p1.circle([1, 2, 3], [4, 5, 6], size=10)

p2 = figure(width=250, height=250)
p2.triangle([1, 2, 3], [4, 5, 6], size=10)

# 以行布局展示
show(row(p1, p2))

关键点：

1. 从bokeh.layouts导入row函数
2. 创建多个图表对象
3. 将图表对象作为参数传递给row()函数
4. 使用show()展示组合后的布局

垂直列布局

类似地，创建垂直排列的图表列：

from bokeh.layouts import column

# 创建图表(同上)
...

# 以列布局展示
show(column(p1, p2))

高级网格布局

对于更复杂的布局需求，可以使用gridplot函数：

from bokeh.layouts import gridplot

# 创建4个图表
p1 = figure(width=250, height=250)
p2 = figure(width=250, height=250)
p3 = figure(width=250, height=250)
p4 = figure(width=250, height=250)

# 定义2x2网格布局
grid = gridplot([[p1, p2], [p3, p4]])

show(grid)

gridplot接受一个二维列表作为参数，可以灵活定义任意行列数的网格布局。

响应式尺寸控制

Bokeh提供了多种尺寸模式来控制布局的响应行为：

# 响应式宽度布局示例
responsive_row = row(p1, p2, sizing_mode="scale_width")
show(responsive_row)

常用尺寸模式包括：

• fixed：固定尺寸（默认）
• scale_width：宽度按比例缩放
• scale_height：高度按比例缩放
• scale_both：宽高都按比例缩放
• stretch_width：拉伸宽度填充容器
• stretch_height：拉伸高度填充容器
• stretch_both：拉伸宽高填充容器

最佳实践建议

1. 一致性原则：组合展示的图表最好使用相同的尺寸和比例，确保视觉效果协调

2. 性能考虑：当组合大量图表时，考虑使用bokeh.io.output_notebook()在笔记本中展示，或导出为HTML文件

3. 交互一致性：组合图表默认会共享范围(Range)和工具(Tools)，可通过显式设置x_range和y_range来独立控制

4. 移动端适配：对于响应式网页，推荐使用scale_width或stretch_width模式

总结

Bokeh提供了强大而灵活的布局系统，通过row、column和gridplot等函数，开发者可以轻松实现各种复杂的图表组合展示。结合不同的尺寸模式，可以创建出适应各种设备和屏幕尺寸的可视化应用。掌握这些布局技巧，将显著提升数据可视化项目的专业性和用户体验。

bokeh bokeh/bokeh: 是一个用于创建交互式图形和数据的 Python 库。适合用于数据可视化、数据分析和呈现，以及创建动态的 Web 应用。特点是提供了一种简洁、直观的 API 来描述和处理数据，并生成交互式的可视化效果。 项目地址: https://gitcode.com/gh_mirrors/bo/bokeh