ガントチャートのカスタマイズ方法(サブチャートのオンオフ)

kintone カスタマイズ
1

いつもお世話になっております。

 

『To Do をガントチャートで表示する』を参考にさせて頂き、

ガントチャートにサブチャート(下図でいう、descクラス部分のみのチャート)を示す用にしております。

このとき、一番上のメインチャートをクリックすることで、サブチャートの表示オンオフ(オフ時はサブチャート部が畳まれる)ができればと考えております。

onItemClick等で試みるもうまくいかず、行き詰っております。

解決策ございましたら、ぜひご教示ください。

2

nakamura さん

jQuery.Gantt は、折り畳みの機能が無いので、データソースを変更して再描画するしかないと思います。
また、onItemClick は、クリックされたアイテム情報も渡されないようですので、メインチャートの判断も出来ないようです。

期待されている動作とは異なると思いますが、下記のようなコードで表示切替えが出来ると思います。
表示対象データは、要件に合わせて設定してください。

jQuery.Gantt は、機能が少ないので、折り畳みが出来る他のガントチャートライブラリをご検討されたほうがいいかもしれません。

 

$(elGantt).gantt({
...
});

↓ ガントチャート表示を変更

createGantt(true);
function createGantt(pMode) {
var vdata = pMode ? data : [data[0]];
// Set in Gantt object.
$(elGantt).gantt({
source: vdata,
navigate: "scroll",
scale: "days", // days,weeks,months
maxScale: "months",
minScale: "days",
months: ganttMonths,
dow: ganttDow,
left: "70px",
itemsPerPage: 100,
waitText: ganttWaitmessage,
scrollToToday: true,
onItemClick: function() {
createGantt(!pMode);
}
});
}
3

rex0220さん

ありがとうございます。

このライブラリでは折り畳みに対応していないんですね。。。

 

ご教示いただいたコードも参考にさせて頂きます。