在 Flask 中为绘图/虚线对象添加两个 Y 轴

Question

除了使用 Flask 之外，如何像 Plot.ly 文档示例中那样创建具有两个 y 轴的绘图？

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

如果使用Plotly根本无法做到这一点，那么使用Dash是否有简单的解决方案？我似乎找不到与链接的 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)

我用一些虚拟数据在本地运行它，它起作用了。如果您对此有任何疑问，请告诉我。