第一步 4: 自定义你的图表

在之前的第一步指南中，你生成了不同的图形并添加了更多信息，如标题、图例和注释。

在本节中，您将自定义整个图表的外观。这包括调整大小您的图表，更改其线条和颜色，以及自定义轴和工具。

使用主题

使用Bokeh的主题，您可以快速更改图表的外观。主题是一组预定义的设计参数，如颜色、字体或线条样式。

Bokeh 提供了五种内置主题：caliber、 dark_minimal、light_minimal、night_sky 和 contrast。 此外，您还可以定义自己的自定义主题。

要使用内置主题之一，请将您想要使用的主题名称分配给文档的theme属性：

from bokeh.io import curdoc
from bokeh.plotting import figure, show

# prepare some data
x = [1, 2, 3, 4, 5]
y = [4, 5, 5, 7, 2]

# apply theme to current document
curdoc().theme = "dark_minimal"

# create a plot
p = figure(sizing_mode="stretch_width", max_width=500, height=250)

# add a renderer
p.line(x, y)

# show the results
show(p)

您还可以创建自己的主题以在多个图表中使用。Bokeh的主题可以是YAML或JSON格式。要了解更多关于创建和使用自定义主题的信息，请参阅用户指南中的创建自定义主题。

另请参阅

有关在Bokeh中使用主题的更多信息，请参阅用户指南中的 使用主题 和参考指南中的 bokeh.themes。

调整你的图表大小

Bokeh的Plot对象具有各种属性，这些属性会影响你的图表的外观。

设置宽度和高度

要设置图表的大小，请在调用figure()函数时使用属性width和height：

from bokeh.plotting import figure, show

# prepare some data
x = [1, 2, 3, 4, 5]
y = [4, 5, 5, 7, 2]

# create a new plot with a specific size
p = figure(
    title="Plot sizing example",
    width=350,
    height=250,
    x_axis_label="x",
    y_axis_label="y",
)

# add scatter renderer
p.scatter(x, y, fill_color="red", size=15)

# show the results
show(p)

类似于更改现有字形设计，您可以在创建后随时更改绘图的属性：

from bokeh.plotting import figure, show

# prepare some data
x = [1, 2, 3, 4, 5]
y = [4, 5, 5, 7, 2]

# create a new plot with a specific size
p = figure(
    title="Plot resizing example",
    width=350,
    height=250,
    x_axis_label="x",
    y_axis_label="y",
)

# change plot size
p.width = 450
p.height = 150

# add scatter renderer
p.scatter(x, y, fill_color="red", size=15)

# show the results
show(p)

启用响应式绘图尺寸

为了使你的图表自动适应浏览器或屏幕大小，请使用属性 sizing_mode：

from bokeh.plotting import figure, show

# prepare some data
x = [1, 2, 3, 4, 5]
y = [4, 5, 5, 7, 2]

# create a new plot with responsive width
p = figure(
    title="Plot responsive sizing example",
    sizing_mode="stretch_width",
    height=250,
    x_axis_label="x",
    y_axis_label="y",
)

# add scatter renderer
p.scatter(x, y, fill_color="red", size=15)

# show the results
show(p)

另请参阅

要了解更多关于如何控制图表大小的信息，请参阅用户指南中的 样式化图表以及参考指南中的 Plot条目。

有关响应式尺寸的更多信息，请参阅用户指南中的 尺寸模式 和参考指南中的 sizing_mode。

自定义轴

您可以设置各种属性来改变图表中坐标轴的工作方式和外观。

设置坐标轴的外观

自定义图表外观的选项包括：

• 为您的轴设置标签

• 为与坐标轴一起显示的数字设置样式

• 定义轴本身的颜色和其他布局属性

例如：

from bokeh.plotting import figure, show

# prepare some data
x = [1, 2, 3, 4, 5]
y = [4, 5, 5, 7, 2]

# create a plot
p = figure(
    title="Customized axes example",
    sizing_mode="stretch_width",
    max_width=500,
    height=350,
)

# add a renderer
p.scatter(x, y, size=10)

# change some things about the x-axis
p.xaxis.axis_label = "Temp"
p.xaxis.axis_line_width = 3
p.xaxis.axis_line_color = "red"

