Bubble/ノーコード開発

スクロール可能なガントチャートを作成する方法【Bubble】

2024年3月21日 by atom-admin / 0件のコメント

今回は右の画像のような、プロジェクトの進捗管理に便利なガントチャートを、Bubble上で簡単に作成できます。今回は「Gantt & Timeline Chart」という有料プラグイン（買い切り$40）を使用します。ガントチャートの作り方と、具体的な活用例をご紹介します。

プラグインのインストール

Bubbleエディタで「プラグイン」をクリック
検索窓に「Gantt & Timeline Chart」と入力し、プラグインを選択
「このプラグインをインストールする」をクリック

ガントチャートエレメントの配置・データ参照する項目の設定

プラグインをインストールした後、ガントチャートを表示したいページで「Gantt & Timeline Chart」要素を選択し、ページ上に配置します。
続いてガントチャートと表示するデータの項目を紐づけます。※ガントチャートとデータを紐づけた後からフィールド名を変更してください。フィールド名が異なる場合、エレメントのプロパティ上にProgressという項目が表示されないことがあります。
- 参照元のDBの構成
  - Task data type
    - Unique ID (デフォルト)
    - Name (Type:Text)
    - Progress (Type:Number)
    - Starting date (Type:Date)
    - Ending date (Type:Date)
    - Draw Arrow from (Type:Text)
      - 今回は使用しませんが、一応作成しておきます。
- エレメントのプロパティで下記を設定します。
  - Data Fields:
    - ID Field: 「unique id」フィールドを指定
    - Name Field: 「Name」フィールドを指定
    - Start Date Field: 「Starting date」フィールドを指定
    - End Date Field: 「Ending date」フィールドを指定
    - Progress Field: 「Progress」フィールドを指定
色設定などスタイルのカスタマイズが必要であれば、プロパティペインの他の項目を調整します。

タスクの作成・編集ページの実装は今回省略しますが、以下のフィールドを持つデータを追加することで、プラグインを設置したページにガントチャートを簡単に表示することができます。

Name (タスク名)
Progress (進捗度の数値)
Starting date (タスクの開始日)
Ending date (タスクの終了日)

タスク管理アプリの画面にガントチャートを組み込むなど、様々な活用が可能です。

実際のデータ作成フローは別途検討が必要ですが、このプラグインを使えば、視覚的でわかりやすいガントチャートの実装が手軽にできます。

また、今回のプラグインはView modeを切り替えることが可能なため、ボタンを押下時にstateの値が変更できるようなワークフローを設定して、その値に沿ってView Modeを変更することで、1/4日~1ヶ月ごとの範囲を調整できるようになっています。

1/4日表示

1ヶ月表示

Bubble, 機能紹介

コメントを残すコメントをキャンセル