Vis JS时间轴范围元素自定义绘制

Question

我发现vis.js非常有用，但是现在需要在时间轴中使用的范围元素的边缘（开始/结束）添加自定义“符号”（向上指示器，向下指示器等）。

我可以在其他元素之前/之后添加单独的元素，但这需要付出更多的努力，并且堆叠会受到影响等。 或者...我可以将HTML文本/符号放置在具有CSS的表内，强制其到元素的开始/结尾，但这似乎并不总是正确显示。

解决此问题的建议方法是什么？

Answer 1

您应在用于渲染范围项目的选项中提供模板功能。

您的模板函数返回的内容可以是任何有效的HTML，因此您可以使用div，表格等来添加和放置多余的符号。

文档：

https://visjs.org/docs/timeline/#Templates

  

时间轴支持用于格式化项目内容的模板。可以使用任何模板引擎（例如把手或胡须），并且还可以手动构建HTML。在选项中，可以提供模板处理程序。该处理程序是一个函数，该函数接受项目的数据作为第一个参数，将item元素作为第二个参数，将编辑后的数据作为第三个参数，并输出格式化的HTML。

示例：

var options = {
  template: function (item, element, data) {
    return '<h1>' + item.header + data.moving?' '+ data.start:'' + '</h1><p>' + item.description + '</p>';
  },
  onMoving: function (item, callback) {
    item.moving = true;
  }
};