图像和栅格数据

您可以使用 image() 和 image_rgba() 图形方法在 Bokeh 图表上显示 2D 图像数组。您可以使用图像图形的悬停工具提示，让用户查看每个像素的值。有关如何为图像启用悬停工具提示的更多信息，请参阅 图像悬停。

原始 RGBA 数据

以下示例演示了如何使用 image_rgba() 方法使用原始 RGBA 数据显示图像。

import numpy as np

from bokeh.plotting import figure, show

N = 20
img = np.empty((N,N), dtype=np.uint32)
view = img.view(dtype=np.uint8).reshape((N, N, 4))
for i in range(N):
    for j in range(N):
        view[i, j, 0] = int(i/N*255)
        view[i, j, 1] = 158
        view[i, j, 2] = int(j/N*255)
        view[i, j, 3] = 255

p = figure(width=400, height=400)
p.x_range.range_padding = p.y_range.range_padding = 0

# must give a vector of images
p.image_rgba(image=[img], x=0, y=0, dw=10, dh=10)

show(p)

颜色映射图像

以下示例演示了如何提供一个 *标量值* 数组，并让 Bokeh 使用 image() 图形方法在浏览器中自动对数据进行颜色映射。

import numpy as np

from bokeh.plotting import figure, show

x = np.linspace(0, 10, 300)
y = np.linspace(0, 10, 300)
xx, yy = np.meshgrid(x, y)
d = np.sin(xx) * np.cos(yy)

p = figure(width=400, height=400)
p.x_range.range_padding = p.y_range.range_padding = 0

# must give a vector of image data for image parameter
p.image(image=[d], x=0, y=0, dw=10, dh=10, palette="Sunset11", level="image")
p.grid.grid_line_width = 0.5

show(p)

请注意，此示例将渲染级别设置为 "image"。通常，Bokeh 会在网格线 *上方* 绘制所有图形，但使用此渲染级别，它们会出现在网格线 *下方*。

原点和锚点

image() 和 image_rgba() 图形提供 origin 和 anchor 属性，用于控制图像的相对位置和方向。

绘制时，图像将覆盖大小为 dw 乘以 dh 的矩形绘制区域。

anchor 属性指定该矩形绘制区域相对于图形坐标 x 和 y 的位置。它可用于将图像从 x 和 y 垂直或水平移动。

origin 属性指定矩形绘制区域的哪个角对应于图像数组的 [0, 0] 像素。它可用于在绘制区域内垂直或水平翻转图像。

以下示例使您可以探索简单 2x2 图像的 anchor 和 origin 的所有不同组合。