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

Python 将Holoviews图表元素移动到包含标题的hv.Div元素下方的布局中,python,html,pandas,holoviews,pyviz,Python,Html,Pandas,Holoviews,Pyviz,我有一个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 hol

我有一个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
将熊猫作为pd导入
将numpy作为np导入
将matplotlib.pyplot作为plt导入
导入matplotlib
将全息视图导入为hv
从全息视图导入选项
作为pn导入面板
hv.extension('bokeh','matplotlib')
pd.options.plotting.backend='holoviews'
#创建一些示例数据
df1=pd.DataFrame({
“x”:np.random.rand(10),
“y”:np.random.rand(10),
})
df2=pd.DataFrame({
“x”:np.rand.rand(10)*10,
“y”:np.random.rand(10)*10,
})
#设置axiswise=True,以便每个绘图都有自己独立的x轴和y轴
plot1=hv.Scatter(df1.opts)(轴向=真)
plot2=hv.Scatter(df2.opts)(轴向=真)
#布局
Div=hv.Div(“总标题”)
my_plot=Div+plot1+plot2
我的阴谋

谢谢大家!

由于您已经在导入面板,我建议您仅使用面板布局:

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)
Div=pn.pane.HTML('totaltitle',height=20)
pn.柱(分区,1号图+2号图)

你好,Phillip,感谢您提供的解决方案非常有效!我想知道如果我不想使用面板,我能用hv资源实现同样的效果吗?使用panel.save时,将我的应用程序导出为静态html有点困难!如果你只想要一个简单的标题,你也可以像这样将它添加到绘图中:(plot1+plot2).opts(title='totaltitle',fontsize={'title':35})不完全是这样,我对这两个绘图都有单独的标题,但只想要一个完整的,比如“市场概览”。我使用了Phillip建议的方法,但当应用到我的图表时,我最终再次链接了所有Y轴比例,尽管我在所有图表中都声明了“axiswise=True”。当我不使用面板解决方案时,axis-wise语句可以正常工作=(@Amen_90该问题将在panel 0.8中解决,但现在您可以执行
pn.Column(Div,pn.panel(plot1+plot2,linked_axes=False))
。工作完美!@philippjfrand@Sander范登奥尔德,谢谢你们,非常感谢!=)