# change some things about the y-axis
p.yaxis.axis_label = "Pressure"
p.yaxis.major_label_text_color = "orange"
p.yaxis.major_label_orientation = "vertical"

# change things on all axes
p.axis.minor_tick_in = -3
p.axis.minor_tick_out = 6

# show the results
show(p)

定义轴范围

在绘制图表的坐标轴时，Bokeh会自动确定每个轴需要覆盖的范围，以便显示所有值。例如，如果y轴上的值在2到17之间，Bokeh会自动创建一个从略低于2到略高于17的y轴。

要手动定义轴的范围，请使用 y_range() 函数或 y_range() 属性，当您调用 Plot 对象的 figure() 函数时：

from bokeh.plotting import figure, show

# prepare some data
x = [1, 2, 3, 4, 5]
y = [4, 5, 5, 7, 2]

# create a new plot with responsive width
p = figure(
    y_range=(0, 25),
    title="Axis range example",
    sizing_mode="stretch_width",
    max_width=500,
    height=250,
)

# add scatter renderer with additional arguments
p.scatter(x, y, size=8)

# show the results
show(p)

格式化坐标轴刻度

你可以使用Bokeh的TickFormatter对象来格式化出现在坐标轴旁边的文本。例如，使用这些格式化程序在你的y轴上显示货币符号：

要在y轴上显示美元金额而不仅仅是数字，请使用 NumeralTickFormatter:

首先，从bokeh.models导入NumeralTickFormatter：

from bokeh.models import NumeralTickFormatter

然后，在使用figure()函数创建图表后，将NumeralTickFormatter分配给图表yaxis的formatter属性：

p.yaxis[0].formatter = NumeralTickFormatter(format="$0.00")

NumeralTickFormatter 支持不同的格式，包括 "$0.00" 以生成诸如 "$7.42" 的值。

这是完成后的代码的样子：

from bokeh.models import NumeralTickFormatter
from bokeh.plotting import figure, show

# prepare some data
x = [1, 2, 3, 4, 5]
y = [4, 5, 5, 7, 2]

# create new plot
p = figure(
    title="Tick formatter example",
    sizing_mode="stretch_width",
    max_width=500,
    height=250,
)

# format axes ticks
p.yaxis[0].formatter = NumeralTickFormatter(format="$0.00")

# add renderers
p.scatter(x, y, size=8)
p.line(x, y, color="navy", line_width=1)

# show the results
show(p)

另请参阅

有关格式化刻度的更多信息，请参阅用户指南中的 刻度标签格式。有关所有可用刻度格式化程序的列表，请参阅参考指南中的 formatters。

启用对数轴

你也可以完全改变轴的类型。使用 y_axis_type="log" 来切换到对数轴：

from bokeh.plotting import figure, show

# prepare some data
x = [0.1, 0.5, 1.0, 1.5, 2.0, 2.5, 3.0]
y0 = [i**2 for i in x]
y1 = [10**i for i in x]
y2 = [10**(i**2) for i in x]

# create a new plot with a logarithmic axis type
p = figure(
    title="Logarithmic axis example",
    sizing_mode="stretch_width",
    height=300,
    max_width=500,
    y_axis_type="log",
    y_range=[0.001, 10 ** 11],
    x_axis_label="sections",
    y_axis_label="particles",
)

# add some renderers
p.line(x, x, legend_label="y=x")
p.scatter(x, x, legend_label="y=x", fill_color="white", size=8)
p.line(x, y0, legend_label="y=x^2", line_width=3)
p.line(x, y1, legend_label="y=10^x", line_color="red")
p.scatter(x, y1, legend_label="y=10^x", fill_color="red", line_color="red", size=6)
p.line(x, y2, legend_label="y=10^x^2", line_color="orange", line_dash="4 4")

# show the results
show(p)

启用日期时间轴

将 x_axis_type 或 y_axis_type 设置为 datetime 以在轴上显示日期或时间信息。然后 Bokeh 会创建一个 DatetimeAxis。

要格式化DatetimeAxis的刻度，请使用 DatetimeTickFormatter。

import random
from datetime import datetime, timedelta

from bokeh.models import DatetimeTickFormatter, NumeralTickFormatter
from bokeh.plotting import figure, show

