Plotly:如何在 Plotly 图上绘制多个图像?

2022-01-21 00:00:00 python plotly plotly-dash image

问题描述

我的主要目标是使用 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()

相关文章