填充散景中阶梯图下的区域

Question

我有一个简单的步骤图，我想填充图表下方的区域，但我缺少一些东西，因为它没有正确显示。这是我的工作代码：

import numpy as np
from bokeh.plotting import figure, show
from bokeh.models import ColumnDataSource, NumeralTickFormatter, DaysTicker, DatetimeTickFormatter, HoverTool, Patch
from math import pi

from datetime import datetime

datetimes = [datetime(2022, 9, 30, 3, 8, 8, 239000, ),
             datetime(2022, 10, 1, 3, 8, 8, 239000, ),
             datetime(2022, 10, 20, 3, 8, 8, 239000,)]
             
values = np.random.random(3)

fig = figure(x_axis_type="datetime", toolbar_location=None, y_range=(0, 1), y_axis_location='right', height=250, width=635)
fig.yaxis[0].formatter = NumeralTickFormatter(format='0%')
fig.xaxis.major_label_orientation = pi/4
fig.xaxis.formatter=DatetimeTickFormatter(
        hours=["%d %B %Y"],
        days=["%d %B %Y"],
        months=["%d %B %Y"],
        years=["%d %B %Y"],
    )
hover = HoverTool(tooltips=[('values', '@values{0.0%}')])
fig.toolbar.active_drag = None
plot_source = ColumnDataSource(data=dict(date=datetimes, values=values))
line_plot = fig.step("date", "values", source=plot_source, line_width=1, color="#285e61")
fig.add_tools(hover)
fig.varea(source=plot_source, x="date", y1=0, y2="values",
          alpha=0.2, fill_color='#38b2ac')

show(fig)

这是结果图：

Answer 1

诀窍是为该区域的每个时间戳设置两次，一个值用于步骤的左侧，一个值用于右侧。

最小示例

import numpy as np
from datetime import datetime


from bokeh.plotting import figure, show, output_notebook
from bokeh.models import ColumnDataSource, NumeralTickFormatter, DaysTicker, DatetimeTickFormatter, HoverTool, Patch
output_notebook()

datetimes = np.array([
    datetime(2022, 9, 30, 3, 8, 8, 239000, ),
    datetime(2022, 10, 1, 3, 8, 8, 239000, ),
    datetime(2022, 10, 20, 3, 8, 8, 239000,)
])

values = np.random.random(3)

fig = figure(
    x_axis_type="datetime",
    toolbar_location=None,
    y_range=(0, 1),
    y_axis_location='right',
    height=250,
    width=635
)
fig.yaxis.formatter = NumeralTickFormatter(format='0%')
fig.xaxis.major_label_orientation = np.pi/4
fig.xaxis.formatter=DatetimeTickFormatter(days="%d %B %Y")
hover = HoverTool(tooltips=[('values', '@values{0.0%}')])
fig.toolbar.active_drag = None

# main change here
plot_source = ColumnDataSource(data=dict(
    date=datetimes.repeat(2)[1:],
    values=values.repeat(2)[:-1]
))

line_plot = fig.step("date", "values", source=plot_source, line_width=1, color="#285e61")
fig.add_tools(hover)
fig.varea(source=plot_source, x="date", y1=0, y2="values",
          alpha=0.2, fill_color='#38b2ac')

show(fig)

输出

评论

我使用

np.reapeat()

重复

np.array

中的所有值。

Answer 2

这是在 Bokeh v3.2 中实现的，请参阅 figure.varea_step() 和示例：

from bokeh.plotting import figure, show

p = figure(width=400, height=400)

glyphs = p.varea_step(
    x=[1, 2, 3, 4, 5],
    y1=[12, 16, 14, 13, 15],
    y2=[1, 4, 2, 1, 3],
    step_mode='after')

show(p)