如何使用 Plotly 在图像中放置气泡图？

Question

你好，我想把这些气泡图放在图中所示的项目上。第一个问题是如何将它们放在物品上？第二个是如何按时间在同一个地方显示所有气泡。因为当时间改变时，气泡有不同的值，我想在同一点显示它们。气泡的大小足以显示值。谁能帮我解决这个问题？提前致谢。

data= {'device': {0: 'Laptop', 1: 'Laptop', 2: 'Laptop', 3: 'Laptop', 4: 'Laptop'},
 'power': {0: 20, 1: 23, 2: 20, 3: 22, 4: 19},
 'time': {0: '16/11/2012 11:29',
  1: '16/11/2012 11:30',
  2: '16/11/2012 11:31',
  3: '16/11/2012 11:32',
  4: '16/11/2012 11:33'}}

img=

# Create figure
fig = go.Figure()

fig = px.scatter(dt_lap, x="power", y="time",
             size="power", color="device",animation_frame="time",animation_group="device",
                   height=600,
    width=800, hover_name="time", log_x=True)

                

# Add images
fig.add_layout_image(
        dict(
            source=img,
            xref="paper",
            yref="paper",
            x=0,
            y=1,
            sizex=1,
            sizey=1,
          
            sizing="contain",
            opacity=1,
            layer="below")
)

# update layout properties
fig.update_layout(
    autosize=False,
    height=600,
    width=800,
    )

# Set templates
fig.update_layout(template="plotly_white")

fig.show()

Answer 1

据我所知，不需要您当前的 x 和 y-axes。气泡的大小表示电量，动画帧显示电量随时间的变化。

相反，您可以通过将它们的范围设置为 [0,1] 来有效地制作 x 和 y-axes 纸张坐标，然后创建新的列“x”和“y”来保存不同的坐标值背景图像中的对象，并在创建散点图时使用这些列名称：px.scatter(dt_lap, x="x", y="y", ...) 以便气泡出现在所需对象上。

这是一个例子：

import numpy as np
import pandas as pd

from PIL import Image

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

## create some sample data
np.random.seed(42)
dt_lap = pd.DataFrame({
    "time": list(pd.date_range(start='16/11/2012 11:20', periods=30, freq="1min"))*3,
    "power": np.random.randint(low=0, high=50, size=90),
    "device": ["Laptop"]*30+["Fridge"]*30+["Kettle"]*30
})
dt_lap["time_string"] = dt_lap["time"].astype(str)

## coordinate mapping:
device_coordinate_map = {
    'Laptop': [0.18, 0.8],
    'Fridge': [0.67, 0.5],
    'Kettle': [0.88, 0.40]
}

dt_lap['x'], dt_lap['y'] = zip(*list(dt_lap['device'].map(device_coordinate_map).values))

## load image
img = Image.open('room_img.png')

# Create figure
fig = px.scatter(dt_lap, x="x", y="y",
             size="power", color="device",animation_frame="time_string",animation_group="device",
                   height=600,
    width=800, hover_name="time")         

# Add images
fig.add_layout_image(
    dict(
        source=img,
        xref="paper",
        yref="paper",
        x=0,
        y=1,
        sizex=1,
        sizey=1,
        sizing="contain",
        layer="below"
    )
)

# Set templates
fig.update_layout(
    template="plotly_white", 
    xaxis=dict(range=[0,1], showgrid=False),
    yaxis=dict(range=[0,1], showgrid=False)
)

fig.show()

如何使用 Plotly 在图像中放置气泡图？

How to place bubble charts in an image using Plotly?

python

bubble-chart

dataframe

pandas

plotly