时间条形图 - AntV

基础条形图

时间条形图

time bar, Gantt chart，时间作为 y 轴的图表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>时间条形图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script>
  var data = [{
    "task": "task0",
    "startTime": "2018-04-18 01:17:12",
    "endTime": "2018-04-18 01:19:10",
    "status": 0
  }, {
    "task": "task1",
    "startTime": "2018-04-18 01:18:15",
    "endTime": "2018-04-18 01:19:20",
    "status": 0
  }, {
    "task": "task2",
    "startTime": "2018-04-18 02:11:32",
    "endTime": "2018-04-18 02:18:50",
    "status": 0
  }, {
    "task": "task3",
    "startTime": "2018-04-18 02:18:50",
    "endTime": "2018-04-18 03:16:38",
    "status": 0
  }, {
    "task": "task4",
    "startTime": "2018-04-18 02:19:48",
    "endTime": "2018-04-18 02:21:57",
    "status": 0
  }, {
    "task": "task5",
    "startTime": "2018-04-18 03:16:38",
    "endTime": "2018-04-18 03:19:38",
    "status": 1
  }, {
    "task": "task6",
    "startTime": "2018-04-18 03:19:38",
    "endTime": "2018-04-18 03:27:49",
    "status": 0
  }, {
    "task": "task7",
    "startTime": "2018-04-18 07:29:37",
    "endTime": "2018-04-18 07:33:01",
    "status": 0
  }, {
    "task": "task8",
    "startTime": "2018-04-18 03:27:49",
    "endTime": "2018-04-18 04:26:05",
    "status": 0
  }, {
    "task": "task9",
    "startTime": "2018-04-18 04:26:05",
    "endTime": "2018-04-18 06:06:36",
    "status": 0
  }, {
    "task": "task10",
    "startTime": "2018-04-18 06:06:36",
    "endTime": "2018-04-18 06:15:15",
    "status": 0
  }, {
    "task": "task11",
    "startTime": "2018-04-18 03:27:49",
    "endTime": "2018-04-18 03:34:50",
    "status": 0
  }];

var values = ['运行成功', '运行失败'];
  data.forEach(function(obj) {
    obj.range = [obj.startTime, obj.endTime];
    obj.status = values[obj.status];
  });

var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight
  });
  chart.source(data);

chart.coord().transpose().scale(1, -1);
  chart.interval().position('task*range').color('status', ['#2FC25B', '#F04864']);
  chart.render();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>时间条形图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body style="background: #1f1f1f;">
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script>G2.Global.setTheme('dark');</script>
<script>
  var data = [{
    "task": "task0",
    "startTime": "2018-04-18 01:17:12",
    "endTime": "2018-04-18 01:19:10",
    "status": 0
  }, {
    "task": "task1",
    "startTime": "2018-04-18 01:18:15",
    "endTime": "2018-04-18 01:19:20",
    "status": 0
  }, {
    "task": "task2",
    "startTime": "2018-04-18 02:11:32",
    "endTime": "2018-04-18 02:18:50",
    "status": 0
  }, {
    "task": "task3",
    "startTime": "2018-04-18 02:18:50",
    "endTime": "2018-04-18 03:16:38",
    "status": 0
  }, {
    "task": "task4",
    "startTime": "2018-04-18 02:19:48",
    "endTime": "2018-04-18 02:21:57",
    "status": 0
  }, {
    "task": "task5",
    "startTime": "2018-04-18 03:16:38",
    "endTime": "2018-04-18 03:19:38",
    "status": 1
  }, {
    "task": "task6",
    "startTime": "2018-04-18 03:19:38",
    "endTime": "2018-04-18 03:27:49",
    "status": 0
  }, {
    "task": "task7",
    "startTime": "2018-04-18 07:29:37",
    "endTime": "2018-04-18 07:33:01",
    "status": 0
  }, {
    "task": "task8",
    "startTime": "2018-04-18 03:27:49",
    "endTime": "2018-04-18 04:26:05",
    "status": 0
  }, {
    "task": "task9",
    "startTime": "2018-04-18 04:26:05",
    "endTime": "2018-04-18 06:06:36",
    "status": 0
  }, {
    "task": "task10",
    "startTime": "2018-04-18 06:06:36",
    "endTime": "2018-04-18 06:15:15",
    "status": 0
  }, {
    "task": "task11",
    "startTime": "2018-04-18 03:27:49",
    "endTime": "2018-04-18 03:34:50",
    "status": 0
  }];

var values = ['运行成功', '运行失败'];
  data.forEach(function(obj) {
    obj.range = [obj.startTime, obj.endTime];
    obj.status = values[obj.status];
  });

var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight
  });
  chart.source(data);

chart.coord().transpose().scale(1, -1);
  chart.interval().position('task*range').color('status', ['#2FC25B', '#F04864']);
  chart.render();
</script>
</body>
</html>

图表简介

time bar, Gantt chart，时间作为 y 轴的图表。

了解更多

图表用法

可以用于表示进度的图表中，常见的是甘特图。

关联图表

条形图

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

关联图表

相关链接