【发布时间】:2021-03-08 15:12:49
【问题描述】:
我正在尝试使用带有图像芯片和散点图的 ipywidgets 和 bqplot 构建交互式仪表板。散点图中的每个点都对应一个图像芯片,因此我希望(1)在将鼠标悬停在相应图像上时“突出显示”该点,以及(2)在单击时更改该点的颜色并存储 x 值一张图片。
尽管图像标记存在on_click 和on_hover,但我没有设法使它们起作用。请参阅下面我到目前为止的内容
import io
import datetime
import numpy as np
import ipywidgets as ipw
from PIL import Image as PImage
import bqplot as bqp
import pandas as pd
#########
## Generate list of random images, with associated x and y values
#########
def random_image():
"""Generate a random ipywidget Image
"""
arr = np.random.randint(255, size=(300, 300, 3), dtype=np.uint8)
img = PImage.fromarray(arr)
with io.BytesIO() as fileobj:
img.save(fileobj, 'PNG')
img_b = fileobj.getvalue()
img_w = ipw.Image(value=img_b)
return img_w
origin = datetime.datetime(2020, 1, 1)
img_list = [{'image': random_image(),
'x': origin + datetime.timedelta(idx),
'y': np.sin(idx)} for idx in range(10)]
###########
## Create scatter plot
###########
scale_y = bqp.LinearScale()
scale_x = bqp.DateScale()
scatter = bqp.Scatter(x=pd.Series([item['x'] for item in img_list]),
y=[item['y'] for item in img_list],
scales={'x': scale_x, 'y': scale_y})
axis_x = bqp.Axis(scale=scale_x)
axis_y = bqp.Axis(scale=scale_y, orientation='vertical')
scat_fig = bqp.Figure(marks=[scatter],
layout={'width':'1500px', 'height':'300px'},
axes=[axis_x, axis_y])
#########
## Create grid (or row) of image chips
#########
layout = ipw.Layout(width='150px', height='200px')
img_fig_list = []
for item in img_list:
image = bqp.Image(image=item['image'])
fig = bqp.Figure(
# title=item['x'].strftime('%Y-%m-%d'),
marks=[image], padding_x=0, padding_y=0, min_aspect_ratio=1, max_aspect_ratio=1,
fig_margin = dict(top=10, bottom=10, left=10, right=10),
layout=layout)
#image.on_click(click_fn)
img_fig_list.append(fig)
############
## Combine scatter and image chips and display them
############
img_row = ipw.HBox(img_fig_list)
ipw.VBox([scat_fig, img_row])
额外问题:是否可以在同一个图中并排放置多个图像?
【问题讨论】:
-
你能检查一下你浏览器的开发者工具控制台吗(如果是 Chrome?)我在尝试使用 bqp.Image 的 on_click 或 on_element_click 时遇到一些错误,你看到了吗?
-
我收到“未捕获的类型错误:无法读取未定义的属性‘反转’”
-
是的,这里也一样。我认为可能存在一些问题,您的用法似乎是正确的。值得在 github 上报告。
-
谢谢@ac24,会的
标签: python jupyter-notebook ipywidgets bqplot