首页 > 其他分享 >vis.js散点图

vis.js散点图

时间:2024-04-23 09:13:21浏览次数:19  
标签:items 散点图 js vis var new Math

  • 代码案例
<!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 = [];
    for (var i = 0; i < 100; i++) {
    items.push({
        x: new Date("2014-06-11").valueOf() + Math.floor(Math.random() * 30000),
        y: 500 + Math.random() * 100,
    });
    }

    var dataset = new vis.DataSet(items);
    var options = {
    sort: false,
    sampling: false,
    style: "points",
    dataAxis: {
        left: {
        range: {
            min: 300,
            max: 800,
        },
        },
    },
    drawPoints: {
        enabled: true,
        size: 6,
        style: "circle", // square, circle
    },
    defaultGroup: "Scatterplot",
    height: "600px",
    };
    var graph2d = new vis.Graph2d(container, dataset, options);

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

标签:items,散点图,js,vis,var,new,Math
From: https://www.cnblogs.com/dogleftover/p/18152041

相关文章

  • 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>......
  • 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>......
  • 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>......