散景将图例添加到步骤图 [英] bokeh add legend to Step graph

问题描述

如何在散景"的步骤图"示例中为行添加图例:

How can I add a legend to lines in Step graph example for bokeh:

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

我想在图的右上角"显示每条线的颜色和样式的图例.

I would like to have legend in 'top right' corner of plot for each line in color and style of the line.

该示例的默认代码为:

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)

推荐答案

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

You can add a legend entry for each glyph manually by selecting the corresponding renderer in your plot and then connecting it to a LegendItem. Here's the full code using your example:

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)

这应该是结果:

这篇关于散景将图例添加到步骤图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！