Question

我试图在IkiWiki上使用jQuery.Gantt插件。我的代码创建了以下HTML片段：

<script src="./jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./jquery.fn.gantt.js" type="text/javascript" charset="utf-8"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript">$(document).ready(function(){$("#meetings").gantt({"minScale":"months","scale":"weeks","maxScale":"days","source":[{"desc":"Meetings","name":"meetings","values":[{"from":"/Date(1381834800000)/","label":"meeting/20131015 gs progress","to":"/Date(1381831200000)/"}]}],"navigate":"scroll"});});</script>

应该在我的图表上呈现一个事件。我还将项目style.css中的所有CSS复制到我的CSS中。

此图表呈现的页面由本地运行的Apache提供。

我遇到的问题是它呈现如下：

PNG

日历显示不正确：

我不确定应该如何显示月份;
我觉得这个网格应该会进一步下滑。

一件好事是我的活动实际上已经显示出来了。

我不确定如何继续调试。

Answer 1

考虑在初始化对象中检查甘特图的当前，最小和最大比例。这也可以使用甘特图上的缩放按钮进行更改。

要调试，我很乐意建议Firebug browser plugin

jQuery.Gantt是一个很酷的插件，但不适用于子规模事件。渲染的任何内容将始终填充至少一个网格，并舍入到最近的网格插入。这就是为什么你的会议从图片中填满了一整天。

Answer 2

我认为这是因为Jquery Gantt与Twitter Bootstrap 3不兼容。在this示例中，他们使用v2.3.2

Answer 3

正如达尔文所说，你的问题与Bootstrap如何重置页面的CSS有关。

Bootstrap 3.0附带的样式表＆＃34;帮助＆＃34;将页面上的每个元素的box-sizing CSS属性重置为border-box，而您使用的插件需要content-box，这确实是{{1}}默认的箱子模型。这与插件在页面上调整不同元素的大小有关，导致您看到的内容。

解决方案和解决方法都在插件本身的跟踪器中： https://github.com/taitems/jQuery.Gantt/issues/102。

jQuery.Gantt没有按预期呈现

3 个答案: