Question

除了使用Flask之外，如何像Plot.ly docs example一样创建具有两个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

这样的事情应该可以带你到那里。

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)

我在本地运行了一些虚拟数据，并且运行正常。让我知道您是否对此有任何疑问。

Answer 2

这里是一个示例示例，说明了如何将示例地块图整合到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)

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

2 个答案: