在Flas中为Plotly/Dash对象添加两个Y轴

Question

除了使用烧瓶，如何创建一个带有两个y轴的绘图？在

下面的代码适当地生成了绘图，但我无法计算如何添加布局对象。在

如果使用Plotly是完全不可能的，那么使用Dash是否有一个简单的解决方案？我似乎找不到与链接的绘图示例等价的破折号示例。在

xScale = np.linspace(0, 1, len(acoustic_data))
xScale2 = np.linspace(0, 1, len(time_to_failure))
# Create traces
acoustic_data = go.Scatter(
    x=xScale,
    y=acoustic_data,
    name='acoustic data'
)
time_to_failure = go.Scatter(
    x=xScale2,
    y=time_to_failure,
    name='time to failure',
    # yaxis='y2'
)  
# How do I integrate the layout?
layout = go.Layout(
    title='Earthquick',
    yaxis=dict(
        title='acoustic data'
    ),
    yaxis2=dict(
        title='time to failure',
        overlaying='y',
        side='right'
    )
)
data = [acoustic_data, time_to_failure]
graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder)
return graphJSON

Answer 1

下面是一个示例，演示如何将示例绘图集成到Python Dash中。在

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.plotly as py
import plotly.graph_objs as go

trace1 = go.Scatter(
    x=[1, 2, 3],
    y=[40, 50, 60],
    name='yaxis data'
)
trace2 = go.Scatter(
    x=[2, 3, 4],
    y=[4, 5, 6],
    name='yaxis2 data',
    yaxis='y2'
)

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                trace1, trace2
            ],
            'layout': go.Layout(
                title='Double Y Axis Example',
                yaxis=dict(
                    title='yaxis title'
                ),
                yaxis2=dict(
                    title='yaxis2 title',
                    titlefont=dict(
                        color='rgb(148, 103, 189)'
                    ),
                    tickfont=dict(
                        color='rgb(148, 103, 189)'
                    ),
                    overlaying='y',
                    side='right'
                )
            )
        }
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

Answer 2

像这样的东西应该能让你达到目的。在

app = dash.Dash()

app.layout = html.Div(style={'backgroundColor': 'black'}, children=[
    dcc.Graph(id='my-graph', figure={}),
    html.Button('Update graph', id='my-button')
])


@app.callback(Output('my-graph', 'figure'),
              [Input('my-button', 'n_clicks')])
def update_graph_callback(button_click: int):
    xScale = np.linspace(0, 1, len(acoustic_data))
    xScale2 = np.linspace(0, 1, len(time_to_failure))
    # Create traces
    acoustic_data = go.Scatter(
        x=xScale,
        y=acoustic_data,
        name='acoustic data'
    )
    time_to_failure = go.Scatter(
        x=xScale2,
        y=time_to_failure,
        name='time to failure',
        # yaxis='y2'
    )
    # How do I integrate the layout?
    layout = go.Layout(
        title='Earthquick',
        yaxis=dict(
            title='acoustic data'
        ),
        yaxis2=dict(
            title='time to failure',
            overlaying='y',
            side='right'
        )
    )
    data = [acoustic_data, time_to_failure]

    return go.Figure(
        data=data,
        layout=layout)


if __name__ == '__main__':
    app.run_server(debug=True)

我用一些虚拟的数据在本地运行它，它工作了。如果你对此有任何困难，请告诉我。在