Bokeh如何给Step图添加图例

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)

- Admed

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)

这应该是结果：

- Automaton2000

---

我之前尝试按照你的方式做了，但是不知道如何向布局添加图例。感谢您提供的解决方案。 - Admed

我之前遇到过类似的问题。但正如@bigreddot所说，通常最好使用更高级别的API。 - Automaton2000

Answer 2

为了完整起见，值得一提的是，您链接的代码演示了非常底层的bokeh.models API。如果这正是您需要的，那就没问题。但是，如果您不知道，大多数用法可以更简单地使用更高级别的bokeh.plotting API：

import numpy as np
from bokeh.io import output_file, show
from bokeh.models import ColumnDataSource
from bokeh.plotting import figure

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

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

plot = figure(title=None, plot_width=300, plot_height=300, toolbar_location=None)

plot.step(x="x", y="y1", line_color="#f46d43", mode="before", 
          source=source, legend="step 1")
plot.step(x="x", y="y2", line_dash="dashed", line_color="#1d91d0", mode="center", 
          source=source, legend="step 2")
plot.step(x="x", y="y3", line_width=3, line_color="#cab2d6", mode="after", 
          source=source, legend="step 3")

output_file("plot.html")

show(plot)

这段代码生成的图像与上面的答案相同。

- bigreddot

---

谢谢。这正是我想要的。我只是找到了一个例子，但是低级API类（Plot或Step）中没有传说属性，所以我找不到解决方案。再次感谢。 - Admed

Answer 3

谢谢大家的帮助。但在最后一个例子中，框架会调用一个警告：

BokehDeprecationWarning: 'legend' keyword is deprecated, use explicit
'legend_label', 'legend_field', or 'legend_group' keywords instead

需要做一些小的更改：

...
plot.step(x="x", y="y1", line_color="#f46d43", mode="before", 
          source=source, legend_label="step 1")
...

为了完整起见，如果您想更改图例的位置，请使用以下示例：

plot.legend.location = 'top_left'

- Kirill Vladi