0

我正在使用来自该站点http://mbielnczuk.com/2011/06/jquery-gantt-chart/的 jQuery 插件。

除了宽度和高度有问题外，我能够实现它。示例：http ://www.txtease.com/android/push/login/schedule/mbielan/index.htm

从链接中，您可以看到图表没有填满屏幕。您是否熟悉使用 jQuery.Gantt 并且知道要针对哪个元素来调整宽度和高度？

  1. 我已将“itemsperpage”参数设置为 17。

  2. 根据我的调查，图表的宽度似乎是基于高度的。该数字被划分为分页。

  3. 我在 css 中的图表周围放置了宽度和高度样式。只有高度调整为800px。宽度保持不变

甘特图 </script-->

    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script type="text/javascript">

jQuery(function () {
var dataPath = location.href.substring(0, location.href.lastIndexOf('/')+1);
$(".gantt2").gantt({source: dataPath + "js/dataHours.js", navigate: 'scroll', scale: 'hours', maxScale: 'hours', minScale: 'hours', hollydays: ["\/Date(1293836400000)\/","\/Date(1294268400000)\/","\/Date(1303596000000)\/","\/Date(1306274400000)\/","\/Date(1304200800000)\/","\/Date(1304373600000)\/","\/Date(1307829600000)\/","\/Date(1308780000000)\/","\/Date(1313359200000)\/","\/Date(1320105600000)\/","\/Date(1320966000000)\/","\/Date(1324767600000)\/","\/Date(1324854000000)\/","\/Date(1325372400000)\/","\/Date(1325804400000)\/","\/Date(1333836000000)\/","\/Date(1336514400000)\/","\/Date(1335823200000)\/","\/Date(1335996000000)\/","\/Date(1338069600000)\/","\/Date(1339020000000)\/","\/Date(1344981600000)\/","\/Date(1351724400000)\/","\/Date(1352588400000)\/","\/Date(1356390000000)\/","\/Date(1356476400000)\/"]});
//$(".gantt").gantt({source: dataPath + "js/dataDays.js", navigate: 'scroll', scale: 'days', maxScale: 'weeks', minScale: 'days', hollydays: ["\/Date(1293836400000)\/","\/Date(1294268400000)\/","\/Date(1303596000000)\/","\/Date(1306274400000)\/","\/Date(1304200800000)\/","\/Date(1304373600000)\/","\/Date(1307829600000)\/","\/Date(1308780000000)\/","\/Date(1313359200000)\/","\/Date(1320105600000)\/","\/Date(1320966000000)\/","\/Date(1324767600000)\/","\/Date(1324854000000)\/","\/Date(1325372400000)\/","\/Date(1325804400000)\/","\/Date(1333836000000)\/","\/Date(1336514400000)\/","\/Date(1335823200000)\/","\/Date(1335996000000)\/","\/Date(1338069600000)\/","\/Date(1339020000000)\/","\/Date(1344981600000)\/","\/Date(1351724400000)\/","\/Date(1352588400000)\/","\/Date(1356390000000)\/","\/Date(1356476400000)\/"]});
//$(".gantt").gantt({
// source: [{"name":"application","desc":"Lübeck","values":[{"from":"/Date(1293874598708)/","to":"/Date(1354268198708)/","desc":"ID: 10<br/>name: CRM<br/>date: 01.01.2011 to 30.11.2012<br/>description: CRM 4.0", "label":"CRM","customClass":"ganttGreen"}]}],
// navigate: 'scroll', scale: 'days', hollydays: ["\/Date(1293836400000)\/","\/Date(1294268400000)\/","\/Date(1303596000000)\/","\/Date(1306274400000)\/","\/Date(1304200800000)\/","\/Date(1304373600000)\/","\/Date(1307829600000)\/","\/Date(1308780000000)\/","\/Date(1313359200000)\/","\/Date(1320105600000)\/","\/Date(1320966000000)\/","\/Date(1324767600000)\/","\/Date(1324854000000)\/","\/Date(1325372400000)\/","\/Date(1325804400000)\/","\/Date(1333836000000)\/","\/Date(1336514400000)\/","\/Date(1335823200000)\/","\/Date(1335996000000)\/","\/Date(1338069600000)\/","\/Date(1339020000000)\/","\/Date(1344981600000)\/","\/Date(1351724400000)\/","\/Date(1352588400000)\/","\/Date(1356390000000)\/","\/Date(1356476400000)\/"]});

});

    </script>
</head>
<body>

 <div class="gantt2" style="width: 800px,height: 800px"></div>
</body>

任何帮助表示赞赏！

4

1 回答 1

1

插件附带了一个默认的 style.css。我已经改变了这个并且它有效

.gantt {
    width: 800px;
    height: 800px;
    margin: 20px auto;
    border: 15px solid #ddd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;  
}
于 2012-10-19T16:21:43.797 回答