# スペースのポータルにガントチャートを表示する
**URL:** https://community.cybozu.dev/t/topic/7469
**Category:** kintone 開発相談
**Created:** [2021 年 4 月 12 日午前 4:11 UTC](https://community.cybozu.dev/t/topic/7469 "2021-04-12T04:11:28Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)
#### Post date: [2021 年 4 月 12 日午前 4:11 UTC](https://community.cybozu.dev/t/topic/7469/1 "2021-04-12T04:11:28Z")
[2021/04/11 定期のメンテナンス](https://community.cybozu.dev/hc/ja/articles/900004649446)で[スペース表示イベント](https://community.cybozu.dev/hc/ja/articles/900006291023)と[スペース情報取得](https://community.cybozu.dev/hc/ja/articles/900005354246)が追加されました。 こちらのAPIを用いて、スペースのポータルにガントチャートを表示してみます。
## サンプル
スペースのポータルにガントチャートを表示します。
### アプリ設定
プロジェクト情報保存用のアプリを用意します。
### コード
#### JavaScript
「kintoneシステム管理 \> JavaScript / CSSでカスタマイズ」にてファイルを読み込みます。 下記を順に読み込みます。
- [https://js.cybozu.com/kintone-rest-api-client/1.12.1/KintoneRestAPIClient.min.js](https://js.cybozu.com/kintone-rest-api-client/1.12.1/KintoneRestAPIClient.min.js)
- [https://code.highcharts.com/gantt/highcharts-gantt.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){varspaceId=\*\*\*\*;//ガントチャートを表示するスペースのIDif(Number(event.spaceId)!==spaceId){returnevent;}varappId=\*\*\*\*;//参照するアプリのIDvarprojectNameField='Project';vartaskTableField='Table';vartaskNameField='Task';varstartDateField='Start';varendDateField='End';varclient=newKintoneRestAPIClient();varganttChartContainer=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:newDate(row.value[startDateField].value).getTime(),end:newDate(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);}returnevent;});})();
```
---
### Author:  [@Legacy\_Account2782](https://community.cybozu.dev/u/Legacy_Account2782)
#### Post date: [2021 年 7 月 3 日午後 12:50 UTC](https://community.cybozu.dev/t/topic/7469/2 "2021-07-03T12:50:56Z")
いつもお世話になっております。
スペースでのガントチャート、とても魅力的ですね。
大変恐縮なのですが、・種別（ドロップダウン）・start（日付）・end（日付）の場合でも可能でしょうか。
---
### Author:  [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)
#### Post date: [2021 年 7 月 26 日午前 1:34 UTC](https://community.cybozu.dev/t/topic/7469/3 "2021-07-26T01:34:15Z")
ジェシーおいたんさん
お世話になっております。
返信が遅くなり申し訳ございません。
解決済みかもしれませんが…。可能です。
下記がHighchartsのガントチャートのドキュメントになるので、こちらに合うようにデータを整形すればよいかと思います。
[https://www.highcharts.com/docs/gantt/getting-started-gantt](https://www.highcharts.com/docs/gantt/getting-started-gantt)