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

vis.js条形图

时间:2024-04-22 10:24:14浏览次数:16  
标签:10 06 items 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", 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>
  • 效果图
点击查看详情

标签:10,06,items,js,vis,var,2014,条形图
From: https://www.cnblogs.com/dogleftover/p/18150098

相关文章

  • 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看图里面占比可以忽略不计......
  • Visual Studio 常用快捷键
    常用General按Press功能FunctionCtrl+Shift+P,F1显示命令面板ShowCommandPaletteCtrl+P快速打开QuickOpenCtrl+Shift+N新窗口/实例Newwindow/instanceCtrl+Shift+W关闭窗口/实例Closewindow/instanceCtrl+,用户设置UserSett......
  • next.js app目录 i18n国际化简单实现
    最近在用next写一个多语言的项目,找了好久没找到简单实现的教程,实践起来感觉都比较复杂,最后终于是在官方文档找到了,结合网上找到的代码demo,终于实现了,在这里简单总结一下。此教程适用于比较简单的项目实现,如果你是刚入门next,并且不想用太复杂的方式去实现一个多语言项目,那么这个教......
  • 何时使用JSX.Element vs ReactNode vs ReactElement?
    在React开发中,JSX.Element、ReactNode和ReactElement这三个类型分别代表不同级别的React组件树中的元素,它们在不同的上下文中有着各自的用途。以下是它们的区别及使用场景的概述:JSX.Element定义:JSX.Element是当你编写JSX语法时,编译器(如Babel)将这些语法转化为等效的Reac......