在 Plotly Python 中添加辅助轴

Question

我正在使用 Dash 图形对象，而且我对它还很陌生。我试图传入一个图表，该图表在同一个图形上有 2 个散点图和一个条形图，但我希望条形图（绿色）位于它自己的第二个 y 轴上，因此它看起来比这里更好：

现在，从我的理解对短跑，我要传递一个go.Figure()对象，所以我定义了一个函数data和layout。我在 plotly 文档中看到你可以使用 plotly express add secondary axis 但我不确定如何在我的框架工作中做到这一点。任何帮助将不胜感激！

这是我的代码：

def update_running_graph(n_intervals):
    df = pd.read_csv(filename)

    trace1 = go.Scatter(x=df['Timestamp'],
                        y=df['CLE'],
                        name='Crude',
                        mode='lines+markers')
    trace2 = go.Scatter(x=df['Timestamp'],
                        y=df['y_pred'],
                        name='Model',
                        mode='lines+markers')
    trace3 = go.Bar(x=df['Timestamp'],
                    y=df['ModelDiff'],
                    name='Diff',
                    )
    data = [trace1, trace2,trace3]
    layout = go.Layout(title='CLE vs Model')
    return go.Figure(data=data, layout=layout)

Answer 1

要在破折号中添加辅助 y 轴，您可以执行以下操作：

def update_running_graph(n_intervals):
    df = pd.read_csv(filename)

    trace1 = go.Scatter(x=df['Timestamp'],
                        y=df['CLE'],
                        name='Crude',
                        mode='lines+markers',
                        yaxis='y1')
    trace2 = go.Scatter(x=df['Timestamp'],
                        y=df['y_pred'],
                        name='Model',
                        mode='lines+markers',
                        yaxis='y1')
    trace3 = go.Bar(x=df['Timestamp'],
                    y=df['ModelDiff'],
                    name='Diff',
                    yaxis='y2'
                    )
    data = [trace1, trace2,trace3]
    layout = go.Layout(title='CLE vs Model',
                       yaxis=dict(title='Crude and Model'),
                       yaxis2=dict(title='Moddel Difference',
                                   overlaying='y',
                                   side='right'))
    return go.Figure(data=data, layout=layout)

您可以添加更多 y 轴，它们总是需要yi具有 i 轴的形式。然后在布局中，您可以使用 指定第 i 个轴的布局yaxisi=dict(...)。

Answer 2

这个文档页面应该有用。只需修改以适合您的代码，因为trace1和trace2看起来具有相同的比例，只需将trace3设置为辅助轴比例即可设置。下面的示例只有 2 个，但添加第三个应该不会太困难。

import plotly.graph_objects as go
from plotly.subplots import make_subplots

# Create figure with secondary y-axis
fig = make_subplots(specs=[[{"secondary_y": True}]])

# Add traces
fig.add_trace(
    go.Scatter(x=[1, 2, 3], y=[40, 50, 60], name="yaxis data"),
    secondary_y=False,
)

fig.add_trace(
    go.Scatter(x=[2, 3, 4], y=[4, 5, 6], name="yaxis2 data"),
    secondary_y=True,
)

# Add figure title
fig.update_layout(
    title_text="Double Y Axis Example"
)

# Set x-axis title
fig.update_xaxes(title_text="xaxis title")

# Set y-axes titles
fig.update_yaxes(title_text="<b>primary</b> yaxis title", secondary_y=False)
fig.update_yaxes(title_text="<b>secondary</b> yaxis title", secondary_y=True)

fig.show()

干杯!