在plotly（python）中将多个图形添加到同一轨迹

Question

我试图在同一轨迹上添加不同的图形（在本例中为图像和散点图），以便使用滑块在它们之间滑动。取而代之的是，我得到的是一个在整个图中排列的图，而不是将图像和散射合并到同一个轨迹中

绘图上方的代码可以忽略

    traces_1 = {}
for step in step_list:
    # Find ID of Image
    qs_Ypixels = Ypixels.objects.filter(id_observation=observation, step=step).values_list('ypixels','l_1400')
    find_id = pd.DataFrame.from_records(qs_Ypixels.values('ypixels','l_1400'))
    id_1400 = find_id.l_1400[0]

    #Get Image DataFrame
    qs_Images = Images.objects.filter(id_image=id_1400).values_list('id_image', 'path', 'slit_pos')
    find_image = pd.DataFrame.from_records(qs_Images.values('id_image', 'path', 'slit_pos'))
    path = str(find_image.path[0])

    #Get centroid array 
    centroids_array = np.array(find_id['ypixels'][0])

    # Which Centroid is activated
    activations = (centroids_array==centroid)

    # number of pixels on the raster slit
    n = len(activations)

    # Load image
    path_to_file = os.path.join(settings.BASE_DIR, 'centroid_webapp/iris_images/{}').format(path)

    # Get Image shape
    img_array = io.imread(path_to_file)

    # Set dimensions of image
    height, width, rgb = img_array.shape

    # scale everything to the JPG
    real_slit_pos = find_image['slit_pos'][0] * img_array.shape[1] / nx
    x = np.array([real_slit_pos] * n)
    y = np.array(img_array.shape[1] / ny * np.arange(n))

    # Encode Image for into Plotly readable format
    encoded_image = base64.b64encode(open(path_to_file, 'rb').read())

    #Define axis
    xlim = [0, width]
    ylim = [0, height]

    fig.add_trace(
        go.Scatter(
            visible=False,
            mode='markers',
            x=x[activations[::1]],
            y=y[activations[::1]],
            marker=dict(size=4, color='#00ffcd'),
            ),
            #row=1, col=1
            )
    fig.add_trace(
        go.Image(
            dict(
            source='data:image/png;base64,{}'.format(encoded_image.decode()),
            ))),

    fig.update_layout( 
                xaxis=dict(range=[xlim[0],xlim[1]], fixedrange=True,),
                yaxis=dict(range=[ylim[0],ylim[1]], fixedrange=True,),
                
            )


fig.data[0].visible=True

steps=[]
for i in range(len(fig.data)):
    step = dict(
        method="update",
        args=[{"visible": [False] * len(fig.data)}],
    )

    step["args"][0]["visible"][i] = True  # Toggle i'th trace to "visible"
    steps.append(step)

sliders = [dict(active=0, pad={"t": 5}, steps=steps )]

#TODO Check how to integrate bellow lines into loop

fig.update_layout(
                images= [dict(
                   # source='data:image/png;base64,{}'.format(encoded_image.decode()),
                    #xref="paper", yref="paper",
                    x=0, y=1, sizex=1, sizey=1, xanchor="left", yanchor="top", layer="below",
                    )],
                    xaxis_showgrid=False, yaxis_showgrid=False, xaxis_zeroline=False, yaxis_zeroline=False, xaxis_visible=False, yaxis_visible=False,
                    width=325, height=375, autosize=False,
                    sliders=sliders,
                    template="plotly_white",
                    margin=dict(l=10, r=10, t=5, b=5),
                )
data = [list(a) for a in zip(traces_1)]
plot_1400 = plot(fig, include_plotlyjs=False, output_type='div')