时间轴.js如何将鼠标悬停事件添加到可视化项目框框

vis.js timeline how to add mouse over event to vis-item box-box

本文关键字：添加 事件 可视化 项目 悬停 鼠标 js 时间      更新时间：2023-09-26

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

我在此网址 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 -> getEventProperties

相关文章：