自定义谷歌图表（甘特图）

Question

我目前正在使用Google Chart创建甘特图。我想要自定义图表。 甘特图

如何在单行上创建带有多个条的甘特图？请参见附加的图像。

- Atashi Dubz

---

你所链接的图片更像是时间轴图表而不是甘特图，因为它没有箭头。谷歌的甘特图似乎不适合你想要做的事情。 - nbering

我明白了，那是一个很好的建议。我已经阅读了关于时间轴的内容，但似乎无法理解如何在时间轴上实现相同的输出。您将如何调整条形图的高度并对数据进行分组？ - Atashi Dubz

你需要自己解决其中一些问题，但时间轴图表更接近于你想要做的事情。甘特图无法做到这一点。 - nbering

我应该也注意到，Google Charts 的定制是有限的。它们是相当可定制的，但并非完全可定制。而且由于它们不是开源的，你不能只是随意地修改它们以获得你想要的结果。像 D3.js 这样的东西是完全可定制的，但代价是更高的入门门槛。你试图构建的图表实际上并不是不可能用纯 JavaScript、HTML 和 CSS 来构建。你甚至可以考虑尝试在没有库的情况下构建它。 - nbering

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>

这里使用的是时间轴而不是甘特图。另外一个重要的事情是:

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

- Saurabh Talreja

---

2个重要的事情...它们解决了我的需求 :) +1 - msanjay

是的，你说得对 :) - Saurabh Talreja