GrapeCity.devlog

グレープシティ開発支援ツールの最新情報をお届けします。製品のTIPSやリリース情報、イベントのお知らせなどをいち早く発信中です。

Spread.Viewsで簡単ガントチャート

こんにちは。2018年が明け、成人の日を含む連休もとうとう過ぎ去ってしまいました。皆さま、そろそろお正月気分も冷めて本格的に新しいスタートを切ろうとされている頃かな、と思いますがいかがお過ごしでしょうか。

当ブログでは新年の事始めとして、これまでご紹介する機会がちょっと少なかった、SpreadJS収録の高機能グリッドSpread.Viewsに関する技術TIPSをご紹介したいと思います。

ガントチャートをつくる

f:id:GrapeCity_dev:20180110113208p:plain

この時期に併せて、新プロジェクトや新チームを発足される、といった方もいらっしゃるのではないでしょうか。このようなプロジェクト・チーム管理に欠かせないツールといえばガントチャートですが、作るのは意外と大変ですよね。今日はSpread.Viewsを使い、わずかな設定であっという間にガントチャートを作成してみます。

利用するデータ

以下のようなデータを使ってガントチャートを表示します。

タスク名 タスク開始日 タスク終了日
戦略会議 2018/1/11 2018/1/11
製品設計 2018/1/12 2018/1/15
設計検査 2018/1/15 2018/1/20
機能実装 2018/1/20 2018/1/25
品質検査 2018/1/25 2018/2/10
リリース 2018/2/10 2018/2/10

作業のタスク名、開始日と終了日しかない、シンプルなレコードデータ群です。JavaScriptコードにすると以下のようになるでしょうか。任意のテキストエディタでファイルを新規作成し、以下のデータを貼り付けて「Data.js」という名前で保存します。

// スケジュールデータ
var data = [ 
 { "id": "戦略会議", "start": "2018/1/11", "end": "2018/1/11" },
 { "id": "製品設計", "start": "2018/1/12", "end": "2018/1/15" },
 { "id": "設計検査", "start": "2018/1/15", "end": "2018/1/20" },
 { "id": "機能実装", "start": "2018/1/20", "end": "2018/1/25" }{ "id": "品質検査", "start": "2018/1/25", "end": "2018/2/10" }{ "id": "リリース", "start": "2018/2/10", "end": "2018/2/10" }
];

以降の手順では、このデータを読み込みガントチャートを表示するためのHTMLファイル、JSファイル、CSSファイルを作成します。

HTMLファイル

ガントチャートを表示するメインのHTMLファイルを作成します。このファイルでは、Spread.ViewsのライブラリファイルとCSSファイル、アプリケーションロジックを含んだJSファイルとCSSファイルの参照を行なっています。ファイルを新規作成し以下のデータを貼り付け「Sample.html」という名前で「Data.js」と同じ場所に保存しましょう。

<html>
  <head>
    <title>SpreadJS Sample</title>
    <meta charset="utf-8" />
    
    <!-- Spread.Views CSSの参照 -->
    <link rel="stylesheet" type="text/css" href="(任意のファイル保存場所)/gc.spread.views.dataview.10.3.0.css">
    <link rel="stylesheet" type="text/css" href="(任意のファイル保存場所)/gc.spread.views.gantt.10.3.0.css">
    
    <!-- Spread.Views ライブラリの参照 -->
    <script src="(任意のファイル保存場所)/gc.spread.common.10.3.0.min.js" type="text/javascript"></script>
    <script src="(任意のファイル保存場所)/gc.spread.views.dataview.10.3.0.min.js" type="text/javascript"></script>
    <script src="(任意のファイル保存場所)/gc.spread.views.gridlayout.10.3.0.min.js" type="text/javascript"></script>
    <script src="(任意のファイル保存場所)/gc.spread.views.gantt.10.3.0.min.js" type="text/javascript"></script>
    
    <!-- アプリケーションデータ・CSSの参照 -->
    <script src="./Data.js" type="text/javascript"></script>
    <link href="./Sample.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <!-- Spread.Viewsを配置するDOM -->
    <div id="grid1" class="spreadViews"></div>
    <!-- ロジックコードの参照 -->
    <script src="./Sample.js" type="text/javascript"></script>
  </body>
