展开
拓展 关闭
订阅号推广码
GitHub
视频
公告栏 关闭

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: sans-serif;
}
#visualization {
width: 600px;
}
</style>
</head>
<body>
<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 = {
style: "bar",
barChart: { width: 50, align: "center" }, // align: left, center, right
drawPoints: false,
dataAxis: {
icons: true,
},
orientation: "top",
start: "2014-06-10", // 打开后默认显示的区间
end: "2014-06-18",
};
var graph2d = new vis.Graph2d(container, items, options);
</script>
</body>
</html>
  • 效果图
点击查看详情

posted @   DogLeftover  阅读(12)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
· 全程使用 AI 从 0 到 1 写了个小工具
· 从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
历史上的今天:
2022-04-22 Spring MVC入门(七):HttpMessageConverter
2022-04-22 Spring MVC入门(六):RESTful
点击右上角即可分享
微信分享提示