今回はJavaScriptで作成したガントチャートのバーを描画します。項目としてタスク名とカテゴリ名、担当者名、期間もいっしょに描画します。

⇒ 動作確認はこちらから

Taskクラス

まずタスクを管理するためのTaskクラスをつくります。コンストラクタの引数のtaskName, categoryName, managerNameは文字列、startYear, startMonth, startDay, endYear, endMonth, endDayはnumber型です。

これをこんな感じで使います。Taskの配列を作成してGanttChartクラスの関数に渡せば項目とバーが表示されるわけです。

⇒ 動作確認はこちらから

SetSchedules関数

それではGanttChartクラスのSetSchedules関数を示します。

Taskの配列をうけとったらそれをカテゴリごとにわけます。そしてSetSchedule関数(後述)を連続して呼び出します。最後にMainElementの高さを調整します。

tasksに格納されているTaskをカテゴリごとにわけるGroupBy関数を示します。

SetSchedule関数

SetSchedule関数はそれぞれのタスクの項目名とバーを描画する関数です。

ゼロ埋めのための関数であるGanttChart関数を示します。

項目を設定する

次に項目を設定するためのSetTexts関数を示します。for文のなかで追加する要素のX座標を計算します。そして渡されたwidthsから各要素の幅を取得して設定します。

文字を中央寄せにする関数を示します。

positionにabsoluteが設定されているとうまくいかないので別の要素を追加してそのなかでdisplayをtable-cellに設定して文字列を移し替えることで文字が中央寄せになったようにみせかけます。

バーを描画する

バーを描画するための関数 DrawBand関数を示します。

開始日と終了日からバーをどこからどこまで描画すべきかを調べます。
startDayとendDayは日数的に何日違うのかを調べます。ここでは経過時間をミリ秒で取得して引き算して1000*60*60*24で割ったものを四捨五入して日数を求めています。

またチャートの開始日と終了日のなかにタスクの開始日と終了日がおさまっているのであれば難しくないのですが、そうなっていない場合は適切な長さに切り縮めて適切な位置から描画しなければなりません。