家具レイアウトシミュレーション用のJavascriptを…
2008.12.16 火曜日引越をすることになり、その件で頭が一杯だったのでつい…。
家具どう置こうかなー、とか色々考えてて、
とリあえず、Javascriptで家具配置のシミュレーションが出来る物を自分用に簡易なの作ってこれで遊んでたんだけど、
ちょっと面白そうなんで一度ちゃんと作ってみるかも。
maro-z.com
折角なので色々と。
2008 年 12 月 のアーカイブ
ガントチャートを描画するjQueryプラグイン
2008.12.12 金曜日プロジェクト管理ツールを色々と見ていたら、ガントチャートはJpGraphというツールで出力する物が殆どで、
JpGraphだと、GDを使って画像で生成してるので綺麗に出力される反面、融通聞きにくいんじゃないかなぁ、という印象。
タスク名等のテキストにリンク張ったりとか出来た方が便利だろうし、画像生成する際のフォントの問題で日本語化も結構手間。
これってJavascriptで出したらどんな感じだろう、と、思いつきで作ってみた。
$("#gantt01").gantt();
空っぽの状態で生成。
$("#gantt01").gantt({
'tasks':[
{ 'titles': 'Task01', 'start_date': '20081213', 'end_date': '20081222' },
{ 'titles': 'Task02', 'start_date': '20081217', 'end_date': '20081231' },
{ 'titles': 'Task03', 'start_date': '20081227', 'end_date': '20090121' }
]
});
'tasks':[
{ 'titles': 'Task01', 'start_date': '20081213', 'end_date': '20081222' },
{ 'titles': 'Task02', 'start_date': '20081217', 'end_date': '20081231' },
{ 'titles': 'Task03', 'start_date': '20081227', 'end_date': '20090121' }
]
});
と、引数にタスク情報を渡して一気に生成することも可能。
$('#gantt01').addTask({ 'titles': 'Task04', 'start_date': '20081230', 'end_date': '20090111' });
$('#gantt01').addTask([
{ 'titles': 'Task04', 'start_date': '20081230', 'end_date': '20090111' },
{ 'titles': 'Task05', 'start_date': '20081230', 'end_date': '20090111' }
]);
$('#gantt01').addTask([
{ 'titles': 'Task04', 'start_date': '20081230', 'end_date': '20090111' },
{ 'titles': 'Task05', 'start_date': '20081230', 'end_date': '20090111' }
]);
タスクの追加はaddTask()
配列で一気に送ってもOK。
// 当日へ移動
$('#gantt01').setPeriod();
// 日付指定
$('#gantt01').setPeriod('20081212');
// 範囲指定
$('#gantt01').setPeriod('20081212', '20090112');
// 次のページ
$('#gantt01').setPeriod('+');
// 7日分送る
$('#gantt01').setPeriod('+7');
// 前のページ
$('#gantt01').setPeriod('-');
// 7日分前へ
$('#gantt01').setPeriod('-7');
// 日単位表示
$('#gantt01').setType('date');
// 月単位別表示
$('#gantt01').setType('month');
$('#gantt01').setPeriod();
// 日付指定
$('#gantt01').setPeriod('20081212');
// 範囲指定
$('#gantt01').setPeriod('20081212', '20090112');
// 次のページ
$('#gantt01').setPeriod('+');
// 7日分送る
$('#gantt01').setPeriod('+7');
// 前のページ
$('#gantt01').setPeriod('-');
// 7日分前へ
$('#gantt01').setPeriod('-7');
// 日単位表示
$('#gantt01').setType('date');
// 月単位別表示
$('#gantt01').setType('month');
表示切り替え。
$("#gantt01").gantt({
'type': 'date', // グラフのタイプ(date / month)
'range': 50, // 表示範囲 (グラフのコマ数)
'titles': ['title01', 'title02']. // タイトル項目(配列にすると複数列)
'tasks': {} // タスクデータ (オブジェクト)※配列で複数渡しも可
});
'type': 'date', // グラフのタイプ(date / month)
'range': 50, // 表示範囲 (グラフのコマ数)
'titles': ['title01', 'title02']. // タイトル項目(配列にすると複数列)
'tasks': {} // タスクデータ (オブジェクト)※配列で複数渡しも可
});
生成時のオプション。
$('#gantt01').addTask({
'titles': ['Task05', 'hoge'], // タイトル項目(配列可。表示数は生成時の設定に依存)
'start_date': '20090103', // 開始日 ※必須
'end_date': '20090116', // 終了日 ※必須
'color': '#0000FF', // グラフの色
'text': 'Task05' // グラフの中に表示するテキスト
});
'titles': ['Task05', 'hoge'], // タイトル項目(配列可。表示数は生成時の設定に依存)
'start_date': '20090103', // 開始日 ※必須
'end_date': '20090116', // 終了日 ※必須
'color': '#0000FF', // グラフの色
'text': 'Task05' // グラフの中に表示するテキスト
});
タスク追加時のオプション。
開始日と終了日だけは必須。
日付の形式は
YYYYMMDD
YYYY.MM.DD
YYYY/MM/DD
のいずれかで。
急な思いつきでガーッと作ったので色々と雑かも。
ニーズが発生したらまた手を入れると思うけど、ニッチな用途なので延々とアルファバージョンの可能性もｗ
使用は現在の所未定。
一応、プロジェクト管理ツールを自分らの使いやすい形式の物を自作してみたいという野望があるにはあるけど…。