散景图：覆盖一个图和一个Div，以使用散景获得梯度背景

Question

最初的目标

我在Bokeh中有一个烛台情节，本质上是，但使用我的自定义数据。

我想要的只是该情节背后的灰色渐变背景。

我尝试的

bokeh没有 Backick_gradient_fill 选项，因此我尝试使用 image> image_url 我在网上找到了一个渐变，这是不起作用的，因为Firefox不允许第三聚会图像加载。无论如何，此选项很糟糕，因为它很慢，并且依赖于Google附近的一些URL。

我尝试制作自己的渐变numpy数组，然后添加它们为 > Image 这是不起作用的，因为图像坐标基本上是在我的情节上硬编码的，但是我的烛台是动态的，并且正在实时加载。

我终于以为我会做一个渐变 div 使用CSS ，将烛台图填充到透明，然后彼此叠加。我尝试使用 GridPlot ，列， row ，这都不能真正允许您从我的内容中控制其中元素的偏移看到。所以现在我真的不知道该怎么办...

如何将两者挤在一起？

我现在拥有的：

我的代码当前会产生以下方式：

我只是希望这两个基本上都在彼此之上。我该怎么办？

---

最小可复制示例：

为此的MRE与 ，但增加了Div。要运行，只需将此代码放在python文件中，然后运行 bokeh sampledata 要下载示例数据，然后 bokeh serve -show yourfilename.py

import pandas as pd
from bokeh.layouts import gridplot
from bokeh.models import Div
from bokeh.plotting import curdoc
from bokeh.plotting import figure
from bokeh.sampledata.stocks import MSFT
from math import pi

df = pd.DataFrame(MSFT)[:50]
df["date"] = pd.to_datetime(df["date"])

inc = df.close > df.open
dec = df.open > df.close
w = 12 * 60 * 60 * 1000  # half day in ms

TOOLS = "pan,wheel_zoom,box_zoom,reset,save"

p = figure(x_axis_type="datetime", tools=TOOLS, width=1000, title="MSFT Candlestick")
p.xaxis.major_label_orientation = pi / 4
p.grid.grid_line_alpha = 0.3

div = Div(style={"background": "linear-gradient(rgb(40,40,40), rgb(10,10,10))",
                 "height": "1000px", "width": "1000px"}, sizing_mode="scale_both")

p.segment(df.date, df.high, df.date, df.low, color="black")
p.vbar(df.date[inc], w, df.open[inc], df.close[inc], fill_color="#D5E1DD", line_color="black")
p.vbar(df.date[dec], w, df.open[dec], df.close[dec], fill_color="#F2583E", line_color="black")

curdoc().add_root(gridplot([[p, div]], toolbar_location="left"))

Answer 1

如果您想要梯度背景，则可以手动构建它。您可以根据X和Y轴的值生成图像，而不是将这些值映射到线性颜色图。

from math import pi
import matplotlib.dates as mdates

import pandas as pd
import numpy as np

from bokeh.plotting import figure, show
from bokeh.models import LinearColorMapper
from bokeh.sampledata.stocks import MSFT

df = pd.DataFrame(MSFT)[:50]
df["date"] = pd.to_datetime(df["date"])

min_price = min(df.close.min(), df.open.min())
max_price = max(df.close.max(), df.open.max())

inc = df.close > df.open
dec = df.open > df.close
w = 12*60*60*1000 # half day in ms

TOOLS = "pan,wheel_zoom,box_zoom,reset,save"

p = figure(x_axis_type="datetime", tools=TOOLS, width=1000, title = "MSFT Candlestick", 
           x_range=[df.date.min(), df.date.max()], y_range=[min_price-10, max_price+10])
p.xaxis.major_label_orientation = pi/4
p.grid.grid_line_alpha=0.3

# Gradient background
x = np.linspace(1, 0, 256)
y = np.linspace(0, 1, 256)

xArray, yArray = np.meshgrid(x, y)
plotArray = np.sqrt(xArray + yArray)

color_mapper = LinearColorMapper(palette="Greys256", low=0, high=1)

p.image(image=[plotArray], color_mapper=color_mapper, dw_units='screen', dw=1000, dh=max_price-min_price+20, x=[df.date.min()], 
        y=[min_price-10])

p.segment(df.date, df.high, df.date, df.low, color="black")
p.vbar(df.date[inc], w, df.open[inc], df.close[inc], fill_color="#D5E1DD", line_color="black")
p.vbar(df.date[dec], w, df.open[dec], df.close[dec], fill_color="#F2583E", line_color="black")

show(p)

上面的代码给出以下结果：