情報の科学私記

量子アニーリング、情報統計力学、数理最適化に興味があります。普段の研究で学び得たことを発信しています。

ガントチャートライブラリ「Gantt-Chart」にテキストを追加する

ガントチャートライブラリ「Gantt-Chart」を紹介します。 また、コードの一部を変更し、各チャートにテキスト情報を加えてみます。

Gantt-Chartとは

Gantt-Chartとは、D3.jsを利用したガントチャートライブラリです。

D3.jsはjavascriptのライブラリで、SVGCanvas、およびHTMLといったweb技術を用いてデータを視覚化できます。 ちなみにD3の意味は、Data-Driven Documents(データ駆動ドキュメント)だそうです。

それとD3.jsのお気持ちとしては、「複雑なデータの可視化でも簡潔に記述できる」のであって、「グラフを簡単に表示できる」のではありません。速度を重視しさくっと表示したいのであれば、pythonであればmatplotlibといった、各言語の可視化ライブラリを用いるべきでしょう。

話を戻すと、Gantt-ChartはD3.jsをラップしているため、D3.jsをそれほど理解しなくても利用することができます。今回は、中のコードをいじるため、以降D3.jsも少々取り上げます。

D3.js 公式 http://d3js.org/
Gantt-Chart GitHub https://github.com/dk8996/Gantt-Chart

とりあえず使ってみる

Gantt-ChartのGitHubにあるサンプルを見てみましょう。適当な場所にデータを持ってきます。

% git clone https://github.com/dk8996/Gantt-Chart.git

ディレクトリ構成は、以下の通りです。

% tree Gantt-Chart
Gantt-Chart/
├── LICENSE
├── README.md
├── examples
│   ├── example.css
│   ├── example.html
│   ├── example.js
│   ├── example2.html
│   ├── example2.js
│   ├── example3.html
│   ├── example3.js
│   ├── external-data-examples
│   │   ├── example.css
│   │   ├── example.html
│   │   ├── example.js
│   │   └── example.json
│   ├── screenshot1.png
│   └── screenshot2.png
├── gantt-chart-d3.js
├── job-tracker-parser.js
├── jobtracker.jsp
└── lib
    └── d3
        ├── LICENSE
        └── d3.v3.min.js

examples/examples.htmlをブラウザで開いてみます。

Gantt-Chartのサンプル
Gantt-Chartのサンプル

基本的な書き方

データの詳細は、examples/example.jsに記述します。記述方法の概要については、以下のページと動画が参考になります。

テキストを追加する

さて、テキストを追加する方法を紹介します。下の図のように、それぞれのチャートのそばにテキストを追加します。ここでは、Sato,Suzuki,Tanakaというテキストにしました。

"テキストを追加したガントチャート"
テキストを追加したガントチャート

編集するファイルは、example.jsとgantt-chart-d3.jsです。ここでは、そのまま変更を加えますが、本来は複製するのがよいでしょう。
まず、example.jsを編集します。データを記述するtasksというオブジェクトの配列に、テキストを加えます。

var tasks = [
{"startDate":new Date("Sun Dec 09 01:36:45 EST 2012"),"endDate":new Date("Sun Dec 09 02:36:45 EST 2012"),"taskName":"E Job","status":"RUNNING", "txt": "Sato"},
{"startDate":new Date("Sun Dec 09 04:56:32 EST 2012"),"endDate":new Date("Sun Dec 09 06:35:47 EST 2012"),"taskName":"A Job","status":"RUNNING", "txt": "Suzuki"},
(中略)
{"startDate":new Date("Sat Dec 08 23:12:24 EST 2012"),"endDate":new Date("Sun Dec 09 00:26:13 EST 2012"),"taskName":"A Job","status":"KILLED", "txt": "Suzuki"}];

次に、gantt-chart-d3.jsを編集します。

      svg.selectAll(".chart")
     .data(tasks, keyFunction).enter()
     .append("rect")
     .attr("rx", 5)
         .attr("ry", 5)
     .attr("class", function(d){ 
         if(taskStatus[d.status] == null){ return "bar";}
         return taskStatus[d.status];
         }) 
     .attr("y", 0)
     .attr("transform", rectTransform)
     .attr("height", function(d) { return y.rangeBand(); })
     .attr("width", function(d) { 
         return Math.max(1,(x(d.endDate) - x(d.startDate))); 
         });

上記の部分を、以下のコードに修正します。

  var g = svg.selectAll(".chart").data(tasks, keyFunction).enter()
   .append("g")
   .attr("y", 0)
   .attr("transform", rectTransform)
   .attr("height", function(d) { return y.rangeBand(); })
   .attr("width", function(d) { 
       return Math.max(1,(x(d.endDate) - x(d.startDate))); 
       });
  var rect = g.append("rect");
  rect.attr("rx", 5)
   .attr("ry", 5)
   .attr("class", function(d){ 
       if(taskStatus[d.status] == null){ return "cape";}
       return taskStatus[d.status];
       })
   .attr("y", 0)
   .attr("height", function(d) { return y.rangeBand()*0.7; })
   .attr("width", function(d) { 
       return Math.max(1,(x(d.endDate) - x(d.startDate))); 
       });
   g.append("text")
   .attr("x", 0)
   .attr("y", rect.attr("height")*1.2)
   .attr("font-size", 10)
   .text(function(d) { return d.txt; });

gantt-chart-d3.jsの最後のあたりに以下の記述を追加します。

    gantt.txt = function(value) {
  if (!arguments.length)
      return txt;
  txt = value;
  return gantt;
    };

チャートの四角形を表示するrect要素の直後にtext要素を加えるため、それらをg要素で囲っています。今回初めてD3.jsに触れたので、冗長な記述かもしれません。

次回は、pythonで計算したデータをGantt-Chartを用いて表示したいと思っているため、jupyter notebook上で今回のことを実現したいと思います。

これで以上となります。