如何仅绘制具有相应 x 轴的 javascript 甘特图

【问题标题】：how to draw a javascript gantt chart with respective of x axis only如何仅绘制具有相应 x 轴的 javascript 甘特图
【发布时间】：2016-08-01 23:51:58
【问题描述】：

我正在寻找像甘特图这样的 javascript 图表，但它不能有 y 轴。 仅针对 x 轴给出的数据。 在这里，我附上了图表的示例设计。 使用 javascript 在所有可用图表中搜索，但我找不到解决方案。

提前感谢您的帮助。

【问题讨论】：

    标签： javascript charts


    【解决方案1】：

    FusionWidgets 是 FusionCharts 库的一部分，可用于渲染甘特图。根据 FusionCharts 的核心理念，它提供了多种属性来根据要求进行配置。请参考docs 来玩弄您的图表。请访问gallery查看更多示例。

    对于上述没有 y 轴名称的要求，ganttWidthPercent 可以设置为100。下面是 so 或 this fiddle demo 的实现。

    FusionCharts.ready(function() {
  var timeShiftChart = new FusionCharts({
    type: 'gantt',
    renderAt: 'chart-container',
    width: '650',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "dateformat": "mm/dd/yyyy",
        "outputdateformat": "hh:mn",
        "caption": "Development Division - Work Schedule",
        "canvasBorderAlpha": "30",
        "ganttWidthPercent": "100",
        "useVerticalScrolling": "0",
        "theme": "fint"
      },
      "categories": [{
        "category": [{
          "start": "7/15/2014 00:00:00",
          "end": "7/15/2014 23:59:59",
          "label": "Today"
        }, {
          "start": "7/16/2014 00:00:00",
          "end": "7/16/2014 23:59:59",
          "label": "Tomorrow"
        }]
      }, {
        "align": "right",
        "category": [{
          "start": "7/15/2014 00:00:00",
          "end": "7/15/2014 05:59:59",
          "label": "6 am"
        }, {
          "start": "7/15/2014 06:00:00",
          "end": "7/15/2014 11:59:59",
          "label": "12 pm"
        }, {
          "start": "7/15/2014 12:00:00",
          "end": "7/15/2014 17:59:59",
          "label": "6 pm"
        }, {
          "start": "7/15/2014 18:00:00",
          "end": "7/15/2014 23:59:59",
          "label": "Midnight"
        }, {
          "start": "7/16/2014 00:00:00",
          "end": "7/16/2014 05:59:59",
          "label": "6 am"
        }, {
          "start": "7/16/2014 06:00:00",
          "end": "7/16/2014 11:59:59",
          "label": "12 pm"
        }, {
          "start": "7/16/2014 12:00:00",
          "end": "7/16/2014 17:59:59",
          "label": "6 pm"
        }, {
          "start": "7/16/2014 18:00:00",
          "end": "7/16/2014 23:59:59",
          "label": "Midnight"
        }]
      }],
      "processes": {
        "fontsize": "12",
        "isbold": "1",
        "align": "left",
        "headertext": "Employee",
        "headerfontsize": "14",
        "headervalign": "middle",
        "headeralign": "left",
        "process": [{
          "label": "John S.",
          "id": "EMP121"
        }, {
          "label": "David G.",
          "id": "EMP122"
        }, {
          "label": "Mary P.",
          "id": "EMP123"
        }, {
          "label": "Andrew H.",
          "id": "EMP124"
        }, {
          "label": "Neil M.",
          "id": "EMP125"
        }]
      },
      "tasks": {
        "showlabels": "1",
        "showstartdate": "1",
        "task": [{
          "processid": "EMP121",
          "start": "7/15/2014 08:00:00",
          "end": "7/15/2014 12:30:00",
          "label": "Logo A"
        }, {
          "processid": "EMP121",
          "start": "7/15/2014 17:00:00",
          "end": "7/15/2014 19:30:00",
          "label": "Logo B"
        }, {
          "processid": "EMP121",
          "start": "7/16/2014 09:00:00",
          "end": "7/16/2014 19:30:00",
          "label": "Website template"
        }, {
          "processid": "EMP122",
          "start": "7/15/2014 10:00:00",
          "end": "7/15/2014 20:30:00",
          "label": "PHP Blueprint"
        }, {
          "processid": "EMP122",
          "start": "7/16/2014 10:00:00",
          "end": "7/16/2014 20:30:00",
          "label": "PHP Blueprint"
        }, {
          "processid": "EMP123",
          "start": "7/15/2014 08:00:00",
          "end": "7/15/2014 12:00:00",
          "label": "L1 Support"
        }, {
          "processid": "EMP123",
          "start": "7/16/2014 15:00:00",
          "end": "7/16/2014 21:30:00",
          "label": "L1 Support"
        }, {
          "processid": "EMP124",
          "start": "7/15/2014 08:00:00",
          "end": "7/15/2014 20:30:00",
          "label": "L2 support"
        }, {
          "processid": "EMP124",
          "start": "7/16/2014 08:00:00",
          "end": "7/16/2014 20:30:00",
          "label": "L2 support"
        }, {
          "processid": "EMP125",
          "start": "7/15/2014 10:00:00",
          "end": "7/15/2014 14:30:00",
          "label": "Network Maintenance"
        }, {
          "processid": "EMP125",
          "start": "7/16/2014 12:00:00",
          "end": "7/16/2014 14:30:00",
          "label": "System OS Updates"
        }]
      }
    }
  }).render();
});
    <script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- Date and Time Based Gantt chart -->
<div id="chart-container">FusionCharts will render here</div>

    【讨论】：

      【解决方案2】： 

            google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['2014Spring', 'Spring 2014', 'spring',
         new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
        ['2014Summer', 'Summer 2014', 'summer',
         new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
        ['2014Autumn', 'Autumn 2014', 'autumn',
         new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
        ['2014Winter', 'Winter 2014', 'winter',
         new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
        ['2015Spring', 'Spring 2015', 'spring',
         new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
        ['2015Summer', 'Summer 2015', 'summer',
         new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
        ['2015Autumn', 'Autumn 2015', 'autumn',
         new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
        ['2015Winter', 'Winter 2015', 'winter',
         new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],

      ]);

      var options = {
        height: 400,
        gantt: {
          trackHeight: 30
        }
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <div id="chart_div"></div>

      HTML

         <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
         <div id="chart_div"></div>

      Javascript

        google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('string', 'Resource');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', 'Percent Complete');
  data.addColumn('string', 'Dependencies');

  data.addRows([
    ['2014Spring', 'Spring 2014', 'spring',
     new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
    ['2014Summer', 'Summer 2014', 'summer',
     new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
    ['2014Autumn', 'Autumn 2014', 'autumn',
     new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
    ['2014Winter', 'Winter 2014', 'winter',
     new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
    ['2015Spring', 'Spring 2015', 'spring',
     new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
    ['2015Summer', 'Summer 2015', 'summer',
     new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
    ['2015Autumn', 'Autumn 2015', 'autumn',
     new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
    ['2015Winter', 'Winter 2015', 'winter',
     new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],

  ]);

  var options = {
    height: 400,
    gantt: {
      trackHeight: 30
    }
  };

  var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

  chart.draw(data, options);
}

      【讨论】：

      • 谢谢 Jaydeep Gondaliya。
      • 是否可以在第一列（x 轴三月至六月）和第二列（六月至九月）中添加第一行。并且两者都有不同的颜色指示。
      • here is the reference 用于谷歌图表的甘特图。 “x 轴”标签会根据提供的数据自动调整。所以你无法控制显示什么文本...
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode