Plotly：在 HTML 文件中并排显示树状图和热图

如何解决Plotly：在 HTML 文件中并排显示树状图和热图

我想在 HTML 文件中并排显示树状图和热图。目前，我可以一个接一个地展示它们。我尝试使用 subplot 但无法理解需要添加哪些跟踪。下面是我用来生成 HTML 输出的代码：

import plotly.graph_objects as go
import plotly.figure_factory as ff
import plotly
import numpy as np
from scipy.spatial.distance import pdist,squareform
import scipy.cluster.hierarchy as sch

# get data
data = np.genfromtxt("http://files.figshare.com/2133304/ExpRawData_E_TABM_84_A_AFFY_44.tab",names=True,usecols=tuple(range(1,30)),dtype=float,delimiter="\t")
data_array = data.view((np.float,len(data.dtype.names)))
data_array = data_array.transpose()
labels = data.dtype.names



fig1 = ff.create_dendrogram(data_array,linkagefun = lambda x: sch.linkage(x,"average"),labels=labels,orientation='bottom')
fig1.update_layout(title = 'Hierarchical Clustering',xaxis_title='Samples',title_font_color="Blue",width=900,height=800)

# Initialize figure by creating upper dendrogram
fig = ff.create_dendrogram(data_array,orientation='bottom',labels=labels)
for i in range(len(fig['data'])):
    fig['data'][i]['yaxis'] = 'y2'

# Create Side Dendrogram
dendro_side = ff.create_dendrogram(data_array,orientation='right')
for i in range(len(dendro_side['data'])):
    dendro_side['data'][i]['xaxis'] = 'x2'

# Add Side Dendrogram Data to Figure
for data in dendro_side['data']:
    fig.add_trace(data)

# Create Heatmap
dendro_leaves = dendro_side['layout']['yaxis']['ticktext']
dendro_leaves = list(map(int,dendro_leaves))
data_dist = pdist(data_array)
heat_data = squareform(data_dist)
heat_data = heat_data[dendro_leaves,:]
heat_data = heat_data[:,dendro_leaves]

heatmap = [
    go.Heatmap(
        x = dendro_leaves,y = dendro_leaves,z = heat_data,colorscale = 'Blues'
    )
]

heatmap[0]['x'] = fig['layout']['xaxis']['tickvals']
heatmap[0]['y'] = dendro_side['layout']['yaxis']['tickvals']

# Add Heatmap Data to Figure
for data in heatmap:
    fig.add_trace(data)

# Edit Layout
fig.update_layout({'width':800,'height':800,'showlegend':False,'hovermode': 'closest',})
# Edit xaxis
fig.update_layout(xaxis={'domain': [.15,1],'mirror': False,'showgrid': False,'showline': False,'zeroline': False,'ticks':""})
# Edit xaxis2
fig.update_layout(xaxis2={'domain': [0,.15],'showticklabels': False,'ticks':""})

# Edit yaxis
fig.update_layout(yaxis={'domain': [0,.85],'ticks': ""
                        })
# Edit yaxis2
fig.update_layout(yaxis2={'domain':[.825,.975],'ticks':""})

# Plot!
with open('p_graph.html','a') as f:
    f.write(fig1.to_html(full_html=True,include_plotlyjs='cdn'))
    f.write(fig.to_html(full_html=True,include_plotlyjs='cdn'))

我想在输出 html 文件中并排显示 fig 和 fig1。

解决方法

由于您已经有一个适用于您的绘图的工作解决方案，我认为最快和最灵活的方法是编辑 HTML 而不是创建新的子图。如果他们感兴趣，我会将它留给其他人来解决 make_subplots 解决方案。

以下是相关的 HTML 片段。请注意，为了满足 Stack Overflow 的帖子长度限制，我必须编辑掉大部分情节输出。如果您想要完整的、可复制粘贴的版本，请参阅 here。要查看在浏览器中呈现的输出效果，请参阅 here。

您的 HTML 输出文件如下所示：

<html>
<head><meta charset="utf-8" /></head>
<body>
    <div>                        <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
</body>
</html><html>
<head><meta charset="utf-8" /></head>
<body>
    <div>                        <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>     
</body>
</html>

如果你

删除文件中间多余的 <html>、<body> 和 <head> 标签，
用一个额外的 <div> 包裹两个包含绘图的 <div style="width: 100%;"> ... </div>，最后
将 style 属性添加到包含图的 <div> 以适当地定位它们，

编辑后的 HTML 看起来像这样（同样不可复制粘贴——见上文）：

<html>
<head><meta charset="utf-8" /></head>
<body>
    <div style="width: 100%;">
        <div style="width: 50%; float: left">                        <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
            <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>                <div id="fe871eb9-b516-4575-8ce0-6116d52c7229" class="plotly-graph-div" style="height:800px; width:900px;"></div>     
        <div style="margin-left: 50%">                        <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
            <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>                <div id="a148bd6e-da2a-4260-b1a5-94f96e8de9f3" class="plotly-graph-div" style="height:800px; width:800px;"></div> 
    </div>
</body>
</html>

请注意，有多种方法可以使用 style 属性在页面上定位图——这只是一个简单的示例，使用 style="width: 50%; float: left" 表示左侧图，style="margin-left: 50%" 表示右侧图情节。

Plotly：在 HTML 文件中并排显示树状图和热图

如何解决Plotly：在 HTML 文件中并排显示树状图和热图

解决方法

相关推荐