visjs实现柱状图时间线图表效果代码-html代码-BFW代码库

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

代码语言：html

所属分类：图表

代码描述：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&.........完整代码请登录后点击上方下载按钮下载查看