首页 > 其他分享 >vis.js自定义轴

vis.js自定义轴

时间:2024-04-22 10:45:07浏览次数:23  
标签:group 自定义 js vis groups 2014 var 06

  • 代码案例
<!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 groups = new vis.DataSet();
    groups.add({ id: 0, content: "group0" });
    groups.add({ id: 1, content: "group1" });
    groups.add({
    id: 2,
    content: "group2",
    options: { yAxisOrientation: "right" },
    });

    var items = [
    { x: "2014-06-11", y: 10, group: 0 },
    { x: "2014-06-12", y: 25, group: 0 },
    { x: "2014-06-13", y: 30, group: 0 },
    { x: "2014-06-14", y: 10, group: 0 },
    { x: "2014-06-15", y: 15, group: 0 },
    { x: "2014-06-16", y: 30, group: 0 },
    { x: "2014-06-11", y: 12, group: 1 },
    { x: "2014-06-12", y: 15, group: 1 },
    { x: "2014-06-13", y: 34, group: 1 },
    { x: "2014-06-14", y: 24, group: 1 },
    { x: "2014-06-15", y: 5, group: 1 },
    { x: "2014-06-16", y: 12, group: 1 },
    { x: "2014-06-11", y: 22, group: 2 },
    { x: "2014-06-12", y: 14, group: 2 },
    { x: "2014-06-13", y: 24, group: 2 },
    { x: "2014-06-14", y: 21, group: 2 },
    { x: "2014-06-15", y: 30, group: 2 },
    { x: "2014-06-16", y: 18, group: 2 },
    ];

    var dataset = new vis.DataSet(items);
    var options = {
    style: "bar",
    barChart: { width: 50, align: "center", sideBySide: true }, // align: left, center, right
    drawPoints: true,
    dataAxis: {
        left: {
        range: { min: -5, max: 40 },    // y轴区间
        },
        right: {
        range: { min: -5 },
        },
        icons: true,
    },
    orientation: "top",
    start: "2014-06-10",    // x轴区间
    end: "2014-06-18",
    };
    var graph2d = new vis.Graph2d(container, items, groups, options);

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

标签:group,自定义,js,vis,groups,2014,var,06
From: https://www.cnblogs.com/dogleftover/p/18150176

相关文章

  • 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......
  • sublime text添加自定义代码片段
    效果展示建立步骤如图新建代码片段填写内容xml的标签形式。tabTrigger和vscode内的prefix一样,就是触发提示的代码。<![CDATA[内部既是我们要的代码。${1:}表示光标首先停在的位置${1:xxx}即表示默认文字为xxx,如果是${2:}则按一下tab就跳到2的位置。description表......
  • 自定义视频神器,《小星星去重播放器》助您轻松解决视频画面重复问题,让您的无人直播更稳
    你是否还在靠剪辑来去重视频?是否还在通过手动点击来进行循环播放?是否还在通过拼接来增加视频时长?快来看看这款只需要简单的设置就能对视频进行全面去重,专为企业展播和无人直播设计的工具——《小星星去重播放器》!视频播放打开已保存的第一个视频/视频管理里添加需要修改的视频......
  • 前端资源共享方案对比-笔记:iframe/JS-SDK/微前端
    vue2异步加载之前说过,vue3还是之前的方法,只是把 i18n.setLocaleMessage改为i18n.global.setLocaleMessage但是本文还是详细说一遍:为什么需要异步加载语言包主要还是缩小提代码包,没有按需加载前,语言包内容太多好几屏幕全部是,虽然从webpack-analysis看图里面占比可以忽略不计......