python - Bokeh 将图例添加到步骤图

Question

如何在 Bokeh 的阶梯图示例中为线条添加图例:

https://docs.bokeh.org/en/latest/docs/reference/models/glyphs/step.html

我想在绘图的“右上角”为每条线的颜色和样式添加图例。

示例的默认代码为:

import numpy as np


from bokeh.models import ColumnDataSource, DataRange1d, Plot, LinearAxis, Grid

from bokeh.models.glyphs import Step

from bokeh.io import curdoc, show


N = 11

x = np.linspace(-2, 2, N)
y = x**2

source = ColumnDataSource(dict(x=x, y1=y, y2=y+2, y3=y+4))

xdr = DataRange1d()
ydr = DataRange1d()

plot = Plot(
    title=None, x_range=xdr, y_range=ydr, plot_width=300, plot_height=300,
    h_symmetry=False, v_symmetry=False, min_border=0,toolbar_location=None)

glyph1 = Step(x="x", y="y1", line_color="#f46d43", mode="before")
plot.add_glyph(source, glyph1)

glyph2 = Step(x="x", y="y2", line_dash="dashed", line_color="#1d91d0", mode="center")
plot.add_glyph(source, glyph2)

glyph3 = Step(x="x", y="y3", line_width=3, line_color="#cab2d6", mode="after")
plot.add_glyph(source, glyph3)

xaxis = LinearAxis()
plot.add_layout(xaxis, 'below')

yaxis = LinearAxis()
plot.add_layout(yaxis, 'left')

plot.add_layout(Grid(dimension=0, ticker=xaxis.ticker))
plot.add_layout(Grid(dimension=1, ticker=yaxis.ticker))

curdoc().add_root(plot)

show(plot)

Answer 1

您可以手动为每个字形添加图例条目，方法是在绘图中选择相应的渲染器，然后将其连接到 LegendItem。这是使用您的示例的完整代码:

import numpy as np
from bokeh.models import ColumnDataSource, DataRange1d, Plot, LinearAxis, Grid, Legend, LegendItem
from bokeh.models.glyphs import Step
from bokeh.io import curdoc, show

N = 11

x = np.linspace(-2, 2, N)
y = x**2

source = ColumnDataSource(dict(x=x, y1=y, y2=y+2, y3=y+4))

xdr = DataRange1d()
ydr = DataRange1d()

p1 = Plot(
    title=None, x_range=xdr, y_range=ydr, plot_width=300, plot_height=300,
    h_symmetry=False, v_symmetry=False, min_border=0, toolbar_location=None)

glyph1 = Step(x="x", y="y1", line_color="#f46d43", mode="before")
p1.add_glyph(source, glyph1)

glyph2 = Step(x="x", y="y2", line_dash="dashed", line_color="#1d91d0", mode="center")
p1.add_glyph(source, glyph2)

glyph3 = Step(x="x", y="y3", line_width=3, line_color="#cab2d6", mode="after")
p1.add_glyph(source, glyph3)

xaxis = LinearAxis()
p1.add_layout(xaxis, 'below')

yaxis = LinearAxis()
p1.add_layout(yaxis, 'left')

p1.add_layout(Grid(dimension=0, ticker=xaxis.ticker))
p1.add_layout(Grid(dimension=1, ticker=yaxis.ticker))


li1 = LegendItem(label='red', renderers=[p1.renderers[0]])
li2 = LegendItem(label='blue', renderers=[p1.renderers[1]])
li3 = LegendItem(label='purple', renderers=[p1.renderers[2]])
legend1 = Legend(items=[li1, li2, li3], location='top_right')
p1.add_layout(legend1)

curdoc().add_root(p1)
show(p1)

这应该是结果: