vis.js onclick 获取值

Question

当我单击时间轴中的项目时，我无法获取标题值。我可以得到该组，但标题产生未定义。有没有办法获得称号。当我将鼠标悬停在项目上时，标题将显示为工具提示。

var items = new vis.DataSet([
  { content: '', start:'2021-10-28 00:00:0', end:' 2021-10-28 01:59:59',group:'l0t',title: 'Bear',className: "green"},
  { content: '', start: '2021-10-28 02:00:01', end:'2021-10-28 03:59:58',group: 'l0t', title: 'Tiger',className: "green",}])
...
var timeline = new vis.Timeline(container, items, groups, options);
timeline.on("click", function (properties) {
  console.log(properties.group)
});

Answer 1

点击事件传递一个由Timeline.getEventProperties(event) 方法返回的属性对象，这在https://visjs.github.io/vis-timeline/docs/timeline/#getEventProperties 中有进一步的描述。此对象具有被单击的项目的 ID，而不是项目本身。必须使用 ID 从 DataSet 中检索项目。

timeline.on("click", function (properties) {
  if(properties.item){
    const item = items.get(properties.item);
    console.log(item.title);
  }
});

点击事件会在时间轴上任意位置的所有点击上触发，即使那些不在后台项目上的点击也是如此。根据上面的 sn-p，有必要在从 DataSet 加载之前检查 properties.item 以查看是否单击了项目。

另一种方法是使用仅在选择项目时触发的选择事件。但是，在使用 select 事件时，您可能需要考虑多个被选中的项目，如果在时间线选项中设置了 multiselect: true，这是可能的。

点击事件和选择事件的示例如下。多选代码存在但已被注释掉。

// DOM element where the Timeline will be attached
var container = document.getElementById("visualization");

// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
  { content: '', start:'2021-10-28 00:00:00', end:' 2021-10-28 01:59:59',group:'abc',title: 'Bear',className: "green"},
  { content: '', start: '2021-10-28 02:00:01', end:'2021-10-28 03:59:58',group: 'abc', title: 'Tiger',className: "green",}])

// Configuration for the Timeline
var options = {
  // multiselect: true
};

// Create a Timeline
var timeline = new vis.Timeline(container, items, options);

// Register click event
timeline.on("click", function (properties) {  
   // Check if an item was clicked on
   if(properties.item){
     // An item was clicked, get the item from dataset
     const item = items.get(properties.item);
     // Log the title
     console.log('click event - title:', item.title);
     
   } else {
     // Click was not on an item
     console.log('click event - no item');
   }
});

// Alternatively register select event
timeline.on("select", function (selection){
  // If you set `multiselect: false` or leave it unset then only one item can selected at once.
  // Therefore you can just use [0] to access the first item in the items array
  if(selection.items.length > 0){
    const item = items.get(selection.items[0]);  
    console.log('select event - title:', item.title);
  }
  
  // If `multiselect: true` is set in the options then there could be multiple items selected.
  // The above code is therefore not valid, instead it must loop through the items.
  // Loop through these items.
  //   for (let i = 0; i < selection.items.length; i += 1){
  //     var item = items.get(selection.items[i]);
  //     console.log('select event - title:', i, item.title);
  //   }
});

body,
html {
  font-family: sans-serif;
}

<script src="https://visjs.github.io/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>
<link href="https://visjs.github.io/vis-timeline/styles/vis-timeline-graph2d.min.css" rel="stylesheet" />

<div id="visualization"></div>