1

I have been using vis.js timeline to keep items in a time order.

I use the following to add timeline items :

timeline_items.add({
    id              : entity_id + uuidv4(),
    group           : "timeline_video_group_id",
    start           : start_date,
    end             : end_date,
    content         : "<img src='" + element_src_link + "'></img>",
    className       : 'imagecontainer'
});

However, I cannot add any custom data into this add function.

How may I add custom data, so it may hold information such as entity-uuid=xxxx inside the div below ?

<div class="vis-item vis-range imagecontainer vis-editable" style="transform...">
  <div class="vis-item-overflow">
    <div class="vis-item-content" style="transform: translateX(0px);">
      <img src="image_src">
    </div>
    <div class="vis-item-visible-frame">
    </div>
  </div>
</div>
4

1 回答 1

1

您可以将内容更新为您想要的完整 HTML，包括图像和文本，然后将其存储在 DataSet 中。此处名为“自定义样式”的 vis.js 示例使用了这种方法。

content: '<div>Mail from boss</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">',

或者，您可以将自定义数据添加到 DataSet 中的项目，然后使用此处文档中描述的模板功能来构造 HTML。这是我会使用的方法。

模板示例已包含在下面的帖子中以及https://jsfiddle.net/xm95u40f/中。该示例为 DataSet 中的每个项目添加了一个名为的属性，该属性imageColor与来自内容的文本结合使用以显示该项目。entity-uuid您可以以类似的方式存储和使用您的价值。

// 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();

items.add([
  { id: 1, content: "item 1", start: "2021-12-21", end: "2021-12-23", imageColor: "0000FF" },
  { id: 2, content: "item 2", start: "2021-12-14", end: "2021-12-17", imageColor: "FFFFFF" },
  { id: 3, content: "item 3", start: "2021-12-18", end: "2021-12-20", imageColor: "0000FF" },
  { id: 4, content: "item 4", start: "2021-12-16", end: "2021-12-21", imageColor: "FFFFFF" },
  { id: 5, content: "item 5", start: "2021-12-25", end: "2021-12-27", imageColor: "000000" },
  { id: 6, content: "item 6", start: "2021-12-27", end: "2021-12-28", imageColor: "008000" },
]);

// Configuration for the Timeline
var options = {
  // Define a template function which constructions the HTML for each item
  template: function (item, element, data) {
    var html = "<img class='timeline-image' src='https://via.placeholder.com/40/" + item.imageColor + "'><div>" + item.content + "</div>"
    return html;
  },
  // Using a template requires any attributes to be whitelisted to prevent XSS
  // More details at https://github.com/visjs/vis-timeline/pull/1010
  xss: {
    disabled: false,
    filterOptions: {
      whiteList: { img: ['src', 'class'], div: 'class' }
    },
  },
};

// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
body,
html {
  font-family: sans-serif;
}

/* 
Timeline image is defined with a fixed height and width.
When the timeline loads it determines the size of items
then uses this to place them, as the images won't be 
loaded at this point the size must be set to ensure the 
spacing is correct
*/
.timeline-image {
  height: 40px;
  width: 40px
}
<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>

于 2022-01-11T20:29:27.493 回答