微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

bqplot 图像的 on_click/hover 事件

如何解决bqplot 图像的 on_click/hover 事件

我正在尝试使用带有图像芯片和散点图的 ipywidgets 和 bqplot 构建交互式仪表板。散点图中的每个点对应一个图像芯片,因此我希望 (1) 在将鼠标悬停在相应图像上时“突出显示”该点,以及 (2) 在单击时更改该点的颜色并存储 x 值一张图片

虽然 on_clickon_hover 存在于 Image 标记中,但我没有设法使它们起作用。请参阅下面我到目前为止的内容

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])

额外问题:是否可以在同一个图形中并排放置多个图像?

解决方法

on_hover() 可以工作,只需定义一个回调函数,以便在您悬停时调用它。尝试使用 on_element_click() 而不是 on_click()

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。