首页 > 其他分享 >vis.js时间轴

vis.js时间轴

时间:2024-04-24 15:48:30浏览次数:12  
标签:04 start js content vis 时间轴 item 2014 id

  • 代码案例
<!doctype html>
<html>
<head>
  <title>Timeline</title>
  <script type="text/javascript" src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>
  <link href="https://unpkg.com/vis-timeline@latest/styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    #visualization {
      width: 600px;
      height: 200px;
      border: 1px solid lightgray;
    }
  </style>
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
  // 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([
    {id: 1, content: 'item 1', start: '2014-04-20'},
    {id: 2, content: 'item 2', start: '2014-04-14'},
    {id: 3, content: 'item 3', start: '2014-04-18'},
    {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
    {id: 5, content: 'item 5', start: '2014-04-25'},
    {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
  ]);

  // Configuration for the Timeline
  var options = {};

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>
  • 效果图
点击查看详情

标签:04,start,js,content,vis,时间轴,item,2014,id
From: https://www.cnblogs.com/dogleftover/p/18155577

相关文章

  • 银行卡归属地查询JSON
    [{"bankName":"中国邮政储蓄银行","bankCode":"PSBC","patterns":[{"reg":"^(621096|621098|622150|622151|622181|622188|622199|955100|6210......
  • 修改元素样式报错:Cannot set properties of undefined (setting 'visibility')
    1、正常书写代码如下:<divclass="cl"><divid="mask"><spanid="close">X</span></div></div><!--JS代码如下--><script>letclose=document.getElement......
  • vis.js工具提示3d图形
    代码案例<!DOCTYPEhtml><html><head><title>Graph3Ddemo</title><style>body{font:10ptarial;}div#info{width:600px;text-align:center;......
  • vis.js每个点的样式3d图形
    代码案例<!DOCTYPEhtml><html><head><title>Graph3Ddemo</title><style>body{font:10ptarial;}</style><scripttype="text/javascript"src=......
  • vis.js样式3d图形
    代码案例<!DOCTYPEhtml><html><head><title>Graph3Ddemo</title><style>body{font:10ptarial;}</style><scripttype="text/javascript"src=......
  • vis.js线条3d图形
    代码案例<!DOCTYPEhtml><html><head><title>Graph3Ddemo</title><style>body{font:10ptarial;}</style><scripttype="text/javascript"src=......
  • vis.js自定义标签3d图形
    代码案例<!DOCTYPEhtml><html><head><title>Graph3Ddemo</title><style>body{font:10ptarial;}</style><scripttype="text/javascript"src=......
  • vis.js动画移动点3d图形
    代码案例<!DOCTYPEhtml><html><head><title>Graph3Ddemo</title><style>body{font:10ptarial;}</style><scripttype="text/javascript"src=......
  • Docker(十六)-Docker的daemon.json的作用
    docker安装后默认没有daemon.json这个配置文件,需要进行手动创建。配置文件的默认路径:/etc/docker/daemon.json一般情况,配置文件daemon.json中配置的项目参数,在启动参数中同样适用,有些可能不一样(具体可以查看官方文档),但需要注意的一点,配置文件中如果已经有某个配置项,则无法在启动......
  • Nuxtjs如果使用useHead()导入swiper,除了在onMounted调用,切换报错前面使用 await next
     注意:awaitnextTick();如果没用,vue切换的时候可能有问题<scriptlang="ts"setup>import{DArrowRight}from"@element-plus/icons-vue";useHead({script:[{src:"/script/swiper.js",},],link:[{......