今回はガントチャートをWebアプリとしてつくることを考えます。ここではJavaScriptをつかってチャートだけ表示させます。

GanttChartクラスをつくります。あとはHTML側でGanttChartクラスのインスタンスを生成して表示させます。

⇒ 動作確認はこちらから

index.html

GanttChartクラス

ではGanttChartクラスを示します。

コンストラクタ

最初にコンストラクタを示します。

コンストラクタの引数にHTML側で実行したdocument.getElementById関数の戻り値を渡します。すると必要な要素が追加されてチャートが描画されるという感じです。

gantt-chart.js

表示させたい最初の日と最終日を指定する

SetGanttChartFirstDay関数とSetGanttChartEndDay関数はチャートに表示させたい日付の最初の日と最終日を指定するときに使います。Dateクラスのコンストラクタには年と日はそのまま渡しますが、月は1少ない値を指定しなければなりません。2021年11月3日であればnew Date(2021, 10, 3)としなければなりません。

チャートを描画します。関数が長くなるので項目の部分と日付の部分をわけて処理をしています。各要素はthis.MainElementの内部に絶対配置していきます。

描画する

各項目のヘッダー部分を描画する処理を示します。最後にMoveTextCellCenter関数を呼び出していますが、これは要素内の文字を中央に表示させるためのものです。通常はtextAlignスタイルとverticalAlignスタイルを設定すればいいのですが、positionがabsoluteだとうまくいかないので別に処理をしています。

要素内の文字を中央に表示させるMoveTextCellCenter関数を示します。positionがabsoluteだとtextAlignスタイルとverticalAlignスタイルを設定してもうまくいきません。そこで要素のなかに別の要素を追加して文字列を設定しなおしています。またdisplayスタイルはtable-cellにしなければなりません。

チャートの日付部分を描画するための処理を示します。まず最初に表示される日にちと曜日を調べます。