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

vis.js分组并排条形图

时间:2024-04-22 11:57:00浏览次数:22  
标签: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 style="width: 700px; font-size: 14px; text-align: justify">
        <select id="dropdownID">
            <option value="overlap">overlap</option>
            <option value="sideBySide" selected="selected">sideBySide</option>
            <option value="stack">stack</option>
        </select>
    </div>
    <br />

    <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" });

    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",
    stack: false,
    barChart: { width: 50, align: "center", sideBySide: true }, // 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, groups, options);

    var dropdown = document.getElementById("dropdownID");
    dropdown.onchange = update;

    function update() {
    var options = {
        stack: dropdown.value === "stack",
        barChart: { sideBySide: dropdown.value === "sideBySide" },
    };
    graph2d.setOptions(options);
    }

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

标签:group,js,vis,groups,2014,var,06,条形图
From: https://www.cnblogs.com/dogleftover/p/18150351

相关文章

  • 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条形图(2)
    代码案例<!doctypehtml><html><head><title>Timeline</title><scripttype="text/javascript"src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>......
  • 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......