ガントチャートを描画するjQueryプラグイン

2008.12.12 金曜日

プロジェクト管理ツールを色々と見ていたら、ガントチャートはJpGraphというツールで出力する物が殆どで、
JpGraphだと、GDを使って画像で生成してるので綺麗に出力される反面、融通聞きにくいんじゃないかなぁ、という印象。
タスク名等のテキストにリンク張ったりとか出来た方が便利だろうし、画像生成する際のフォントの問題で日本語化も結構手間。

これってJavascriptで出したらどんな感じだろう、と、思いつきで作ってみた。

■サンプル＆ダウンロード
jquery.gantt

ガントチャートプラグイン

$("#gantt01").gantt();

空っぽの状態で生成。

$("#gantt01").gantt({
'tasks':[
{ 'titles': 'Task01', 'start_date': '20081213', 'end_date': '20081222' },
{ 'titles': 'Task02', 'start_date': '20081217', 'end_date': '20081231' },
{ 'titles': 'Task03', 'start_date': '20081227', 'end_date': '20090121' }
]
});

と、引数にタスク情報を渡して一気に生成することも可能。

$('#gantt01').addTask({ 'titles': 'Task04', 'start_date': '20081230', 'end_date': '20090111' });
 
$('#gantt01').addTask([
{ 'titles': 'Task04', 'start_date': '20081230', 'end_date': '20090111' },
{ 'titles': 'Task05', 'start_date': '20081230', 'end_date': '20090111' }
]);

タスクの追加はaddTask()
配列で一気に送ってもOK。

// 当日へ移動
$('#gantt01').setPeriod();
// 日付指定
$('#gantt01').setPeriod('20081212');
// 範囲指定
$('#gantt01').setPeriod('20081212', '20090112');
 
// 次のページ
$('#gantt01').setPeriod('+');
// 7日分送る
$('#gantt01').setPeriod('+7');
// 前のページ
$('#gantt01').setPeriod('-');
// 7日分前へ
$('#gantt01').setPeriod('-7');
 
// 日単位表示
$('#gantt01').setType('date');
// 月単位別表示
$('#gantt01').setType('month');

表示切り替え。

$("#gantt01").gantt({
'type': 'date',                   // グラフのタイプ(date  / month)
'range': 50,                      // 表示範囲 (グラフのコマ数)
'titles': ['title01', 'title02'].  // タイトル項目(配列にすると複数列)
'tasks': {}                       // タスクデータ (オブジェクト)※配列で複数渡しも可
});

生成時のオプション。

$('#gantt01').addTask({
'titles': ['Task05', 'hoge'],  // タイトル項目(配列可。表示数は生成時の設定に依存)
'start_date': '20090103',   // 開始日 ※必須
'end_date': '20090116',     // 終了日 ※必須
'color': '#0000FF',            // グラフの色
'text': 'Task05'                // グラフの中に表示するテキスト
});

タスク追加時のオプション。
開始日と終了日だけは必須。

日付の形式は
YYYYMMDD
YYYY.MM.DD
YYYY/MM/DD
のいずれかで。

急な思いつきでガーッと作ったので色々と雑かも。
ニーズが発生したらまた手を入れると思うけど、ニッチな用途なので延々とアルファバージョンの可能性もｗ

使用は現在の所未定。
一応、プロジェクト管理ツールを自分らの使いやすい形式の物を自作してみたいという野望があるにはあるけど…。

タグ: | カテゴリー: Javascript | コメント(43) »

トラックバックURL