# generate list of dates (today's date in subsequent weeks)
dates = [(datetime.now() + timedelta(day * 7)) for day in range(0, 26)]

# generate 25 random data points
y = random.sample(range(0, 100), 26)

# create new plot
p = figure(
    title="datetime axis example",
    x_axis_type="datetime",
    sizing_mode="stretch_width",
    max_width=500,
    height=250,
)

# add renderers
p.scatter(dates, y, size=8)
p.line(dates, y, color="navy", line_width=1)

# format axes ticks
p.yaxis[0].formatter = NumeralTickFormatter(format="$0.00")
p.xaxis[0].formatter = DatetimeTickFormatter(months="%b %Y")

# show the results
show(p)

另请参阅

请参阅用户指南中的样式化坐标轴以获取更多关于自定义坐标轴的信息。参考指南中的Axis条目包含了一个所有可用属性的列表，您可以使用这些属性来自定义您的图表坐标轴。

自定义网格

要更改网格的外观，请设置您的Plot对象的xgrid()、ygrid()和grid()方法的各种属性。

线条样式

通过设置各种grid_line属性来更改网格的水平和垂直线的外观：

from bokeh.plotting import figure, show

# prepare some data
x = [1, 2, 3, 4, 5]
y = [4, 5, 5, 7, 2]

# create a plot
p = figure(
    title="Customized grid lines example",
    sizing_mode="stretch_width",
    max_width=500,
    height=250,
)

# add a renderer
p.line(x, y, line_color="green", line_width=2)

# change things only on the x-grid
p.xgrid.grid_line_color = "red"

# change things only on the y-grid
p.ygrid.grid_line_alpha = 0.8
p.ygrid.grid_line_dash = [6, 4]

# show the results
show(p)

另请参阅

有关线条和次要线条的更多信息，请参阅用户指南中的 Lines。

使用波段和界限

另一种使您的图表更易于阅读的方法是使用带状和边界。

波段和边界是你在使用注释中学到的注释的更多示例。

from bokeh.plotting import figure, show

# prepare some data
x = [1, 2, 3, 4, 5]
y = [4, 5, 5, 7, 2]

# create a plot
p = figure(
    title="Bands and bonds example",
    sizing_mode="stretch_width",
    max_width=500,
    height=250,
)

# add a renderer
p.line(x, y, line_color="green", line_width=2)

# add bands to the y-grid
p.ygrid.band_fill_color = "olive"
p.ygrid.band_fill_alpha = 0.1

# define vertical bonds
p.xgrid.bounds = (2, 4)

# show the results
show(p)

另请参阅

有关样式带和边界的更多信息，请参阅用户指南中的 Bands 和 Bounds。

设置背景颜色

你有几种选项可以在Bokeh中定义颜色。例如：

• 使用其中一个命名的CSS颜色（例如，"firebrick"）

• 使用十六进制值，前面加上#（例如"#00ff00"）

• 使用3元组表示RGB颜色（例如，(100, 100, 255)

• 使用4元组表示RGBA颜色（例如 (100, 100, 255, 0.5)）

要更改Bokeh绘制绘图元素的平面的外观，请使用您的Plot对象的各种fill_color属性：

from bokeh.plotting import figure, show

# prepare some data
x = [1, 2, 3, 4, 5]
y = [4, 5, 5, 7, 2]

# create a plot
p = figure(
    title="Background colors example",
    sizing_mode="stretch_width",
    max_width=500,
    height=250,
)

# add a renderer
p.line(x, y, line_color="green", line_width=2)

# change the fill colors
p.background_fill_color = (204, 255, 255)
p.border_fill_color = (102, 204, 255)
p.outline_line_color = (0, 0, 255)

# show the results
show(p)

另请参阅

有关Bokeh中颜色的更多信息，请参阅参考指南中的Color条目。

自定义工具栏

Bokeh 配备了一个强大的工具栏来探索图表。你在你的第一个可视化中看到了这些工具，作为第一步指南 1的一部分。

定位工具栏

要定义工具栏的位置，请使用 toolbar_location 属性，并选择以下值之一：above, below, left, right

在创建图表时，传递一个值给 toolbar_location：

p = figure(title="Toolbar positioning example", toolbar_location="below")

另一个选项是在创建图表后随时更改属性 toolbar_location：

