gpt4 book ai didi

javascript - vis.js timeline 如何将鼠标悬停事件添加到 vis-item box-box

转载 作者:行者123 更新时间:2023-11-29 16:51:14 30 4
gpt4 key购买 nike

我使用 vis.js 创建了一个时间线图表。我有很多 vis-box 项目。因为我可以在时间轴上显示非常有限的信息。因此,当用户移动到项目上时,我想显示该项目的详细信息。

我在这个 url http://visjs.org/docs/timeline/#Events 查看时间线事件的文档.我看到了如何处理选择事件。

我想知道如何为项目添加鼠标悬停事件?

谢谢。

这是选择事件

function onSelect (properties) {
alert('selected items: ' + properties.nodes);
}

// add event listener
timeline.on('select', onSelect);

如何为项目添加鼠标悬停事件?

timeline.on('mouseover', onMouseover)? 

这是代码 https://jsfiddle.net/gbdjbdhv/17/

感谢您的帮助!

最佳答案

您可以将常规 JavaScript 事件监听器附加到容器 DIV,并使用方法 timeline.getEventProperties(event) 查看事件是否发生在项目顶部。

var container = document.getElementById('visualization');

var items = new vis.DataSet([
{id: 4, className:'item4', content: 'item 4', start: '2016-01-16'},
{id: 5, className:'item5', content: 'item 5', start: '2016-02-23'},
{id: 6, className:'item6', content: 'item 6', start: '2016-03-27'}
]);

var options = {
showCurrentTime: true,
orientation: {axis: 'both', item: 'top'},
height: 400,
margin: {
axis: 100
}
};
var timeline = new vis.Timeline(container, items, options);

function onMouseover (event) {
var properties = timeline.getEventProperties(event);
// properties contains things like node id, group, x, y, time, etc.
console.log('mouseover properties:', properties);
}
container.addEventListener('mouseover', onMouseover)

文档:http://visjs.org/docs/timeline/#Methods -> 获取事件属性

关于javascript - vis.js timeline 如何将鼠标悬停事件添加到 vis-item box-box,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35967322/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com