将布局中的 Holoviews 图表元素移动到包含标题的 hv.Div 元素下方

Question

我有一个 hv.Div 元素，其中包含有关我正在处理的报告标题的文本。当我将 holoview 图表元素与 hv.Div 元素组合在一起时，我似乎无法将图表元素推到 hv.div 元素下方。有谁知道如何做到这一点？我已经使用 hv.Layout 和 .cols(n) 尝试了几种排列，但我似乎无法将图表推到标题下方。

下面的示例代码：

import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import matplotlib
import holoviews as hv
from holoviews import opts
import panel as pn
hv.extension('bokeh', 'matplotlib')
pd.options.plotting.backend = 'holoviews'

# create some sample data
df1 = pd.DataFrame({
'x': np.random.rand(10), 
'y': np.random.rand(10),
})

df2 = pd.DataFrame({
'x': np.random.rand(10) * 10, 
'y': np.random.rand(10) * 10,
})

# set axiswise=True so that every plot gets its own independent x- and y-axis    
plot1 = hv.Scatter(df1).opts(axiswise=True)
plot2 = hv.Scatter(df2).opts(axiswise=True)

#layout
Div = hv.Div('<div style=\"color:black;background-color:#88FF88;text-align:left;font-size:20px">Overall Title</div>')
my_plot = Div + plot1 + plot2
my_plot

谢谢！

Answer 1

由于您已经在导入面板，我建议为此只使用面板布局：

Div = pn.pane.HTML('<div style=\"color:black;background-color:#88FF88;text-align:left;font-size:20px">Overall Title</div>', height=20)
pn.Column(Div, plot1 + plot2)

将布局中的 Holoviews 图表元素移动到包含标题的 hv.Div 元素下方

Move Holoviews Charts elements in layout below hv.Div element containing title

python

html

pandas

holoviews

pyviz