作業の進捗状況を表すガントチャートを作成できる「jQuery.ganttView」

作業の進捗を表すのによく利用されるガントチャート。
これをJavaScriptで表示できるのがjQuery.ganttViewです。

sponsors

使用方法

jQuery.ganttViewからファイルをダウンロード。

<link rel="stylesheet" type="text/css" href="jquery.ganttView.css" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="date.js"></script>
<script type="text/javascript" src="jquery.ganttView.js"></script>
<script type="text/javascript">
$(function() {
	$("#ganttChart").ganttView({ 
		data: ganttData,
		slideWidth: 900
	});
});
//ここからデータ(別ファイル化でもOK)
var ganttData = [
	{
		id: 1, name: "項目名1", series: [
			{ name: "サブ項目1",
			start: new Date(2010,00,01), //開始
			end: new Date(2010,00,03) }, //終了
			{ name: "サブ項目2", 
			start: new Date(2010,00,02),
			end: new Date(2010,00,05), 
			color: "#f0f0f0" //棒の色
			}
		]
	},
	//数字を増やして同じように以下の通り記述します。 
	{
		id: 2, name: "Feature 2", series: [
			{ name: "Planned", start: new Date(2010,00,05), end: new Date(2010,00,20) },
			{ name: "Actual", start: new Date(2010,00,06), end: new Date(2010,00,17), color: "#f0f0f0" },
			{ name: "Projected", start: new Date(2010,00,06), end: new Date(2010,00,17), color: "#e0e0e0" }
		]
	}
];
</script>

サンプル


Javascriptサンプルページ一覧
skuare.net

sponsors