</html>

JavaScriptファイル(アプリケーションロジック)

このファイルで、Spread.Viewsを使用したガントチャートの表示処理を実装します。設定は簡単、わずか3ステップで完了です。

1.列定義

Sread.Viewsに表示する列の定義情報を作成します。ここでいう列の定義とは、冒頭で作成した「Data.js」のフィールドデータをどの列で表示するか、といった設定のことです。1列目からタスク名、開始日、終了日となるように列定義を行います。また、ここでSpread.Viewsの機能を使い、4列目以降のエリアにはガントチャートを表示できるように「ganttColumn」を設定します。

//--------------------------
// Spread.Views 列定義情報
//--------------------------
var columns = [{
    // 1列目の設定:タスク名
    id: 'id',
    caption: 'タスク名',
    dataField: 'id',
    width: 140
}, {
    // 2列目の設定:開始日
    id: 'start',
    caption: '開始日',
    dataField: 'start',
    dataType: 'date',
    cssClass: "cellCss",
    format: 'm/d',
    width: 80
}, {
    // 3列目の設定:終了日
    id: 'end',
    caption: '終了日',
    dataField: 'end',
    dataType: 'date',
    cssClass: "cellCss",
    format: 'm/d',
    width: 80
}, {
    // 4列目以降のエリア設定:ガントチャート
    id: 'gantt',
    ganttColumn: {
        timeLineScale: 'month', /* ガント表示の単位:月 */
        scale: 200,
        start: 'start', /* 開始日を示すデータフィールド名 */
        end: 'end',     /* 終了日を示すデータフィールド名 */
	// ヘッダの月日表示を日本語に変換
	labelFn: function(key, value){
            if (key === 'month') {
                return (value + 1) + '月';
            } else if (key === 'day') { 
                return value + '日';
            }
        }
    },
    width: '*'
}];
2.GridLayoutの設定

Spread.Viewsのガントチャート表示は、Spread.ViewsのGridLayoutプラグインが提供する一機能です。GridLayoutのインスタンスを生成し、次のステップでSpread.Views本体に設定します。

// Spread.Viewsに設定するガント・レイアウトインスタンスの生成
var ganttLayout = new GC.Spread.Views.Plugins.GridLayout({ colHeaderHeight: 60, rowHeight: 50 });
3.Spread.Viewsの設定

Spread.Views(GC.Spread.Views.DataView)本体のインスタンスを生成し、1.と2.で作成した列定義情報、GridLayoutインスタンスを設定します。

// Spread.Viewsを配置するDOM要素の取得
var domSV = document.getElementById('grid1');
// 列情報、データ、ガント・レイアウトインスタンスを設定してSpread.Viewsを生成します
var dataView = new GC.Spread.Views.DataView(domSV, data, columns, ganttLayout);

他のファイルと同じく上記のコードを「Sample.js」として保存しましょう。

CSS(アプリケーションCSS)

Spread.Viewsの表示やセル内の文字表示などを微調整するため、以下のようなCSSを設定します。これまで同じく「Sample.css」としてファイルを保存します。

/* Spread.Viewsのサイズ指定 */
.spreadViews {
    width: 1400px;
    height: 360px;
}

/* セルの高さ指定 */
.gc-cell {
    line-height: 45px;
}

/* セル内の文字列位置指定 */
.gc-column-header-cell, .cellCss {
    text-align: center;
}

実行結果

「Sample.html」を実行すると、以下のようなガントチャートが表示されます。

f:id:GrapeCity_dev:20180110113208p:plain

いかがだったでしょうか。ガントチャートは便利さの反面、実装が困難で多くの工数がかかると想定されるケースが多いかと思います。そんな時には迷わず、Spread.Views。わずかな手間で高機能なガントチャートをあっという間に実現できます。