いつも助けていただいてありがとうございます。
タイトルの件、「To Do をガントチャートで表示する」のサンプルコードを参考に作成しております。
縦はＡ～Ｐ（作業名）、横は年月日の部分を×月○週（週は１～４週）で区切り、棒を引っ張る期間は開始月・開始週～終了月・終了週とします。
サンプルコードに手を加えた結果、下図のようにかけ離れた図になってしまいました。
開始月・週、終了月・週は、それぞれ違います。
色はＡ・Ｂのみ指定してありますので、合っています。
私の作ったコードは、以下のとおりです。
とても長いのですが、助言いただけたらありがたいです。よろしくお願いします。
(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 = [‘1’, ‘2’, ‘3’, ‘4’];
ganttWaitmessage = ‘表示するまでお待ちください’;
break;
case “zh”:
ganttMonths = [‘一月’, ‘二月’, ‘三月’, ‘四月’, ‘五月’, ‘六月’, ‘七月’, ‘八月’, ‘九月’, ‘十月’, ‘十一月’, ‘十二月’];
ganttDow = [‘1’, ‘2’, ‘3’, ‘4’];
ganttWaitmessage = ‘请等待显示屏’;
break;
default:
ganttMonths = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’];
ganttDow = [‘1’, ‘2’, ‘3’, ‘4’];
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][‘nousakumotsu’][‘value’]) + “</strong>” + " " + escapeHtml(records[i][‘作業名’][‘value’]) ;
if (records[i][‘開始月’][‘value’]) {
descGantt += “<br />” + "From: " + escapeHtml(records[i][‘開始月’][‘value’]);
}
if (records[i][‘終了月’][‘value’]) {
descGantt += “<br />” + "To: " + escapeHtml(records[i][‘終了月’][‘value’]);
}
var obj = {
id: escapeHtml(records[i][‘$id’][‘value’]),
name: escapeHtml(records[i][‘nousakumotsu’][‘value’]) + " " + escapeHtml(records[i][‘作業名’][‘value’]),
values: [{
from: convertDateTime(records[i][‘開始月’][‘value’]),
to: convertDateTime(records[i][‘終了月’][‘value’]),
desc: descGantt,
label: escapeHtml(records[i][‘nousakumotsu’][‘value’]) + " " + escapeHtml(records[i][‘作業名’][‘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: “weeks”,
months: ganttMonths,
dow: ganttDow,
left: “70px”,
itemsPerPage: 100,
waitText: ganttWaitmessage,
scrollToToday: true
});
});
})();