Plotly:如何在 Plotly 图上绘制多个图像? [英] Plotly: How to plot multiple images on a Plotly figure?

问题描述

我的主要目标是使用 Dash 的 Plotly 图表在气象图上显示天气图标.此要求的示例如下所示:

My main objective is to display weather icons on a meteogram, using a Plotly graph from Dash. An example of this requirement is shown below:

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

For that, I tried to write the following code:

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 中的最后一个图标代码，如下所示:

I use a folder of icon images ('pictos_png') where each image name correspond to a weather code. Then, a dataframe df is passed to the function where each row correspond to a weather code for the timestamp considered. However, this function seems to only display one weather icon corresponding to the last icon code in the dataframe df, as it can be seen here:

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

Anyone have any idea why this doesn't work correctly?

推荐答案

您提供的代码不容易重现.不过，以下设置应该与您正在寻找的非常接近:

The code you've provided isn't easily reproducible. The following setup should be pretty close to what you're looking for though:

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 图上绘制多个图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！