plotly：添加具有不同填充颜色的矩形

Question

我有一个由四列组成的眼动追踪数据集：

• t

  是一个 numpy 时间戳数组

• x

  和

  y

  是注视点的像素坐标

• e

  是一个值数组

  {0, 1, 2, 3, 4, 5}

  将每个样本标记为不同的注视事件（注视、扫视等）

我想随时间绘制

x

和

y

坐标，并在图形上/下添加一个矩形，其颜色根据

e

的值而变化。

一些示例数据：

t = np.arange(30)
x = np.array([125.9529, 124.6142, 125.0569, 125.3117, 126.7498, 127.035,125.4822, 125.6249, 126.9371, 127.6047, 129.031 , 128.2419, 121.521 , 114.7071, 109.4141, 100.5057,  94.9606,  95.2231, 95.9032,  96.4991, 101.2602, 103.9582, 108.2527, 108.8801, 110.3254, 112.8205, 113.0079, 113.3547, 113.0962, 113.2508])
y = np.array([31.218 , 31.236 , 31.147 , 31.2614, 30.806 , 30.8423, 31.727, 32.2256, 32.0504, 32.7774, 34.7089, 37.0671, 46.309 , 55.9716, 62.4481, 68.0248, 75.4912, 79.0622, 81.2176, 83.191 , 83.7656, 84.6713, 83.9343, 82.4546, 81.1652, 80.7981, 80.2136, 80.7405, 80.4398, 80.0738])
e = np.array([1., 1., 1., 1., 1., 1., 1., 1., 1., 2., 2., 2., 2., 2., 2., 2., 2., 2., 2., 2., 3., 3., 3., 3., 3., 3., 4., 4., 4., 4.])

我尝试编码：

import plotly.graph_objects as go
from plotly.subplots import make_subplots

fig = make_subplots()
fig.add_trace(ply.graph_objects.Line(x=trial1[cnst.MILLISECONDS], y=trial1[cnst.X], name="X"),
              secondary_y=False, row=1, col=1)
fig.add_trace(ply.graph_objects.Line(x=trial1[cnst.MILLISECONDS], y=trial1[cnst.Y], name="Y"),
              secondary_y=False, row=1, col=1)
fig.add_shape(type="rect",
              x0=t[0], y0=0, x1=t[-1], y1=0.05 * np.max([x, y]),
              line=dict(color="black", width=2),
              fillcolor=e)

这引发了

Value Error: Invalid value of type 'numpy.ndarray' received for the 'fillcolor' property of layout.shape

Answer 1

要使用形状执行此操作，您需要为每个时间戳创建一个矩形：

palette = px.colors.qualitative.D3
colors = [palette[int(x)] for x in e]

t_res = 1                               # your timestamp resolution
posts = np.append(t, t[-1]+1) - t_res/2 # n sections requires n+1 posts

for i in range(1, posts.size):
    fig.add_shape(type="rect",
                x0=posts[i-1], y0=0, x1=posts[i], y1=0.05 * np.max([x, y]),
                line=dict(color="black", width=2),
                fillcolor=colors[i-1])

---

另一种方法是使用 热图跟踪 :

fig.add_trace(go.Heatmap(
        z=[e],
        x=t,
        y=[0, 0.05 * np.max([x, y])],
        zmin=0,
        zmax=5,
        colorbar=dict(len=0.5)),
    secondary_y=False, row=1, col=1
)

您可能想要自定义（或设置一个空字符串）

hovertemplate

，并使用离散的

colorscale

（即，

ticktext

对应于不同的注视事件），如here所示。