开发者中心包含此范例模板（甘特图查看项目进度），请前往开发者中心下载学习。
Index
概 要
此范例介绍如何使用甘特图显示To Do应用的记录列表。
在记录列表页面，当有可显示的记录时才显示甘特图。
甘特图根据优先度字段的值显示不同的颜色。
年月日根据用户设置的语言自动切换显示。
其他详细内容请查看程序。
完成图
事前准备
表单设置详情如下：
字段名称
字段类型
字段代码
ToDo名称
单行文本框
To_Do
负责人
选择用户
Assignees
优先顺序
下拉菜单
Priority 截止日
日期
Duedate 开始日
日期
From
结束日
日期
To
附件
附件
Attachments
※优先顺序的选项：A、B、C、D、E、F
※其他字段任意设置
编辑器
选择符合自己使用习惯的文本编辑器。
程序范例
通过本应用程序范例来介绍Cybozu CDN 的使用方法，以及 JavaScript和 CSS 的写法。
注意事项
直接使用此处提供的程序范例的情况，才望子不予以保证程序的正常运行
才望子不提供对程序范例的技术支持
PC专用的JavaScript文件
在应用设置页面打开【通过JavaScript / CSS自定义】，从Cybozu CDN 中选择以下库。
jQuery
https://js.cybozu.com/jquery/2.1.1/jquery.min.js
https://js.cybozu.com/jqueryui/1.12.1/jquery-ui.min.jsjQuery.Gantt
https://js.cybozu.com/jquerygantt/20140623/jquery.fn.gantt.min.js
JavaScript 范例
将以下代码拷贝到编辑器，文件命名为【sample-ganttchart.js】，文字编码设为【UTF-8】、无BOM，保存
※文件名任意，但是文件的扩展名要指定为【js】/* * Gantt chart display of sample program * Copyright (c) 2015 Cybozu * * Licensed under the MIT License */ (function() { "use strict"; // Date conversion for Gantt. function convertDateTime(str) { if (str !== "") { return '/Date(' + (new Date(str)).getTime() + ')/'; } return ""; } // To HTML escape function escapeHtml(str) { return str .replace(/&/g, '&') .replace(/</g, '<') .replace(/>/g, '>') .replace(/"/g, '"') .replace(/'/g, '''); } // Record list of events. kintone.events.on('app.record.index.show', function(event) { var records = event.records; var data = []; // Don't display when there is no record. if (records.length === 0) { return; } var elSpace = kintone.app.getHeaderSpaceElement(); // I will adjust the style depending on the version of the design var uiVer = kintone.getUiVersion(); switch (uiVer) { case 1: elSpace.style.marginLeft = "28px"; elSpace.style.marginRight = "28px"; elSpace.style.border = "solid 1px #ccc"; break; default: elSpace.style.marginLeft = "15px"; elSpace.style.marginRight = "15px"; elSpace.style.border = "solid 1px #ccc"; break; } // I create an element of Gantt chart. var elGantt = document.getElementById("gantt"); if (elGantt === null) { elGantt = document.createElement("div"); elGantt.id = "gantt"; elSpace.appendChild(elGantt); } // To switch the moon, the day of the week, depending on the login user's Locale. var user = kintone.getLoginUser(); var ganttMonths, ganttDow, ganttWaitmessage = ""; switch (user['language']) { case "ja": ganttMonths = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']; ganttDow = ['日', '月', '火', '水', '木', '金', '土']; ganttWaitmessage = '表示するまでお待ちください。'; break; case "zh": ganttMonths = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']; ganttDow = ['日', '一', '二', '三', '四', '五', '六']; ganttWaitmessage = '请等待显示'; break; default: ganttMonths = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; ganttDow = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; ganttWaitmessage = 'Please Wait...'; break; } // Set the record. for (var i = 0; i < records.length; i++) { var colorGantt = "ganttGray"; switch (records[i]['Priority']['value']) { case 'A': colorGantt = "ganttRed"; break; case 'B': colorGantt = "ganttOrange"; break; case 'C': colorGantt = "ganttGreen"; break; case 'D': colorGantt = "ganttBlue"; break; case 'E': colorGantt = "ganttYellow"; break; case 'F': colorGantt = "ganttGray"; break; default: colorGantt = "ganttGray"; } var descGantt = "<strong>" + escapeHtml(records[i]['To_Do']['value']) + "</strong>"; if (records[i]['From']['value']) { descGantt += "<br />" + "From: " + escapeHtml(records[i]['From']['value']); } if (records[i]['To']['value']) { descGantt += "<br />" + "To:" + escapeHtml(records[i]['To']['value']); } if (records[i]['Priority']['value']) { descGantt += "<br />" + escapeHtml(records[i]['Priority']['value']); } var obj = { id: escapeHtml(records[i]['$id']['value']), name: escapeHtml(records[i]['To_Do']['value']), values: [{ from: convertDateTime(records[i]['From']['value']), to: convertDateTime(records[i]['To']['value']), desc: descGantt, label: escapeHtml(records[i]['To_Do']['value']), customClass: escapeHtml(colorGantt) }] }; data.push(obj); } // Set in Gantt object. $(elGantt).gantt({ source: data, navigate: "scroll", scale: "days", // days,weeks,months maxScale: "months", minScale: "days", months: ganttMonths, dow: ganttDow, left: "70px", itemsPerPage: 100, waitText: ganttWaitmessage, scrollToToday: true }); }); })();
PC专用的CSS文件
在应用设置页面打开【通过JavaScript / CSS自定义】，从Cybozu CDN 中选择以下库。
jQuery.Gantt
https://js.cybozu.com/jquerygantt/20140623/css/style.css (使用version 20140623)
CSS范例
为了使颜色更加丰富，自己指定了颜色。省略的话程序也可以正常运行。
将以下代码拷贝到编辑器，文件命名为【sample-addin.css」】，文字编码设为【UTF-8】、无BOM，保存
※文件名任意，但是文件的扩展名要指定为【css】/* * Copyright (c) 2015 Cybozu * * Licensed under the MIT License */ .fn-gantt .ganttGray { background-color: #d3d3d3; } .fn-gantt .ganttGray .fn-label { color: #444; } .fn-gantt .ganttYellow { background-color: #ffff99; } .fn-gantt .ganttYellow .fn-label { color: #444; }
设置的页面
以下是【通过JavaScript / CSS自定义】页面的设置范例。
JavaScript / CSS 文件的设置如上图。
返回应用的首页，添加记录，确认自定义的结果是否正常。