Vis js时间线范围元素自定义绘制

Posted 2023-05-08

【中文标题】Vis js时间线范围元素自定义绘制

【英文标题】：Vis js timeline range element custom draw

【发布时间】：2019-11-11 15:52:45

【问题描述】：

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

我可以在其他元素之前/之后添加单独的元素，但这需要更多的努力并且会影响堆叠等。 或者...我可以将 html 文本/符号放在表格中，并使用 css 将其强制到元素的开头/结尾，但这似乎并不总是正确显示。

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

【参考方案1】：

您应该在将呈现您的范围项目的选项中提供一个模板函数。

您的模板函数返回的内容可以是任何有效的 HTML，因此您可以使用 div、表格等来添加和定位额外的符号。

文档：

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

时间轴支持模板来格式化项目内容。可以使用任何模板引擎（例如把手或小胡子），也可以手动构建 HTML。在选项中，可以提供一个模板处理程序。该处理程序是一个函数，接受项目的数据作为第一个参数，项目元素作为第二个参数，编辑后的数据作为第三个参数，并输出格式化的 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;
  
;