0

このサイトhttp://mbielanczuk.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 に答える