ガントチャート(JavaScript版)

作業の進捗状況を視覚的に把握できるガントチャートの出力プログラムです。

表示だけでなく、チャートをドラッグする事でデータの変更を行う事もでき、変更データをサーバに送信(submit)する事もできます。


※ご利用、改変はご自由に行って頂けますが、本ライブラリを利用して発生した一切の責任は追いかねます。

不具合や改善要望などがありましたら、下記お問い合わせフォームよりご連絡下さい。

連絡をいただいた場合、可能な限りの対応は致しますが、限定された要件に対してのカスタマイズには対応致しかねます。

当ライブラリはフリーウェアとして配布しておりますので、要件に応じたカスタマイズが必要な場合は、
ご自身で行って頂くようお願い致します。

また、都合により時間を頂いたり、場合によっては対応できない場合もございますが、ボランティアベースでの開発の為、何卒ご了承下さいませ。

≪デモ画面≫
こちら よりデモ画面をご確認頂くことができます。
≪ダウンロード・インストール≫

《ダウンロード》

mygantt-1.1.zip

mygantt-1.2.zip

※本ライブラリについては、クライアント処理(JavaScript)のみダウンロード頂けます。

※バージョン間の変更点についてはリリースノートをご覧下さい。(zipに含まれています)


《インストール》

ダウンロードしたzipファイルを解凍するだけでご利用頂けます。
※sample1〜3.html のデータ設定部分をサーバ処理で動的に生成する等してご利用下さい。

≪ご利用ガイド≫

《ファイル構成》

/ganttchart
├ sample1.html・・・ サンプル1(予定 or 実績)
├ sample2.html・・・ サンプル2(予定 and 実績)
├ sample3.html・・・ サンプル3(予定 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 1日分のサイズ(横幅)
※px単位で指定
mmove ドラッグで動かせるサイズ
※何メモリずつ動かせるかを指定
recPrefix submitデータの接頭文字

(設定例)

var chartInfo = { "type":"B", "sdate" : "20100201", "edate" : "20100228", "mwidth": 20, "mmove" : 1, "recPrefix": "" };


◆チャートのレコード情報
チャートのレコード情報を指定します。

(形式)

[ { フィールド情報1 },{ フィールド情報2 },・・・ ]

※フィールド情報は {キー名1:値,キー名2:値,...} の形式で下表に従って指定します。

(指定するキー値)

キー名 設定する値
ftype フィールドが何のデータなのかを示す型宣言を行います。
指定できる型は以下の通りです。(下記以外は指定不要です。)
タスクの開始予定日 : "ssdate"
タスクの終了予定日 : "sedate"
タスクの開始実績日 : "rsdate"
タスクの終了実績日 : "redate"
name submitする際のデータ名を指定
title チャートのフィールドタイトルを指定
titleの指定がないフィールドは画面上には表示されません。
itype 入力形式を指定します。(以下の形式が指定可能)
テキスト入力:"text(入力可能な文字数)"
日付入力:"datepicker"
プルダウン:"select(値1:テキスト値1,値2:テキスト値2,...)"
rowspan 1明細を複数行で表示する際に使用します
HTMLのTDに指定するrowspanと同様の指定方法です。
colspan 1明細を複数行で表示する際に使用します
HTMLのTDに指定するcolspanと同様の指定方法です。
rowno 1明細を複数行で表示する際に使用します
該当のフィールドを何行目に表示するかを指定します。

(設定例)

◆チャートデータ
チャートデータをレコード情報に設定した順番で指定します。

(形式)

[ [フィールド値1,フィールド値2,..], [フィールド値1,フィールド値2,..],[フィールド値1,フィールド値2,..] ... ]


(設定例)
var chartData = [
                  ["1","作業A","作業者A","2010/01/29","2010/02/03", "2010/02/02","2010/02/06", "100" ]
                 ,["2","作業B","作業者B","2010/02/10","2010/02/13", "2010/02/09","2010/02/12", "100" ]
                 ,["3","作業C","作業者C","2010/02/14","2010/02/15", "2010/02/14","2010/02/16", "90" ]
                 ,["4","作業D","作業者D","2010/02/13","2010/02/18", "2010/02/13","", "30" ]
                ];