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

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

使用方法 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>


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

sponsors

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

記事作成:
記事URL:

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