p.toolbar_location = "below"

停用和隐藏工具栏

要完全停用工具栏，请将 toolbar_location 设置为 None。

p.toolbar_location = None

要使您的工具栏自动隐藏，请将 autohide 设置为 True：

from bokeh.plotting import figure, show

# prepare some data
x = [1, 2, 3, 4, 5]
y = [4, 5, 5, 7, 2]

# create a plot
p = figure(
    title="Toolbar autohide example",
    sizing_mode="stretch_width",
    max_width=500,
    height=250,
)

# activate toolbar autohide
p.toolbar.autohide = True

# add a renderer
p.line(x, y)

# show the results
show(p)

当autohide设置为True时，Bokeh将隐藏工具栏，除非鼠标位于绘图区域内或点击绘图区域内部：

同样地，使用Toolbar的logo属性来停用Bokeh徽标：

p.toolbar.logo = None

自定义可用工具

您可以自定义Bokeh 在工具栏中显示的工具。有关所有可用工具的详细列表，请参阅用户指南中的 绘图工具。

要自定义使用哪些工具，首先需要导入相关工具。 例如：

from bokeh.models.tools import BoxZoomTool, ResetTool

接下来，通过将tools属性传递给figure()函数，定义在创建新图表时使用哪些工具。

tools 属性接受一个工具列表。此示例仅启用 BoxZoomTool 和 ResetTool：

p = figure(tools = [BoxZoomTool(), ResetTool()])

这样，工具栏中将只提供框选缩放工具和重置工具：

在创建图表后随时更改可用工具，使用add_tools()和remove_tools()函数。

所有工具还提供各种属性来定义它们的使用方式。例如，使用 PanTool，你可以将移动限制为仅水平或垂直平移。默认行为是允许在两个方向上进行平移。

from bokeh.models import BoxZoomTool, PanTool, ResetTool
from bokeh.plotting import figure, show

# prepare some data
x = [1, 2, 3, 4, 5]
y = [4, 5, 5, 7, 2]

# create a plot
p = figure(
    title="Modifying tools example",
    tools=[BoxZoomTool(), ResetTool()],
    sizing_mode="stretch_width",
    max_width=500,
    height=250,
)

# add an additional pan tool
# only vertical panning is allowed
p.add_tools(PanTool(dimensions="width"))

# add a renderer
p.scatter(x, y, size=10)

# show the results
show(p)

在这个例子中，你首先在创建函数时包含了框缩放工具和重置工具。接着，你添加了一个平移缩放工具。这使得所有三个工具都可用：

另请参阅

要了解更多关于工具和工具栏的信息，请参阅绘图工具。有关所有工具及其各自属性的详细信息，请参阅参考指南中的tools和Toolbar。

添加工具提示

工具提示是当您将鼠标悬停在数据点上或点击数据点时出现的小窗口：

工具提示基于HoverTool。悬停工具是Bokeh工具栏的一部分。

在Bokeh中有几种方法可以启用工具提示。这是最快的一种：

1. 从bokeh.models.tools导入HoverTool类。

2. 在调用figure()函数时，将HoverTool()包含在传递给tools参数的列表中。

3. 在调用figure()函数时，包含tooltips参数。

tooltips 参数接受一个具有特殊语法的字符串。使用“@”符号来包含您希望 Bokeh 显示的数据源的名称。此示例包括 @x 和 @y。当浏览器显示工具提示时，Bokeh 会用列表 x 和 y 中的实际数据替换这两个字段。

这是代码的样子：

from bokeh.models import HoverTool
from bokeh.plotting import figure, show

# prepare some data
x = [1, 2, 3, 4, 5]
y = [4, 5, 5, 7, 2]

p = figure(
    y_range=(0, 10),
    toolbar_location=None,
    tools=[HoverTool()],
    tooltips="Data point @x has the value @y",
    sizing_mode="stretch_width",
    max_width=500,
    height=250,
)

# add renderers
p.scatter(x, y, size=10)
p.line(x, y, line_width=2)

# show the results
show(p)

另请参阅

用户指南包含了更多关于使用悬停工具创建工具提示的信息。详情请参阅基本工具提示。 更多信息也可以在参考指南中的HoverTool条目中找到。