Plotly：如何在 Plotly 图形上绘制多个图像？

Question

我的主要 objective 是使用 Dash 中的 Plotly 图表在气象图上显示天气图标。此要求的示例如下所示：

天气图标Objective

为此，我尝试编写以下代码：

def graph_pictos(df: pd.DataFrame):
    
    k = 0
    
    fig = go.Figure()

    file_path = 'pictos_png/'
       
    for row in df.itertuples():
        
        picto_number = str(round(row.pictonumber_3h))        
        image_filename = ''.join((file_path, picto_number,'_big.png'))
        picto_image = base64.b64encode(open(image_filename, 'rb').read())
   
        
        fig.add_layout_image(
            go.layout.Image(
                source = 'data:image/png;base64,{}'.format(picto_image.decode()),
                xref = "x",
                yref = "y",
                x = k,
                y = 1,
                sizex = 0.5,
                sizey = 0.5,
                xanchor="center",
                yanchor="middle"
            )
        )
        k+=1
        
   
        
        return fig

我使用一个图标图像文件夹 ('pictos_png')，其中每个图像名称对应一个天气代码。然后，将数据帧 df 传递给函数，其中每一行对应所考虑时间戳的天气代码。然而，这个函数似乎只显示一个天气图标对应于数据框中的最后一个图标代码df，如下所示：

Plotly 上的图标图像

有人知道为什么这不能正常工作吗？

Answer 1

您提供的代码不容易重现。不过，以下设置应该非常接近您要查找的内容：

情节

代码

import plotly.graph_objects as go
import plotly.express as px
import pandas as pd

data = {'category': ['A', 'B', 'C', 'D'],
        'x': [4,8,12,16],
        'y':[1,1,1,1],
        'image':["https://images.plot.ly/language-icons/api-home/python-logo.png",
                 "https://raw.githubusercontent.com/michaelbabyn/plot_data/master/benzene.png",
                 "https://images.plot.ly/language-icons/api-home/python-logo.png",
                 "https://raw.githubusercontent.com/michaelbabyn/plot_data/master/benzene.png"],
        'intervals':[[4, 6], [8, 10], [12, 14], [16, 18]]
       }
df = pd.DataFrame(data)

# Create figure
fig = go.Figure()

for i, x in enumerate(df['x']):

    fig.add_layout_image(
            dict(
                source=df['image'].iloc[i],
                xref="x",
                yref="y",
                x=x,
                y=df['y'].iloc[i],
                sizex=2,
                sizey=2,
                sizing="stretch",
                opacity=0.5,
                layer="below")
    )
fig.update_layout(xaxis_range=[0, 20], yaxis_range=[-2,4])

fig.show()

Plotly：如何在 Plotly 图形上绘制多个图像？

Plotly: How to plot multiple images on a Plotly figure?

python

image

plotly

plotly-dash

天气图标Objective

Plotly 上的图标图像

情节

代码