<!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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.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: sans-serif;
}
#visualization {
width: 600px;
}
</style>
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById("visualization");
var items = [];
for (var i = 0; i < 100; i++) {
items.push({
x: new Date("2014-06-11").valueOf() + Math.floor(Math.random() * 30000),
y: 500 + Math.random() * 100,
});
}
var dataset = new vis.DataSet(items);
var options = {
sort: false,
sampling: false,
style: "points",
dataAxis: {
left: {
range: {
min: 300,
max: 800,
},
},
},
drawPoints: {
enabled: true,
size: 6,
style: "circle", // square, circle
},
defaultGroup: "Scatterplot",
height: "600px",
};
var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>
点击查看详情
