python plotly\dash - 在背景中使用圖像繪制數據

Question

在 plotly 手冊中有一些例子。 但是，在使用破折號時沒有關於同一問題的信息。

我試過按照這個例子創建我自己的例子，我沒有看到圖像

img = plt.imread('link1.png')

app.layout = html.Div([
    # auto update every 60 msec
    dcc.Interval(id='graph-update', interval=5000),
    html.Div([
        html.Div([
            html.H3("Bearing-Depression", style={'text-align': 'center'}),
            dcc.Graph(id='f1', figure={})],
            className="six columns"),
    ],
    className="row"),
])

@ app.callback([Output('f1', 'figure'),],
           [Input('graph-update', 'n_intervals')])
def update(n):
    fig2 = px.imshow((img), origin='lower')
    
    fig2.update_xaxes(tickvals=[0, 30, 60, 90, 120,
                            150, 180, 210, 240, 270, 300, 330, 360])
    fig2.update_yaxes(tickvals=[0, 10, 20, 30, 40, 50, 60, 70,
                            80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180])
    data = df[df.condition == "OK"]
    fig2.add_trace(go.Scatter(x=data['x'],
                          y=data['y'],
                          marker=dict(color='black', symbol='circle'),
                          name="OK"
                          ))
    return fig2

有什么建議可以做，以便我在同一個圖中有一個圖像和一個散點 plot？

Answer 1

如果要在 Dash 上的圖像引用中引用本地，則需要將其轉換為 base64 格式。 我提供的代碼可能需要調整大小和 position 以適合您的圖表。 正式地，我提到了這個。你也可能會發現這個問題很有幫助。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.express as px
import pandas as pd
import base64

# img = plt.imread('link1.png')
img = base64.b64encode(open('link1.png', 'rb').read())

app = dash.Dash(__name__)

app.layout = html.Div([
    # auto update every 60 msec
    dcc.Interval(id='graph-update', interval=5000),
    html.Div([
        html.Div([
            html.H3("Bearing-Depression", style={'text-align': 'center'}),
            dcc.Graph(id='f1', figure={})],
            className="six columns"),
    ],
    className="row"),
])

@ app.callback([Output('f1', 'figure'),],
           [Input('graph-update', 'n_intervals')])
def update(n):
    fig2 = px.imshow((img), origin='lower')
    
    fig2.update_xaxes(tickvals=[0, 30, 60, 90, 120,
                            150, 180, 210, 240, 270, 300, 330, 360])
    fig2.update_yaxes(tickvals=[0, 10, 20, 30, 40, 50, 60, 70,
                            80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180])
    data = df[df.condition == "OK"]
    fig2.add_trace(go.Scatter(x=data['x'],
                          y=data['y'],
                          marker=dict(color='black', symbol='circle'),
                          name="OK"
                          ))
    fig2.add_layout_image(dict(source='data:image/png;base64,{}'.format(img.decode()),
                               xref="x", 
                               yref="y",
                               x=0,
                               y=3,
                               sizex=2,
                               sizey=2,
                               sizing="stretch",
                               opacity=0.5,
                               layer="below"))
    return fig2

 app.run_server(debug=True)