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

我目前正在使用谷歌图表创建甘特图。定制图表是我的追求

---

如何在一行上创建具有多个条形图的甘特图？请参阅随附的图片。

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

google.charts.load（“当前”，{packages:[“timeline”]}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var container=document.getElementById（'timeline-chart'）；
var chart=newgoogle.visualization.Timeline（容器）；
var dataTable=new google.visualization.dataTable（）；
addColumn（{type:'string'，id:'Role'}）；
addColumn（{type:'string'，id:'Name'}）；
addColumn（{type:'date'，id:'Start'}）；
addColumn（{type:'date'，id:'End'}）；
dataTable.addRows([
[‘简报会’、‘基线’、新日期（2020年2月6日）、新日期（2020年2月10日）]，
[‘简报会’、‘预测’、新日期（2020年2月7日）、新日期（2020年2月11日）]，
[‘简报会’、‘实际’、新日期（2020年2月6日）、新日期（2020年2月13日）]，
[“概念设计”、“基线”、新日期（2020年2月6日）、新日期（2020年2月10日）]，
[‘概念设计’、‘预测’、新日期（2020年2月7日）、新日期（2020年2月11日）]，
[‘概念设计’、‘实际’、新日期（2020年2月6日）、新日期（2020年2月13日）]
]);
变量选项={
时间线：{}，
身高：1000，
};
图表绘制（数据表、选项）；
}

您链接的图像比甘特图更能让我想起甘特图，因为它没有箭头。谷歌的甘特图似乎不是一个合适的开始，我明白了，这是一个很好的建议。然而，我读过关于时间轴的文章，似乎不知道如何在时间轴上实现相同的输出。你将如何调整条形图的高度以及如何对数据进行分组？你需要自己解决其中的一些问题，但时间线图与你所要做的要接近得多。甘特图根本无法做到这一点。我可能还应该注意到，谷歌图表的定制是有限的。它们是非常可定制的，但不是完全可定制的。因为它们不是开源的，所以你不能仅仅通过黑客攻击它们来获得你想要的。类似D3.js的东西是完全可定制的，但代价是进入门槛更高。您试图构建的图表实际上并非不可能使用简单的javascript、html和CSS构建。你甚至可以考虑在没有图书馆的情况下建立它。