在 Vis-Timeline 中突出显示项目选择组

Question

是否可以在选择它所属的时间线项目时突出显示该组？

示例：

从附加的示例中，如果我选择项目（项目 17），组 'Alston' 应该以某种方式突出显示（或者我以某种方式更改其 CSS，以便人们可以理解哪个组项目被选中)

Answer 1

这可以使用 select 事件来实现，只要 selected / unselected 就会触发该事件。有关此事件的详细信息，请参阅 vis-timeline 文档 here。

当 select 事件触发时，您需要确定 selected 项目的组，或者如果使用 multiselect 选项的项目。然后用突出显示的 class 更新每个组的 className。您还必须清除任何不应突出显示的组的 className。然后必须在组数据集中更新这些更新，更新后它们将应用于时间线。

下面以及 https://jsfiddle.net/hzevcgod/.

中的这个答案中包含了一个示例

var now = moment().minutes(0).seconds(0).milliseconds(0);
var groupCount = 3;
var itemCount = 20;

// create a data set with groups
var names = ["John", "Alston", "Lee", "Grant"];
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
  groups.add({ id: g, content: names[g], 
    // The below can be uncommented to test a group already having a class
    // className: 'default-class' 
  });
}

// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
  var start = now.clone().add(Math.random() * 200, "hours");
  var group = Math.floor(Math.random() * groupCount);
  items.add({
    id: i,
    group: group,
    content:
      "item " +
      i +
      ' <span style="color:#97B0F8;">(' +
      names[group] +
      ")</span>",
    start: start,
    type: "box",
  });
}

// create visualization
var container = document.getElementById("visualization");
var options = {
  groupOrder: "content", // groupOrder can be a property name or a sorting function
  //multiselect: true
};

var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);


// Define the class to be used to highlight groups
const groupHighlightClass = ' group-highlight ';

timeline.on("select", function (properties) { 
  // Define an array to store updated groups
  // This allows all groups to be updated in one go at the end improving performance
  // on large timelines
  const groupsToUpdate = [];

  // Loop selected items
  // Note: Multiple items can be selected by CTRL + Clicking if the option 'multiselect'
  // is set to true. This is set to false by default.
  properties.items.forEach(itemId => {
    // Get the group id of the item
    const groupId = items.get(itemId).group;
    
    // If group is not already in update array
    // This just prevents duplication in the update array
    if(!groupsToUpdate.some(x => x.id === groupId)){
    
      // Retrieve the groups existing className
      let className = groups.get(groupId).className;
    
      if(!className){
        // The group has no className, set to the highlight class
        className = groupHighlightClass;
      } else if(!className.includes(groupHighlightClass)){
        // The group already has another class, append the highlight class
        className = className += groupHighlightClass;
      }
    
      // Push to array to update at the end
      groupsToUpdate.push({id: groupId, className: className});
    }
  });
  
  
  // Clear any other groups which may have been previously highlighted
  // Loop all groups
  groups.forEach(group => {
    // If group is not already in update array, if it is then no need to clear
    if(!groupsToUpdate.some(x => x.id === group.id)){
      // If the group has a className definied which contains the highlight class
      if(group.className && group.className.includes(groupHighlightClass)){
        // Remove the class from the group, maintaining any other classes
        let className = group.className.replace(groupHighlightClass, '');
      
        // If this results in an empty string place a single space as the className
        // Vis timeline throws an error when changing className to an empty string
        if(className === ''){
          className = ' ';
        }
      
        // Push to array to update at the end
        groupsToUpdate.push({id: group.id, className: className});  
      }
    }
  });
  
  // Update the groups
  groups.update(groupsToUpdate);
});

body,
html {
  font-family: arial, sans-serif;
  font-size: 11pt;
}

#visualization {
  box-sizing: border-box;
  width: 100%;
  height: 300px;
}

.group-highlight {
  /* Note: !important is only necessary if you have other classes changing the same properties on the group */
  background-color: black !important;
}

/* The below class was used to test already having a class on a group */
/* .default-class {
  background-color: grey;
} */

<link href="https://visjs.github.io/vis-timeline/styles/vis-timeline-graph2d.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://visjs.github.io/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>

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

在 Vis-Timeline 中突出显示项目选择组

Highlighting Group on Item Selection in Vis-Timeline

vis.js

vis-timeline