jQuery.Gantt未按预期呈现

Question

我正在尝试使用jQuery.Gantt插件与IkiWiki。我的代码创建了以下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

我认为这是因为Jquery与Twitter引导3不兼容。

Answer 2

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

为了进行调试，我很乐意建议使用Firebug浏览器插件

jQuery.Gantt是一个很酷的插件，但对于规模较小的事件来说，效果并不好。呈现的任何内容总是至少填充一个网格，并四舍五入到最近的网格插入。这就是为什么你的会议从照片中抽出一整天的原因。

Answer 3

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

引导3.0附带的样式表“有帮助”为页面上的每个元素重置box-sizing CSS属性为border-box，而您使用的插件期望content-box，这确实是默认的框模型。这会影响插件如何调整页面上不同元素的大小，从而导致您所看到的结果。

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