vis.js时间轴数据处理

代码案例

 <!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">
    body,
    html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }
 
    textarea {
      width: 400px;
      height: 200px;
    }
 
    .buttons {
      margin: 20px 0;
    }
 
    .buttons input {
      padding: 10px;
    }
    #visualization {
      width: 500px;
    }
 
  </style>
</head>
<body>
  <div id="visualization"></div>
  <div class="buttons">
    <input
      type="button"
      id="load"
      value="↓ Load"
      title="Load data from textarea into the Timeline"
    />
    <input
      type="button"
      id="save"
      value="↑ Save"
      title="Save data from the Timeline into the textarea"
    />
  </div>
  <textarea id="data">
    [
      {
        "id": 1,
        "content": "item 1",
        "start": "2014-01-01T01:00:00"
      },
      {
        "id": 2,
        "content": "item 2",
        "start": "2014-01-01T02:00:00"
      },
      {
        "id": 3,
        "content": "item 3",
        "start": "2014-01-01T03:00:00"
      },
      {
        "id": 4,
        "content": "item 4",
        "start": "2014-01-01T04:00:00",
        "end": "2014-01-01T04:30:00"
      },
      {
        "id": 5,
        "content": "item 5",
        "start": "2014-01-01T05:00:00",
        "type": "point"
      },
      {
        "id": 6,
        "content": "item 6",
        "start": "2014-01-01T06:00:00"
      }
    ]
  </textarea>
  
<script type="text/javascript">
  var txtData = document.getElementById("data");
  var btnLoad = document.getElementById("load");
  var btnSave = document.getElementById("save");
 
  // Create an empty DataSet.
  // This DataSet is used for two way data binding with the Timeline.
  var items = new vis.DataSet();
 
  // create a timeline
  var container = document.getElementById("visualization");
  var options = {
    editable: true,
  };
  var timeline = new vis.Timeline(container, items, options);
 
  function loadData() {
    // get and deserialize the data
    var data = JSON.parse(txtData.value);
 
    // update the data in the DataSet
    //
    // Note: when retrieving updated data from a server instead of a complete
    // new set of data, one can simply update the existing data like:
    //
    //   items.update(data);
    //
    // Existing items will then be updated, and new items will be added.
    items.clear();
    items.add(data);
 
    // adjust the timeline window such that we see the loaded data
    timeline.fit();
  }
  btnLoad.onclick = loadData;
 
  function saveData() {
    // get the data from the DataSet
    //
    // Note that we specify the output type of the fields start and end
    // as "ISODate", which is safely serializable. Other serializable types
    // are "Number" (unix timestamp), "ASPDate" or "String" (without timezone!).
    //
    // Alternatively, it is possible to configure the DataSet to convert
    // the output automatically to ISODates like:
    //
    //   var options = {
    //     type: {start: 'ISODate', end: 'ISODate'}
    //   };
    //   var items = new vis.DataSet(options);
    //   // now items.get() will automatically convert start and end to ISO dates.
    //
    var data = items.get({
      type: {
        start: "ISODate",
        end: "ISODate",
      },
    });
 
    // serialize the data and put it in the textarea
    txtData.value = JSON.stringify(data, null, 2);
  }
  btnSave.onclick = saveData;
 
  // load the initial data
  loadData();
 
</script>
</body>
</html>

效果图

点击查看详情

posted @ 2024-04-24 16:21 DogLeftover 阅读(93) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· vis.js时间轴

· vis.js自定义轴

· Vue【原创】时间轴【time-axis】&【date-axis】

· vuejs+echarts实现时间轴

· 日期数组时间轴显示

阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术

历史上的今天：
2022-04-24 Mybatis入门（二）：@Param源码
2022-04-24 Mybatis入门（一）：入门案例

vis.js时间轴数据处理

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	<!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">
	body,
	html {
	font-family: arial, sans-serif;
	font-size: 11pt;
	}

	textarea {
	width: 400px;
	height: 200px;
	}

	.buttons {
	margin: 20px 0;
	}

	.buttons input {
	padding: 10px;
	}
	#visualization {
	width: 500px;
	}

	</style>
	</head>
	<body>
	<div id="visualization"></div>
	<div class="buttons">
	<input
	type="button"
	id="load"
	value="↓ Load"
	title="Load data from textarea into the Timeline"
	/>
	<input
	type="button"
	id="save"
	value="↑ Save"
	title="Save data from the Timeline into the textarea"
	/>
	</div>
	<textarea id="data">
	[
	{
	"id": 1,
	"content": "item 1",
	"start": "2014-01-01T01:00:00"
	},
	{
	"id": 2,
	"content": "item 2",
	"start": "2014-01-01T02:00:00"
	},
	{
	"id": 3,
	"content": "item 3",
	"start": "2014-01-01T03:00:00"
	},
	{
	"id": 4,
	"content": "item 4",
	"start": "2014-01-01T04:00:00",
	"end": "2014-01-01T04:30:00"
	},
	{
	"id": 5,
	"content": "item 5",
	"start": "2014-01-01T05:00:00",
	"type": "point"
	},
	{
	"id": 6,
	"content": "item 6",
	"start": "2014-01-01T06:00:00"
	}
	]
	</textarea>

	<script type="text/javascript">
	var txtData = document.getElementById("data");
	var btnLoad = document.getElementById("load");
	var btnSave = document.getElementById("save");

	// Create an empty DataSet.
	// This DataSet is used for two way data binding with the Timeline.
	var items = new vis.DataSet();

	// create a timeline
	var container = document.getElementById("visualization");
	var options = {
	editable: true,
	};
	var timeline = new vis.Timeline(container, items, options);

	function loadData() {
	// get and deserialize the data
	var data = JSON.parse(txtData.value);

	// update the data in the DataSet
	//
	// Note: when retrieving updated data from a server instead of a complete
	// new set of data, one can simply update the existing data like:
	//
	// items.update(data);
	//
	// Existing items will then be updated, and new items will be added.
	items.clear();
	items.add(data);

	// adjust the timeline window such that we see the loaded data
	timeline.fit();
	}
	btnLoad.onclick = loadData;

	function saveData() {
	// get the data from the DataSet
	//
	// Note that we specify the output type of the fields start and end
	// as "ISODate", which is safely serializable. Other serializable types
	// are "Number" (unix timestamp), "ASPDate" or "String" (without timezone!).
	//
	// Alternatively, it is possible to configure the DataSet to convert
	// the output automatically to ISODates like:
	//
	// var options = {
	// type: {start: 'ISODate', end: 'ISODate'}
	// };
	// var items = new vis.DataSet(options);
	// // now items.get() will automatically convert start and end to ISO dates.
	//
	var data = items.get({
	type: {
	start: "ISODate",
	end: "ISODate",
	},
	});

	// serialize the data and put it in the textarea
	txtData.value = JSON.stringify(data, null, 2);
	}
	btnSave.onclick = saveData;

	// load the initial data
	loadData();

	</script>
	</body>
	</html>