vis.js时间线如何将鼠标悬停事件添加到vis-item box-box

2024-04-14

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

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

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

Thanks.

这是针对选择事件的

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

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

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

timeline.on('mouseover', onMouseover)? 

这是代码https://jsfiddle.net/gbdjbdhv/17/ 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)

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vis.js时间线如何将鼠标悬停事件添加到vis-item box-box 的相关文章

  • 如何在 Chrome 中创建 TouchEvent?

    The W3C规范 http www w3 org TR 2011 WD touch events 20110505 idl def TouchEvent宣称initTouchEvent如下 void initTouchEvent in D
  • 调用“DOMNodeInserted”事件时添加元素

    我想在每个 喜欢 按钮 chrome 扩展 之后添加一个元素 由于帖子被添加到新闻提要而不刷新页面 我必须添加一个事件侦听器 DOMNodeInserted 但是当我尝试把after 里面的功能 它不起作用 Code contentArea
  • 如何使用键盘和鼠标控制相机 - Three.js

    我在 WEB GL 中有一个带有 Three js 的 3D 环境 并且我曾经使用 Orbitcontrols js http codepen io nireno pen cAoGI http codepen io nireno pen c
  • Ext JS - 如何滚动到文本区域的底部

    这是我下面的代码 如何滚动到文本区域的底部 它一定是类似的东西 Ext getCmp output setScrollPosition Ext getCmp output getScrollHeight 这是我的文本区域代码 var myW
  • ant-d upload中如何为removeFile添加PopConfirm一个图片文件

    我正在使用 Ant d Upload 通过本地系统上传文件 然后单击文件预览图像上的删除图标 图像文件将被删除 我想添加一个弹出确认 所以我尝试在 onRemovefunction 中添加确认作为承诺但它不起作用 它在浏览器中显示警报 on
  • 将一个文本框的内容复制到另一个文本框

    假设在文本框中输入了一个条目 是否可以在第二个文本框中保留相同的输入文本 如果是这样 这是如何完成的
  • 在 BIRT 中输入参数后更新数据集查询

    在 BIRT 报告设计中传递参数后 如何更改或更新数据集的查询 详细说明 我有一个如下所示的查询 WHERE 该参数标记可以保存不同的值 在用户输入参数后 它看起来像这样 例如 WHERE column name 1 or WHERE co
  • 将 jquery-mobile 与 Webpack 结合使用

    我正在尝试使用 webpack 加载 jquery mobile 但到目前为止还没有运气 我知道 jquery mobile 依赖于 jquery ui 而 jquery ui 又依赖于 jquery 如何在 Webpack 中设置这样的场
  • 如何在 d3 js 中突出显示从根到选定节点的路径?

    我使用 d3 js 创建了一棵树 现在我创建了一个下拉菜单 其中包含树中所有节点的列表 现在 从下拉菜单中选择一个节点时 我想突出显示从根到该特定节点的路径 这个怎么做 首先创建一个 flatten 函数 它将分层数据变成一个 n 数组 f
  • 在 MVC Razor 中的 C# 和 Javascript 之间共享常量

    我想在服务器上的 C 和客户端上的 Javascript 中都使用字符串常量 我将常量封装在 C 类中 namespace MyModel public static class Constants public const string
  • 如何使用 jQuery 向表中添加新行,并为其分配递增的 id

    我有一个现有的 HTML 表格 它是用户输入 GPS 点的表单的一部分 用户还可以选择上传 GPS 数据点 我想要一个用户可以按下的按钮 其中一些 Javascript 会向表中添加一个或多个新行 但新行必须继续增加表中使用的名称和 id
  • HTML colorpicker 发生变化时如何获取新值?

    我正在开发一个需要更改 HTML 颜色的网络应用程序canvas基于的价值观colorpicker 我有一个colorpicker在我需要获取的 HTML 中value从每次更新开始
  • KeyboardEvent.keyCode 已弃用。这在实践中意味着什么?

    根据 MDN 我们绝对应该not正在使用 keyCode财产 它已被弃用 https developer mozilla org en US docs Web API KeyboardEvent keyCode https develope
  • 如何清除WebGL中的矩形区域?

    WebGL 有一个clear清除整个表面的方法 清除表面的特定矩形的最佳方法是什么 例如 我想将一个从 50 50 开始的 100x100 像素框设置为全零 ARGB 0 0 0 0 我现在能想到的就是用一个写入零的片段着色器绘制一个四边形
  • 如何在网页上实现文件上传进度条?

    当用户将文件上传到我的网络应用程序时 我想显示比动画 gif 更有意义的内容 我还有哪些可能性 编辑 我正在使用 Net 但我不介意是否有人向我展示与平台无关的版本 如果您对这一切在客户端通常如何工作感兴趣 就是这样 所有解决方案都通过 J
  • 需要js、d3 和 nvd3 集成

    我面临整合的问题要求 questions tagged requirejs with d3 questions tagged d3 and nvd3 questions tagged nvd3 我找到了一个使用 require 的简单解决方
  • 如何获取使用 .map 渲染的第一个元素的 ref?

    我需要在几行中显示视频 卡片 的缩略图 并重点关注第一个缩略图 我使用嵌套地图进行了显示 该代码基本上迭代视频数组并返回多行视频 我们如何关注第一个渲染的元素 我认为我们需要获得第一个要聚焦的元素的引用 但是我们如何在这里设置 ref 并在
  • 您如何看待引导模式触发器的相应回调?

    On 引导模态 http getbootstrap com javascript modals 我们知道我们可以为触发器绑定事件 例如show or hide using show shown hide hidden 但此事件绑定仅适用于一
  • React Native - 跨屏幕传递数据

    我遇到了一些麻烦react native应用程序 我不知道如何跨屏幕传递数据 我意识到还有其他类似的问题在 SO 上得到了回答 但是这些解决方案对我来说不起作用 我正在使用StackNavigator 这是我的设置App js file e
  • Django 与谷歌图表

    我试图让谷歌图表显示在我的页面上 但我不知道如何将值从 django 视图传递到 javascript 以便我可以绘制图表 姜戈代码 array Year Sales Expenses 2004 1000 400 2005 1170 460

随机推荐