如何将自定义数据包含到 vis.js 时间线项目中

Question

我一直在使用 vis.js 时间轴来保持项目的时间顺序。

我使用以下方法添加时间线项目：

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'
});

但是，我无法将任何自定义数据添加到此添加函数中。

我如何添加自定义数据，以便它可以在下面的 div 中保存诸如 entity-uuid=xxxx 之类的信息？

<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>

Answer 1

您可以将内容更新为您想要的完整 HTML，包括图像和文本，然后将其存储在数据集中。名为 'Custom Styling' here 的 vis.js 示例使用了这种方法。

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

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

下面的 post 和 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>

如何将自定义数据包含到 vis.js 时间线项目中

How to include custom data into vis.js timeline item

javascript

timeline

vis.js

vis.js-timeline

vis-timeline