visjs实现柱状图时间线图表效果代码

代码语言:html

所属分类:图表

代码描述:visjs实现柱状图时间线图表效果代码

代码标签: visjs 柱状图 时间线 图表

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vis.4.21.0.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vis.4.21.0.js"></script>



</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: "Angular/Angular2"
 });
 groups.add({
     id: 1,
     content: "React"
 });
 var items = [{
     "x": "2014-08-01",
     "group": 0,
     "y": 19
 }, {
     "x": "2014-08-01",
     "group": 1,
     "y": 7
 }, {
     "x": "2014-08-08",
     "group": 0,
     "y": 17
 }, {
     "x": "2014-08-08",
     "group": 1,
     "y": 1
 }, {
     "x": "2014-08-15",
     "group": 0,
     "y": 9
 }, {
     "x": "2014-08-15",
     "group": 1,
     "y": 4
 }, {
     "x": "2014-08-22",
     "group": 0,
     "y": 26
 }, {
     "x": "2014-08-22",
     "group": 1,
     "y": 0
 }, {
     "x": "2014-08-29",
     "group": 0,
     "y": 1
 }, {
     "x": "2014-08-29",
     "group": 1,
     "y": 6
 }, {
     "x": "2014-09-05",
     "group": 0,
     "y": 12
 }, {
     "x": "2014-09-05",
     "group": 1,
     "y": 0
 }, {
     "x": "2014-09-12",
     "group": 0,
     "y": 13
 }, {
     "x": "2014-09-12",
     "group": 1,
     "y": 9
 }, {
     "x": "2014-09-19",
     "group": 0,
     "y": 4
 }, {
     "x": "2014-09-19",
     "group": 1,
     "y": 16
 }, {
     "x": "2014-09-26",
     "group": 0,
     "y": 5
 }, {
     "x": "2014-09-26",
     "group": 1,
     "y": 8
 }, {
     "x": "2014-10-03",
     "group": 0,
     "y": 18
 }, {
     "x": "2014-10-03",
     "group": 1,
     "y": 4
 }, {
     "x": "2014-10-10",
     "group": 0,
     "y": 12
 }, {
     "x": "2014-10-10",
     "group": 1,
     "y": 6
 }, {
     "x": "2014-10-17",
     "group": 0,
     "y": 27
 }, {
     "x": "2014-10-17",
     "group": 1,
     "y": 17
 }, {
     "x": "2014-10-24",
     "group": 0,
     "y": 8
 }, {
     "x": "2014-10-24",
     "group": 1,
     "y": 10
 }, {
     "x": "2014-10-31",
     "group": 0,
     "y": 31
 }, {
     "x": "2014-10-31",
     "group": 1,
     "y": 22
 }, {
     "x": "2014-11-07",
     "group": 0,
     "y": 17
 }, {
     "x": "2014-11-07",
     "group": 1,
     "y": 11
 }, {
     "x": "2014-11-14",
     "group": 0,
     "y": 12
 }, {
     "x": "2014-11-14",
     "group": 1,
     "y": 7
 }, {
     "x": "2014-11-21",
     "group": 0,
     "y": 28
 }, {
     "x": "2014-11-21",
     "group": 1,
     "y": 10
 }, {
     "x": "2014-11-28",
     "group": 0,
     "y": 8
 }, {
     "x": "2014-11-28",
     "group": 1,
     "y": 10
 }, {
     "x": "2014-12-05",
     "group": 0,
     "y": 12
 }, {
     "x": "2014-12-05",
     "group": 1,
     "y": 10
 }, {
     "x": "2014-12-12",
     "group": 0,
     "y": 16
 }, {
     "x": "2014-12-12",
     "group": 1,
     "y": 0
 }, {
     "x": "2014-12-19",
     "group": 0,
     "y": 24
 }, {
     "x": "2014-12-19",
     "group": 1,
     "y": 7
 }, {
     "x": "2015-01-02",
     "group": 0,
     "y": 15
 }, {
     "x": "2015-01-02",
     "group": 1,
     "y": 8
 }, {
     "x": "2015-01-09",
     "group": 0,
     "y": 3
 }, {
     "x": "2015-01-09",
     "group": 1,
     "y": 21
 }, {
     "x": "2015-01-16",
     "group": 0,
     "y": 15
 }, {
     "x": "2015-01-16",
     "group": 1,
     "y": 19
 }, {
     "x": "2015-01-23",
     "group": 0,
     "y": 7
 }, {
     "x": "2015-01-23",
     "group": 1,
     "y": 6
 }, {
     "x": "2015-01-30",
     "group": 0,
     "y": 11
 }, {
     "x": "2015-01-30",
     "group": 1,
     "y": 23
 }, {
     "x": "2015-02-06",
     "group": 0,
     "y": 5
 }, {
     "x": "2015-02-06",
     "group": 1,
     "y": 25
 }, {
     "x": "2015-02-12",
     "group": 0,
     "y": 18
 }, {
     "x": "2015-02-12",
     "group": 1,
     "y": 12
 }, {
     "x": "2015-02-20",
     "group": 0,
     "y": 3
 }, {
     "x": "2015-02-20",
     "group": 1,
     "y": 8
 }, {
     "x": "2015-02-27",
     "group": 0,
     "y": 30
 }, {
     "x": "2015-02-27",
     "group": 1,
     "y": 13
 }, {
     "x": "2015-03-06",
     "group": 0,
     "y": 31
 }, {
     "x": "2015-03-06",
     "group": 1,
     "y": 17
 }, {
     "x": "2015-03-13",
     "group": 0,
     "y": 14
 }, {
     "x": "2015-03-13",
     "group": 1,
     "y": 7
 }, {
     "x": "2015-03-20",
     "group": 0,
     "y": 8
 }, {
     "x": "2015-03-20",
     "group": 1,
     "y": 11
 }, {
     "x": "2015-03-27",
     "group": 0,
     "y": 7
 }, {
     "x": "2015-03-27",
     "group": 1,
     "y": 15
 }, {
     "x": "2015-04-03",
     "group": 0,
     "y": 17
 }, {
     "x": "2015-04-03",
     "group": 1,
     "y": 13
 }, {
     "x": "2015-04-10",
     "group": 0,
     "y": 21
 }, {
     "x": "2015-04-10",
     "group": 1,
     "y": 2
 }, {
     "x": "2015-04-17",
     "group": 0,
     "y": 6
 }, {
     "x": "2015-04-17",
     "group": 1,
     "y": 8
 }, {
     "x": "2015-04-24",
     "group": 0,
     "y": 15
 }, {
     "x": "2015-04-24",
     "group": 1,
     "y": 4
 }, {
     "x": "2015-05-01",
     "group": 0,
     "y": 9
 }, {
     "x": "2015-05-01",
     "group": 1,
     "y": 16
 }, {
     "x": "2015-05-08",
     "group": 0,
     "y": 7
 }, {
     "x": "2015-05-08",
     "group": 1,
     "y": 19
 }, {
     "x": "2015-05-15",
     "group": 0,
     "y": 11
 }, {
     "x": "2015-05-15",
     "group": 1,
     "y": 9
 }, {
     "x": "2015-05-22",
     "group": 0,
     "y": 0
 }, {
     "x": "2015-05-22",
     "group": 1,
     "y": 20
 }, {
     "x": "2015-05-29",
     "group": 0,
     "y": 15
 }, {
     "x": "2015-05-29",
     "group": 1,
     "y": 6
 }, {
     "x": "2015-06-05",
     "group": 0,
     "y": 15
 }, {
     "x": "2015-06-05",
     "group": 1,
     "y": 8
 }, {
     "x": "2015-06-12",
     "group": 0,
     "y": 13
 }, {
     "x": "2015-06-12",
     "group": 1,
     "y": 18
 }, {
     "x": "2015-06-19",
     "group": 0,
     "y": 22
 }, {
     "x": "2015-06-19",
     "group": 1,
     "y": 5
 }, {
     "x": "2015-06-26",
     "group": 0,
     "y": 9
 }, {
     "x": "2015-06-26",
     "group": 1,
     "y": 36
 }, {
     "x": "2015-07-03",
     "group": 0,
     "y": 18
 }, {
     "x": "2015-07-03",
     "group": 1,
     "y": 18
 }, {
     "x": "2015-07-10",
     "group": 0,
     "y": 12
 }, {
     "x": "2015-07-10",
     "group": 1,
     "y": 23
 }, {
     "x": "2015-07-17",
     "group": 0,
     "y": 23
 }, {
     "x": "2015-07-17",
     "group": 1,
     "y": 13
 }, {
     "x": "2015-07-24",
     "group": 0,
     "y": 0
 }, {
     "x": "2015-07-24",
     "group": 1,
     "y": 22
 }, {
     "x": "2015-07-31",
     "group": 0,
     "y": 8
 }, {
     "x": "2015-07-31",
     "group": 1,
     "y": 14
 }, {
     "x": "2015-08-07",
     "group": 0,
   .........完整代码请登录后点击上方下载按钮下载查看

网友评论0