如何仅使用x轴绘制javascript甘特图

时间：2016-08-01 13:33:00

标签： javascript charts

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

提前感谢您的帮助。 enter image description here

2 个答案:

答案 0 :(得分：0)

      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);
}

答案 1 :(得分：0)

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

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

＆＃13;
＆＃13; 
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();
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题