如何在 plotly Dash 中并排绘制数字？

Question

下面的link 提供了代码以将图表与 html 组件并排绘制。但是，我正在寻找类似 matplotlib 的 plt.subplot 的功能。下图取自 matplotlib 的 official documentation 是所需输出的示例。

Answer 1

解决方案

在plotly中使用inset plots可以并排设置两个绘图，在Layout组件中指定domain参数，即

import plotly.graph_objs as go

go.Layout(xaxis = dict(domain = [0.0, 0.45]),
          xaxis2 = dict(domain = [0.55, 1.0]),
         )

您可以在其中调整图形 x 轴的位置，在 0 和 1 之间切换值。有关完整示例，请参阅下面的部分。

示例

作为一个示例，将 散点图 与 条形图 并排绘制，

# Set plotly in offline mode
import plotly.graph_objs as go
import pandas as pd
offline.init_notebook_mode(connected=True)

# Simple Scatter plot
trace0 = go.Scatter(x = [10, 20, 30],
                    y = [40, 30, 20]
)

# Simple Bar chart
trace1 = go.Bar(x=['cat_1', 'cat_2', 'cat_3', 'cat_4'],
                y=[5, 27, 31, 48],

                xaxis='x2',
                yaxis='y2'
               )

# Data component 
data = [trace0, trace1]

# Layout component
layout = go.Layout(xaxis = dict(domain = [0.0, 0.45]),
                   xaxis2 = dict(domain = [0.55, 1.0]),
                   yaxis2 = dict(overlaying='y',
                                 anchor = 'free',
                                 position = 0.55
                                )

                  )

# Figure component
fig = go.Figure(data=data, layout=layout)

offline.iplot(fig)

输出以下图像。