ガントチャートの背景色をJavaScriptで入れてみた

 

記事作成の背景

 

ANKOSOFTの山崎です。

「Redmine Advent Calendar 2022」の12/14の記事が12/14 23:59現在、まだ未登録のため、途切れないでバトンをつなぎたかったのですが、残念ながら日をまたいでしまいました。少し遅れてしまいましたが、「Redmine Advent Calendar 2022」の12/14の記事として作成します。

 

１．開発の背景

ガントチャートは背景色がなく、無味乾燥な白の背景色で、休日だけ灰色で表示されます。悪くはないのですが、背景色を入れられたらもっと華やかなガントチャートになるかと思い、開発をしました。

 

２．完成イメージ

下図のようにカラフルな背景色をJavaScriptだけで入れることができます。何となくやる気が出て来る感じです。

 

３．解決方法

view_customizeで作成したJavaScriptを適用させました。工夫をした点は、ただ単に背景色を塗ってしまうと縦の罫線が消えてしまいます。それで背景色を罫線と罫線の間に碁盤の目のように張りつめています。背景色と背景色の間に左右の余白を入れて、その余白の部分から縦の罫線が見えるようにしています。大したコードではないので、下図のJavaScriptのコードを見てもらえればどのような処理をしているのかはわかるかと思います。

色の定義（どのトラッカーに対してどの色にするのかの指定）も升目の数も決め打ちで定義しています。従って環境が変わると正しく動作はしません。とりあえず「Redmine Advent Calendar 2022」に記事を載せることを優先したため、本来考慮するべき点はソース化していません。

 

 

４．今後の展望

色はトラッカーの種別ごとに変えています。トラッカーの種別以外にも担当者別で色を変えるとか、優先度で色を変えるとか、期日が経過したチケットの色を変えるとかアイデアにより色々なバリエーションが考えられます。

また、休日（土日）はすでに背景色があるので、その場合は休日の背景色を優先にすることもプログラム化することは可能です。

 

ー＞2022/12/15 追記　

ーーー追記　開始ーーーーー

以外と簡単に休日の場合は休日の背景色を表示することができました。7で割った余りの数によって、土曜日や日曜日を認識して該当する場合は色を付けないようにしました。余り１が何曜日になるかは月によって異なりますが、今回のサンプルでは余り１が土曜日、余り２が日曜日でした。

 

ソースは下図のとおりです。

ーーー追記ここまでーーーーー

 

今回のプログラムはとりあえずガントチャートに背景色を入れることだけを目標に技術検証をした結果を公表しており、実用化のためにはガントチャートの拡大率に応じて背景色のサイズを変えたり、敷き詰める背景色の数を自動的に算出したりする機能も必要です。

ただし意外と簡単にガントチャートに背景色をきれいに入れられることが確認できたので、時間がある時により実用的なプログラムを組みたいと思います。

 

お知らせ

 

弊社ではRedmineのガントチャートの便利に使える「ANKOガントチャート」を販売をしています。まだご存じではない方は、是非、紹介ページをご確認いただき、無料版の評価版をお使いいただければ幸いです。

ANKOガントチャート紹介ページ：https://ankosoft.co.jp/anko_gantt_chart