【jQuery】手軽にガントチャートが作れるプラグイン(jQuery.Gantt)

gantt1

ガントチャートが作れるjQueryプラグインjQuery.Ganttの使い方を紹介していきます!
このプラグインを使うとスケジュール管理もjQueryでできます。(需要あるのかな。。)

[スポンサーリンク]

jQuery.Ganttをダウンロードする

jQuery.Ganttを取得します。
ダウンロードは本家GitHubからどうぞ。
Download ZIPをクリックしてダウンロードします。

本家のリファレンスはこちらからどうぞ。

jQuery.Ganttを使ったサンプルソース

HTMLのヘッダにコチラをセットして下さい。

<link href="css/style.css" type="text/css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript" ></script>
<script src="js/jquery.fn.gantt.js"></script>

必要なCSS

<style type="text/css">
    .fn-gantt *,
    .fn-gantt *:after,
    .fn-gantt *:before {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
</style>

HTMLはたったこれだけでOKです。

		<div class="contain">
			<div class="gantt"></div>
		</div>

JavaScript部分のサンプルソースです。
月日と曜日を日本語化することができます。(ハイライト部分参照)

<script>
		$(function() {
			"use strict";
			$(".gantt").gantt({
				source: [{
					name: "設計",
					desc: "外部",
					values: [{
						from: "/Date(1320192000000)/",
						to: "/Date(1320392000000)/",
						label: "外部",
						customClass: "ganttRed"
					}]
				},{
					name: " ",
					desc: "内部",
					values: [{
						from: "/Date(1320392000000)/",
						to: "/Date(1320592000000)/",
						label: "内部",
						customClass: "ganttRed"
					}]
				}],
				navigate: "scroll",
				maxScale: "hours",
				itemsPerPage: 10,
				months : ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
				dow : ["日", "月", "火", "水", "木", "金", "土"],
				onItemClick: function(data) {
					alert("進捗バーがクリックされました。");
				},
				onAddClick: function(dt, rowId) {
					alert("空白部分がクリックされました。");
				},
				onRender: function() {
					if (window.console && typeof console.log === "function") {
						console.log("chart rendered");
					}
				}
			});
			prettyPrint();
		});
</script>

デモ

実際に動かすことが出来ます

さいごに

正直本格的なガンチャートには程遠いです。
社外に何か共有するときや、サマリ程度で使う分には十分かもしれませんね。
それでは!