コメント / トラックバック 43 件

  1. まさ ：
    2009.1.19 - 10:16 AM

    ガントチャートを書くプラグインを探して、辿りつきました。
    表示だけですので、十分使えます。

    ありがとうございます。

  2. Maro ：
    2009.1.19 - 10:30 AM

    >まささん

    コメントありがとうございます。
    まだ余り実用例無いので、もし不具合等あればお知らせ頂けたら幸いです。

  3. まさ ：
    2009.1.19 - 10:52 AM

    日付で、’20090408′を指定したら、日付の値がうまく設定されませんでした。
    ‘2009/4/8′でしたらうまくいきます。

    ソースを拝見して、DateDivの中で、/^\d{8}$/ でマッチしたブロックの中(354～358行目)で、sをalertで出してみましたが、ちゃんと入っていました。

    parseIntで、0から始まる文字列は、8進に解釈されるので、0になってしまうのでは・・・

  4. まさ ：
    2009.1.19 - 11:17 AM

    353～357行目を、次のようにしたら、うまくいきました。

    return gnt.dateFormat(
    parseInt(s.substr(0, 4), 10),
    parseInt(s.substr(4, 2), 10),
    parseInt(s.substr(6, 2), 10)
    );

  5. Maro ：
    2009.1.19 - 11:37 AM

    >まささん
    parceIntで8進になってしまうのを失念しておりました。失礼しました。

    上記のご指摘の通り、parceIntの第2引数に「10」を指定し、10進で処理するように修正をして、ファイルを更新しました。
    http://www.maro-z.com/examples/jquery.gantt/jquery.gantt/jquery.gantt.js

    ご報告ありがとうございました。

  6. まさ ：
    2009.1.19 - 11:40 AM

    対応、ありがとうございます。今後とも、よろしくお願いします。

  7. ken ：
    2009.5.8 - 9:28 PM

    とても素晴らしいですね！
    さっそく利用させて頂きます。

    いきなりリクエストなのですが
    日本の祝祭日には対応して頂く事はむずかしでしょうか？

  8. Maro ：
    2009.5.8 - 10:09 PM

    >kenさん
    ありがとうございます。
    まだまだ未完成部分多いと思うので、もし不具合等あれば教えていただけたら幸いです。

    祝祭日に関してですが、
    Javascriptで取得することは可能なのですが、
    背景部分の表示に画像を使用してしまっている為、現状のままでは厳しいですね…。

    背景部分をtableタグ等で描いて、その上にバーを重ねるという方法を採れば可能なのですが、
    升目が多い為、描画するHTMLタグの数がもの凄い量になっちゃいそうなので今回は避けてしまいました。

  9. ken ：
    2009.5.9 - 11:47 PM

    祝日対応の件、無理をいってすみません。
    確かにtableタグでは描画も遅くなりそうですしね。

    下記、実際に使用して気になる点です。

    カレンダーの表示切り替えの部分、[now]をクリックしても
    何も変わらなさそうですがこれはどういう動作をする物でしょうか？
    http://www.maro-z.com/examples/jquery.gantt/
    の[now]も動作してないようです。
    IE7,Firefox3(Mac),safari3(Mac)でテストしてみました。

  10. Maro ：
    2009.5.11 - 11:08 AM

    >kenさん

    おっと…埋め込みを忘れていたようです…。
    失礼しました。

    [now]のリンクは、表示リセット(当日/当月表示に戻る)のサンプルの予定でした。

    setPeriod();
    を、引数無しで実行すると表示がリセットされます。
    サンプルページの方に追加しておきました。

  11. ken ：
    2009.5.12 - 2:30 AM

    ご返信ありがとうございます。
    うまくいきました！

  12. 永島 ：
    2010.1.29 - 12:57 PM

    週単位での表示を作りたいのですが、どうしたらよいでしょうか？
    中に作りかけの週表示があったのですが、表示させるにはどうしたらよいでしょうか？

  13. Maro ：
    2010.1.29 - 2:32 PM

    >>永島さん
    すみません、現状、週単位の表示には対応していないです。
    最初は作ろうとしていたのですが、途中で削ってしまいました…。

  14. Roz ：
    2010.2.24 - 7:24 PM

    Hi,
    I’ve tried to do the same jquery Gantt as yours, but I want to influence it by: 1. add new taskbar in the same task and 2. bring ID on taskbar, wondering how I can do.
    Regards

  15. Maro ：
    2010.2.27 - 3:21 AM

    >>Roz
    Hi.
    In this script,
    same task can only use one of the taskbar.
    and can not be edited for already placed.

    for me now, this script can not be satisfied.
    I’m hoping to do better. Being able to secure work hours if
    (sorry I’m not confident in English
    I hope this explanation is correct.)

  16. Matt ：
    2010.4.26 - 5:25 PM

    Did my post work?

  17. Matt ：
    2010.4.26 - 5:33 PM

    こんにちは

    私は英語（またはその他の）monthname形式でjsファイルを拡張した。すなわち。 4月は2010年（）2010 / 4置き換え

    I have extended the js with English (or other) monthname format. ie. April 2010 (replaces 2010/4)

    106:
    month = $(”+gnt.getMonthName(y, m, d)+’ ‘+y+”);
    291-(add):
    gnt.getMonthName = function(y, m, d){
    var dateObj = new Date(y, m-1, d);
    var month=new Array(12);
    month[0]=”January”;
    month[1]=”February”;
    month[2]=”March”;
    month[3]=”April”;
    month[4]=”May”;
    month[5]=”June”;
    month[6]=”July”;
    month[7]=”August”;
    month[8]=”September”;
    month[9]=”October”;
    month[10]=”November”;
    month[11]=”December”;
    return month[dateObj.getMonth()];
    }

    ここでは英語datenames、新しい番号のPNGがあります。

    Here are English datenames and new number PNG.

    Day Numbers
    http://www.sendspace.com/file/sxe20x

    Day Letters
    http://www.sendspace.com/file/h5api5

  18. Matt ：
    2010.4.26 - 5:34 PM

    I can’t seem to paste my js code extensions.
    Will you accept them via email?

    ウィルは、電子メールを介して受け入れるだろうか？

  19. Maro ：
    2010.4.26 - 7:11 PM

    >>Matt
    sorry.
    Your comment has been filtered by Akismet plugin.
    I was able to view it.

    and thank you for great works!
    I want to package this for English version.

  20. Matt ：
    2010.5.2 - 4:17 AM

    Awesome… I have had good success so far, and the possibilities in your directions with jquery.gantt are good. Is there a chance that you will revive the project to add a few more useful features?

    恐ろしい…私はこれまで、良い成功している可能性も良いです。チャンスがあることは、プロジェクトをさらにいくつかの便利な機能を追加する復活なるか？

    —-
    我々は、コラボレーションに興味を持っています。

  21. Maro ：
    2010.5.10 - 6:46 PM

    >>Matt
    helpful your source for Veasion 0.3.
    I was using it, and adjusted.
    selectable display of Japanese or English, in JS source.
    http://www.maro-z.com/examples/jquery.gantt/

    Thanks!

  22. Matt ：
    2010.5.25 - 10:52 PM

    Hello again,

    I saw a post about >1 bar in 1 row…
    Have you any ideas / opinions on best way to extend the chain for a new-array?

    Perhaps like…
    $(“#gantt01″).gantt({
    ‘tasks’:[
    { 'single_dates': ['20100701','20100705','20100709'] }
    ]
    });

    I can see this feature would make the gantt.js even more useful.
    We will be trying this so hope to hear your opinion.

  23. Maro ：
    2010.5.27 - 6:49 PM

    Hi Matt.

    I think Future
    – write multiple bar on one task
    – event(single-date task) support

    this script is made by a sudden idea.
    If there is so much demand
    i hope rewrite this high functionality.

    In the future, i have the opportunity to make.

  24. Matt ：
    2010.6.3 - 4:14 PM

    OK, well, that would be very nice.

    を、よく、非常によいでしょう

  25. HubertChang ：
    2010.6.4 - 9:50 AM

    Great! Thanks!

  26. Mike from UK ：
    2010.6.15 - 4:54 PM

    Matt,

    Thanks for the great script.

    I would really like to have > 1 date bar on each task. Please let me know when this might be done.

    Thanks very much.

  27. Mike from UK ：
    2010.6.16 - 5:24 PM

    Hi,

    I have managed to edit the .js to do this so I can now call:
    $(‘#gantt01′).addTask(
    [
    { 'titles': 'Task05', 'dates' : [{'start_date': '20100720', 'end_date': '20100722' },
    {'start_date': '20100723', 'end_date': '20100725' } ],’color’: ‘red’,'text’: ‘Task05′ },
    ]
    );

    I can send the new js to anyone interested.

    Note: the only problem I am left with is lining the two divs up exactly along the same row. Any suggestions would be appreciated.

    Thanks,

    Mike from UK

  28. Mike from UK ：
    2010.6.16 - 6:21 PM

    I have managed to get the layout correct now by altering the CSS.

  29. Matt ：
    2010.6.17 - 7:10 PM

    Mike, I’d be interested in checking out the js + css.
    Please post to sendspace or something?
    btw, Maro is the original author ;)

  30. Maro ：
    2010.6.17 - 7:24 PM

    we names are similar…<g>

  31. Matt ：
    2010.6.22 - 2:51 PM

    Sounds like Mike could help get this next release complete. Mike, did you want to contribute?

  32. Mike from UK ：
    2010.6.23 - 7:29 PM

    Hi,

    Sorry about the delay, I have been away.

    You can download my edited version here: http://www.sendspace.com/file/ukyt4l – feel free to improve if you want.

    The css is the same.

    You can add new tasks by giving the start/end as an array like this:

    $(“#gantt01″).gantt({
    ‘type’: ‘date’,
    ‘range’: 60

    /*
    ,’tasks’:[
    { 'titles': 'Task01', 'dates' : [{'start_date': '20100620', 'end_date': '20100627'} ], ‘color’: ‘#0000FF’,'text’: ‘Task01′},
    { ‘titles’: ‘Task02′, ‘dates’ : [{'start_date': '20100620', 'end_date': '20100622' },
    {'start_date': '20100628', 'end_date': '20100630' },
    {'start_date': '20100716', 'end_date': '20100730' } ],’color’: ‘orange’,'text’: ‘Task02′ },
    { ‘titles’: ‘Task03′, ‘dates’ : [{'start_date': '20100716', 'end_date': '20100730' } ],’color’: ‘#0000FF’,'text’: ‘Task03′ }
    ]
    */
    });

    or like this:

    $(‘#gantt01′).addTask({ ‘titles’: ‘Taks01′, ‘dates’:[{'start_date': '20100701', 'end_date': '20100707'},{'start_date': '20100713', 'end_date': '20100719'} ],’color’: ‘#0000FF’,'text’: ‘test’ });

    I hope this is useful.

    Cheers,

    Mike

  33. Mike from UK ：
    2010.6.23 - 7:37 PM

    I have just remembered that there is some css changes I had to make the bars line up.

    .GNT_tbl .GNT_bar_body {
    background-color: #6699CC;
    /*display: block;*/
    line-height: 8px;
    color: #FFFFFF;
    text-align: center;
    overflow: hidden;
    border: 1px solid #333333;
    margin-left: 1px;
    /* added by mjm start */
    font-size: 10px;
    position:absolute;
    width:100%;
    margin-top:-5px;
    /* added by mjm end */
    }

    This is best I could get and works fine I think.

  34. Matt ：
    2010.6.27 - 2:13 AM

    that’s awesome.
    btw, I got little pedantic with the css and bar positioning.
    To get the border-left + border-right to be within the 1 px ‘date cell’ range made a tiny adjustment.
    + altered the bar height and position as you’ll see.

    $(“#GNT_bar” + d, trObj).css({ //apply the position in the css – 1 per date pair
    ‘left’: barLeft+’px’,
    ‘width’: barWidth-1+’px’
    });

    .GNT_tbl .GNT_bar_body
    {
    background-color: #6699CC;
    line-height: 11px;
    color: #FFFFFF;
    text-align: center;
    overflow: hidden;
    border-top: 1px #333 solid;
    border-bottom: 1px #333 solid;
    margin-left: 1px;
    /* added by mjm start */
    font-size: 10px;
    position: absolute;
    width: 100%;
    margin-top: -6px;
    /* added by mjm end */
    }

  35. スズキ ：
    2010.7.22 - 5:52 PM

    手頃なガントチャートを探しておりました。just meetです。
    初心者の私でも簡単に使えました。
    以前、永島 さんが要望されておりました、週単位表示は
    私もほしい機能です。無理を言って申し訳ありませんが
    是非とも実現お願いします。

  36. Fredy ：
    2010.9.21 - 10:15 PM

    Hi Maro-San,

    first, congratulation for your work,
    would you like to put it onto github (http://github.com) as an open source project, (it’s free)
    if you want I can manage with you the project (on my spare time).
    and maybe other people like Mike and Matt can contribute.

    What do you think?
    Regards
    Fredy

  37. Maro ：
    2010.9.23 - 9:49 PM

    Hi Fredy,

    thanks for invite.
    if this is useful for others, I think it would be nice.

    but now I have to stay away from the web.
    perhaps i would be difficult to manage.

    the script itself, feel free to use.
    if i get a opportunities, I would like to join.

  38. John ：
    2011.4.8 - 6:42 AM

    Team,

    This is really very useful…thank you.

    I have now frozen the title on the top of the screen (my version of tool) but would love to change the calendar from months to week.

    Would you mind helping with this?

    Thanks,
    John

  39. John ：
    2011.5.20 - 3:27 AM

    For any of you that may care. Nov shows up with 31 days. I updated the line

    FROM -
    return Math.ceil((dateTo.getTime() – dateFrom.getTime())/(24 * 60 * 60 * 1000));

    TO -
    return Math.abs((dateTo.getTime() – dateFrom.getTime())/(24 * 60 * 60 * 1000));

  40. maki ：
    2011.5.22 - 11:08 PM

    jqueryでガントチャートで探しておりまして、こちらを試用させていただいております。
    現在、mysqlのDBに保存されているデータを用いて、tasksの配列を作りこもうとしているのですが、うまくいかなくて困っております。
    ↓こんな感じでDBから抽出したdataを配列に変換して、
    $.post(‘./hoge.php’,function(data) {
    var myTask = data.split(“~”);

    ↓タスクとして以下のように記述してみたのですが、チャートが表示されないのです。
    ‘tasks’: myTask

    myTaskを手入力で記述してあげると問題なくチャートが表示されます。
    また、そもそもの戻り値dataについては、ちゃんと返ってきていることを確認できていて、何がおかしいのか見当がつきませんでした。

    なお、Firefox(Win版)で動かしており、エラーコンソールを見てみると、jquery.gantt.jsの165行目でエラーとなっているようで、p.task[i].titles is undefinedと表示されます。

  41. Maro ：
    2011.5.23 - 8:53 PM

    >>makiさん
    ちょっと情報が少ないのではっきりしたことは言えませんが、
    手動とAjaxで、完全に同じ値を入力しているのに動作が異なる場合、Ajaxによるタイムラグが原因になっているケースが多いのですが(オブジェクトの作成される順番等)、その辺りに糸口がないでしょうか

  42. maki ：
    2011.5.24 - 7:48 PM

    おかげさまで、なんとかうまくいきました。
    チャートが表示できなかった直接の原因は、Ajaxのレスポンスがテキスト形式だったことです。
    ポストしたPHP側でmysqlからJSON形式に変換させ、レスポンスをJSON形式で受けて、’tasks’に入れてあげたら、すんなりチャートが表示されました。

    今回、Maroさんにご指摘頂いた「完全に同じ値」に着目して、手動とAjaxそれぞれの配列の中身が、javascriptのtoSource関数で見ると微妙に異なっていたため、Ajaxのレスポンスの形式がよろしくないのではと気づくことができました。

    ありがとうございました!!

  43. Mike ：
    2011.11.14 - 7:54 PM

    John,

    Thanks very much for fixing the October/November day number issue.

    And, yes, we still care very much.

    Mike

コメント