首页 > 其他分享 >vis.js条形图(2)

vis.js条形图(2)

时间:2024-04-22 10:55:22浏览次数:18  
标签:00 06 end js vis var 2014 条形图

  • 代码案例
<!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 00:00:00", end: "2014-06-13 00:00:00", y: 10 },
    { x: "2014-06-13 00:00:00", end: "2014-06-14 00:00:00", y: 15 },
    { x: "2014-06-15 00:00:00", end: "2014-06-16 00:00:00", y: 14 },
    { x: "2014-06-16 00:00:00", end: "2014-06-17 00:00:00", y: 17 },
    { x: "2014-06-17 00:00:00", end: "2014-06-18 00:00:00", y: 20 },
    { x: "2014-06-18 00:00:00", end: "2014-06-25 00:00:00", y: 25 },
    ];

    var dataset = new vis.DataSet(items);
    var options = {
    style: "bar",
    drawPoints: false,
    dataAxis: {
        icons: true,
    },
    orientation: "top",
    start: "2014-06-05",    // x轴区间
    end: "2014-06-30",
    };
    var graph2d = new vis.Graph2d(container, items, options);

</script>
</body>
</html>
  • 效果图
点击查看详情

标签:00,06,end,js,vis,var,2014,条形图
From: https://www.cnblogs.com/dogleftover/p/18150208

相关文章

  • Visual Studio用指定编码打开文件
    简介打开祖传代码时,VisualStudio2022没有正确选择编码方式,导致文件乱码,无法编译。错误重现上图点击“确定”,打开后看到如下乱码:正确的打开方式下图点右键,选“打开方式”:下土中选“带编码功能的C#编辑器”:下图默认选中了“自动检测”经过一番尝试,上图中的“编......
  • vis.js自定义轴
    代码案例<!doctypehtml><html><head><title>Timeline</title><scripttype="text/javascript"src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>......
  • vis.js条形图
    代码案例<!doctypehtml><html><head><title>Timeline</title><scripttype="text/javascript"src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>......
  • js数组转成树形结构
    js将数组转成对应的树形结构:functiontransformArrayToObject(array){ constresult={}; array.forEach(item=>{ const{ id, name, pid, flag }=item; if(pid==0){ result[name]={ id, flag, pid } }else{ transfo......
  • input js 只能输入数字和两位小数
    functiononlyNumber(obj){//得到第一个字符是否为负号vart=obj.value.charAt(0);//先把非数字的都替换掉,除了数字和.和-号obj.value=obj.value.replace(/[^\d\.]/g,'');//前两位不能是0加数字obj.value=obj.value.replace(/^0\d[0-9]*/g,'');......
  • json模块
    【一】什么是序列化将Python中的字典、列表、元组...转换成字符串类型如果使用str强制转换数据类型,造成的后果就是转换后的字符串无法转回Python对象【二】什么是反序列化将字符串类型的数据转换成Python对象(列表、字典、元组...)能将python对象转为字符串-->字符串......
  • 用 Python(PyVISA) 实现仪器自动化
    本文介绍一个远程仪器控制的例子,包含一些Python脚本实现自动在示波器上进行简单的测量。Python介绍Python是免费和开源的,它为核心开发人员提供了责任、庞大的支持基础以及Python用户检查和改进其代码库的能力。Python有很多包用来扩展了Python的基本功能。Python的包可......
  • 【js】两个数组对象合并成一个树结构的数据
    1模板2/**3*合并两个数组,将岗位信息按照部门进行分组4*@param{Array}array1岗位信息数组,每个岗位包含部门ID(deptId)、岗位ID(postId)和岗位名称(postName)5*@param{Array}array2部门信息数组,每个部门包含部门ID(id)和部门名称(label)6*@returns{Arr......
  • 30 天精通 RxJS (27):简易实作 Observable(二)
    前一篇文章我们已经完成了基本的observable以及Observer的简易实现,这篇文章我们会接续上一篇的内容实现简易的Observable类别,以及一个creationoperator和一个transformoperator。建立简易Observable类别这是我们上一篇文章写的建立observable实例的函数func......
  • 前端资源共享方案对比-笔记:iframe/JS-SDK/微前端
    vue2异步加载之前说过,vue3还是之前的方法,只是把 i18n.setLocaleMessage改为i18n.global.setLocaleMessage但是本文还是详细说一遍:为什么需要异步加载语言包主要还是缩小提代码包,没有按需加载前,语言包内容太多好几屏幕全部是,虽然从webpack-analysis看图里面占比可以忽略不计......