<!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: sans-serif;
} */
body,
html,
select {
font-family: sans-serif;
font-size: 11pt;
}
#visualization {
width: 600px;
}
</style>
</head>
<body>
<p>
<label for="locale">Select a locale:</label>
<select id="locale">
<option value="en" selected="">en</option>
<option value="it">it</option>
<option value="fr">fr</option>
<option value="nl">nl</option>
<option value="de">de</option>
</select>
</p>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-11", y: 10 },
{ x: "2014-06-12", y: 25 },
{ x: "2014-06-13", y: 30 },
{ x: "2014-06-14", y: 10 },
{ x: "2014-06-15", y: 15 },
{ x: "2014-06-16", y: 30 },
];
var dataset = new vis.DataSet(items);
var options = {
start: "2014-06-10",
end: "2014-06-18",
};
var graph2d = new vis.Graph2d(container, dataset, options);
// update the locale when changing the select box value
var select = document.getElementById("locale");
select.onchange = function () {
graph2d.setOptions({
locale: this.value,
});
};
select.onchange();
</script>
</body>
</html>
点击查看详情
