新規投稿
フォローする

スペースのポータルにガントチャートを表示する

2021/04/11 定期のメンテナンススペース表示イベントスペース情報取得が追加されました。 こちらのAPIを用いて、スペースのポータルにガントチャートを表示してみます。

サンプル

スペースのポータルにガントチャートを表示します。

アプリ設定

プロジェクト情報保存用のアプリを用意します。

コード

JavaScript

「kintoneシステム管理 > JavaScript / CSSでカスタマイズ」にてファイルを読み込みます。 下記を順に読み込みます。

・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;
  });
})();
0

2件のコメント

Avatar
ジェシーおいたん

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

スペースでのガントチャート、とても魅力的ですね。

大変恐縮なのですが、・種別(ドロップダウン)・start(日付)・end(日付)の場合でも可能でしょうか。

0
Avatar
江田篤史

ジェシーおいたんさん

お世話になっております。

返信が遅くなり申し訳ございません。

解決済みかもしれませんが…。可能です。

下記がHighchartsのガントチャートのドキュメントになるので、こちらに合うようにデータを整形すればよいかと思います。
https://www.highcharts.com/docs/gantt/getting-started-gantt

0
サインインしてコメントを残してください。