2021/04/11 定期のメンテナンスでスペース表示イベントとスペース情報取得が追加されました。 こちらのAPIを用いて、スペースのポータルにガントチャートを表示してみます。
サンプル
スペースのポータルにガントチャートを表示します。
アプリ設定
プロジェクト情報保存用のアプリを用意します。
コード
JavaScript
「kintoneシステム管理 > JavaScript / CSSでカスタマイズ」にてファイルを読み込みます。 下記を順に読み込みます。
- https://js.cybozu.com/kintone-rest-api-client/1.12.1/KintoneRestAPIClient.min.js
- https://code.highcharts.com/gantt/highcharts-gantt.js
- sample.js
・sample.js
(function(){ "use strict"; kintone.events.on([ 'space.portal.show', 'mobile.space.portal.show', ], function(event){ var spaceId = ****; //ガントチャートを表示するスペースのID if(Number(event.spaceId) !== spaceId){ return event; } var appId = ****; //参照するアプリのID var projectNameField = 'Project'; var taskTableField = 'Table'; var taskNameField = 'Task'; var startDateField = 'Start'; var endDateField = 'End'; var client = new KintoneRestAPIClient(); var ganttChartContainer = document.createElement('div'); client.record.getAllRecordsWithCursor({ app: appId, query: 'order by $id asc' }).then(function(records){ Highcharts.ganttChart(ganttChartContainer, { series: records.map(function(record){ return { name: record[projectNameField].value, data: [{ id: record[projectNameField].value, name: record[projectNameField].value, }].concat(record[taskTableField].value.map(function(row){ return { name: row.value[taskNameField].value, start: new Date(row.value[startDateField].value).getTime(), end: new Date(row.value[endDateField].value).getTime(), parent: record[projectNameField].value } })) } }), }); }); if(event.type === 'space.portal.show') { kintone.space.portal.getContentSpaceElement().appendChild(ganttChartContainer); }else{ kintone.mobile.space.portal.getContentSpaceElement().appendChild(ganttChartContainer); } return event; }); })();
2件のコメント
いつもお世話になっております。
スペースでのガントチャート、とても魅力的ですね。
大変恐縮なのですが、・種別(ドロップダウン)・start(日付)・end(日付)の場合でも可能でしょうか。
ジェシーおいたんさん
お世話になっております。
返信が遅くなり申し訳ございません。
解決済みかもしれませんが…。可能です。
下記がHighchartsのガントチャートのドキュメントになるので、こちらに合うようにデータを整形すればよいかと思います。
https://www.highcharts.com/docs/gantt/getting-started-gantt