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": 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