首页 > 其他分享 >vis.js滚动和排序

vis.js滚动和排序

时间:2024-04-23 09:11:39浏览次数:25  
标签:12 06 js 15 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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.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 },
    { x: "2014-06-11", y: 100 },
    { x: "2014-06-12", y: 250 },
    { x: "2014-06-13", y: 300 },
    { x: "2014-06-14", y: 100 },
    { x: "2014-06-15", y: 150 },
    { x: "2014-06-16", y: 300 },
    { x: "2014-06-11", y: 400 },
    { x: "2014-06-12", y: 450 },
    { x: "2014-06-13", y: 400 },
    { x: "2014-06-14", y: 500 },
    { x: "2014-06-15", y: 420 },
    { x: "2014-06-16", y: 600 },
    { x: "2014-06-11", y: 810 },
    { x: "2014-06-12", y: 825 },
    { x: "2014-06-13", y: 830 },
    { x: "2014-06-14", y: 810 },
    { x: "2014-06-15", y: 815 },
    { x: "2014-06-16", y: 900 },
    ];

    var dataset = new vis.DataSet(items);
    var options = {
    legend: true,
    sort: false,
    defaultGroup: "doodle",
    graphHeight: "1500px",
    height: "500px",
    start: "2014-06-10",
    end: "2014-06-18",
    };
    var graph2d = new vis.Graph2d(container, dataset, options);

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

标签:12,06,js,15,vis,var,2014,排序
From: https://www.cnblogs.com/dogleftover/p/18152057

相关文章

  • 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>......
  • 30 天精通 RxJS (31):如何 Debug?
    Debug一直是RxJS的难题,原因是当我们使用RxJS后,代码就会变得高度抽象化;实际上抽象并不是什么坏事,抽象会让代码显得简洁、干净,但同时也带来了除错上的困难。在编写程序时,我们都会希望代码是简洁且可读的。但当我们用简洁的代码来处理复杂的问题,就表示我们的代码会变得......
  • 30 天精通 RxJS (30):Cold & Hot Observable
    HotObservable跟ColdObservable的差别,其实就是资料源(DataSource)在Observable内部建立还是外部建立。在RxJS中很常会看到ColdObservable跟HotObservable这两个名词,其实他们是在区分不同行为的Observable,所谓的ColdObservable就是指每次订阅都是独立的......
  • 30 天精通 RxJS (29):30 天感言
    30天悄悄的就过了,这30篇的文章基本上已经把RxJS一个核心三个重点(Observable+Observer+Subject+Scheduler)以及各个operators几乎也都有写到。最开始写这个系列的文章是希望能让RxJS的学习曲线降低,所以文章的前后顺序及内容都是特别规划过的,不知道我到底是不是......
  • 30 天精通 RxJS (28):Scheduler 基本观念
    不晓得读者们还记不记得,我们在前面的文章中有提到Scheduler是为了解决RxJS衍生的最后一个问题,而我们现在就在揭晓这个谜底。其实RxJS用久了之后就会发现Observable有一个优势是可以同时处理同步和非同步行为,但这个优势也带来了一个问题,就是我们常常会搞不清处现在的......
  • StreamJsonRpc.ConnectionLostException 在请求完成之前, 与远程方的 JSON-RPC 连接已
    今天电脑重启之后,发现visualstudio2022的智能提示与报错经常性不好用,不光不能在正常时候提示代码错误信息,甚至在编译过后也不提示错误。反复重启,刚开始正常,隔一会儿就会提示什么什么功能不可用,点开打开详情,提示:StreamJsonRpc.ConnectionLostException:在请求完成之前,与远......
  • 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>......
  • 排序3-插入排序
    排序3-插入排序插入排序把排序对象分成已排序和未排序两个部分,每次选取未排序部分的首元素,将它插入已排序部分的合适部分插入排序(正序)//插入排序voidinsertSort(intarr[],intlength){intj;for(inti=1;i<length;i++){//i是无序部分首元素的下标......
  • 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>......