Question

我目前正致力于使用Google Chart创建甘特图。我正在寻找自定义图表。 Gant Chart

如何在一行中创建一个带有多个条形的甘特图？请参阅附图。

Answer 1

我相信这可能符合您的目的：

https://codepen.io/saurabhtalreja/pen/LYbzLMX

google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('timeline-chart');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
     [ 'Briefing Meeting', 'Baseline', new Date(2020, 2, 6), new Date(2020, 2, 10) ],
      [ 'Briefing Meeting', 'Forecast', new Date(2020, 2, 7), new Date(2020, 2, 11) ],
      [ 'Briefing Meeting', 'Actual', new Date(2020, 2, 6), new Date(2020, 2, 13) ],
      [ 'Concept Design', 'Baseline', new Date(2020, 2, 6), new Date(2020, 2, 10) ],
      [ 'Concept Design', 'Forecast', new Date(2020, 2, 7), new Date(2020, 2, 11) ],
      [ 'Concept Design', 'Actual', new Date(2020, 2, 6), new Date(2020, 2, 13) ]
    ]);

    var options = {
      timeline: {  },
      height:1000,    
    };

    chart.draw(dataTable, options);
  }

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline-chart"></div>

这里使用的是时间轴，而不是甘特图。这里还有一件重要的事情是：

如果您的开始日期重叠，那么它只会将其放入下一行。
不要忘记在这里使用第一个标识符即角色进行分组，您可以将其修改为任何名称

自定义Google Chart（甘特图）

1 个答案: