作業の進捗状況を視覚的に把握できるガントチャートの出力プログラムです。
表示だけでなく、チャートをドラッグする事でデータの変更を行う事もでき、変更データをサーバに送信(submit)する事もできます。
※ご利用、改変はご自由に行って頂けますが、本ライブラリを利用して発生した一切の責任は追いかねます。
不具合や改善要望などがありましたら、下記お問い合わせフォームよりご連絡下さい。
連絡をいただいた場合、可能な限りの対応は致しますが、限定された要件に対してのカスタマイズには対応致しかねます。
当ライブラリはフリーウェアとして配布しておりますので、要件に応じたカスタマイズが必要な場合は、
ご自身で行って頂くようお願い致します。
また、都合により時間を頂いたり、場合によっては対応できない場合もございますが、ボランティアベースでの開発の為、何卒ご了承下さいませ。
《ダウンロード》
※本ライブラリについては、クライアント処理(JavaScript)のみダウンロード頂けます。
※バージョン間の変更点についてはリリースノートをご覧下さい。(zipに含まれています)
《インストール》
ダウンロードしたzipファイルを解凍するだけでご利用頂けます。
※sample1〜3.html のデータ設定部分をサーバ処理で動的に生成する等してご利用下さい。
《ファイル構成》
| /ganttchart | |||
| ├ sample1.html | ・・・ サンプル１(予定 or 実績) | ||
| ├ sample2.html | ・・・ サンプル２(予定 and 実績) | ||
| ├ sample3.html | ・・・ サンプル３(予定 and 実績、2行1明細) | ||
| ├ js | ・・・ JavaScript格納用ディレクトリ | ||
| ├ mygantt.js | ・・・ ガントチャート出力用ライブラリ本体 | ||
| ├ xxxxxxx.js | ・・・ jQuery関連ライブラリ | ||
| ├ images | ・・・ 画像格納用ディレクトリ | ||
| ├ block20.gif | ・・・ ガントチャート用メモリ背景画像(幅20px用) | ||
| ├ block30.gif | ・・・ ガントチャート用メモリ背景画像(幅30px用) | ||
| ├ xxxxx.gif,xxxxx.png | ・・・ jQuery関連画像 | ||
| └ css | ・・・ スタイルシート格納用ディレクトリ | ||
| ├ mygantt.css | ・・・ ガントチャート用スタイルシート | ||
| ├ xxxxxxx.css | ・・・ jQuery関連スタイルシート | ||
《設定データについて》
チャートの体裁、およびデータを設定情報(JavaScriptデータ)として指定する必要があります。
※設定の具体例についてはサンプル(sample1.html 〜 sample3.html)を参照下さい。
《メソッド説明》
本ライブラリで使用できるメソッド主なメソッドは下表の通りです。
※メソッド利用の具体例についてはサンプルをご参照下さい。
| メソッド名 | 引数 | 説明 |
|---|---|---|
| mygantt.initChart |
出力するチャートの体裁、データなどを配列で指定 [ チャートを描画する要素のID ,チャートの体裁情報 ,チャートのレコード情報 ,チャートデータ ] |
ガントチャートの体裁、データ等を設定します |
| mygantt.printChart | なし | ガントチャートを描画します。 |
| mygantt.rewriteChart | なし | チャートを再描画します。 ※サーバへのsubmitは行われません。 |
| mygantt.submit |
サブミットする際のFormの属性情報をJSON形式で指定 (例） {"action": "xxxxx.do" , "method":"post" } |
変更されたデータをサーバにsubmitします |
(形式)
{キー名1:値,キー名2:値,...}
(指定するキー値)
| キー名 | 指定する値 |
|---|---|
| type |
"A" ... 予定のみ入力(デフォルト) "B" ... 予定、実績を入力 |
| sdate | チャートの表示開始日 形式：YYYYMMDD |
| edate | チャートの表示終了日 形式：YYYYMMDD |
| mwidth | １日分のサイズ(横幅) ※px単位で指定 |
| mmove | ドラッグで動かせるサイズ ※何メモリずつ動かせるかを指定 |
| recPrefix | submitデータの接頭文字 |
(設定例)
var chartInfo = { "type":"B", "sdate" : "20100201", "edate" : "20100228", "mwidth": 20, "mmove" : 1, "recPrefix": "" };
(形式)
[ { フィールド情報１ },{ フィールド情報２ },・・・ ]
※フィールド情報は {キー名1:値,キー名2:値,...} の形式で下表に従って指定します。(指定するキー値)
| キー名 | 設定する値 |
|---|---|
| ftype |
フィールドが何のデータなのかを示す型宣言を行います。 指定できる型は以下の通りです。（下記以外は指定不要です。） タスクの開始予定日 ： "ssdate" タスクの終了予定日 ： "sedate" タスクの開始実績日 ： "rsdate" タスクの終了実績日 ： "redate" |
| name | submitする際のデータ名を指定 |
| title | チャートのフィールドタイトルを指定 titleの指定がないフィールドは画面上には表示されません。 |
| itype |
入力形式を指定します。（以下の形式が指定可能） テキスト入力："text(入力可能な文字数)" 日付入力："datepicker" プルダウン："select(値1:テキスト値1,値2:テキスト値2,...)" |
| rowspan | １明細を複数行で表示する際に使用します HTMLのTDに指定するrowspanと同様の指定方法です。 |
| colspan | １明細を複数行で表示する際に使用します HTMLのTDに指定するcolspanと同様の指定方法です。 |
| rowno | １明細を複数行で表示する際に使用します 該当のフィールドを何行目に表示するかを指定します。 |
(設定例)
(形式)
[ [フィールド値1,フィールド値2,..], [フィールド値1,フィールド値2,..],[フィールド値1,フィールド値2,..] ... ]
(設定例)
var chartData = [
["1","作業Ａ","作業者Ａ","2010/01/29","2010/02/03", "2010/02/02","2010/02/06", "100" ]
,["2","作業Ｂ","作業者Ｂ","2010/02/10","2010/02/13", "2010/02/09","2010/02/12", "100" ]
,["3","作業Ｃ","作業者Ｃ","2010/02/14","2010/02/15", "2010/02/14","2010/02/16", "90" ]
,["4","作業Ｄ","作業者Ｄ","2010/02/13","2010/02/18", "2010/02/13","", "30" ]
];