【SharePoint / MicrosoftLists】リストに年間ガントチャートを表示する

2023/09/25 追記： 自分でガントチャートの開始日、終了日を設定できるバージョンの書式設定 も作成してみました。こちらも参考にしてみてください。

---

上図のような年間ガントチャートを表示する書式設定を作成してみました。

列の書式設定でスケジュール表示したほうが使い勝手いいかも！ #SharePoint #MicrosoftLists #ListFormatting pic.twitter.com/gRKsHx9myl

— てっちゃん (Tetsuya Kawahara) (@techan_k) 2021年4月10日

以下、作成方法を記載します。

フィールド定義

リストを作成し、次のフィールドを定義します。

列の内部名	列の種類
Title	１行テキスト
Start	日付
End	日付
Year（※何でもOK）	集計値（数値）
Schedule（※何でもOK）	１行テキスト（※何でもOK）

[Year] 列の数式には、次の式を設定します。

=TEXT(Start,"yyyy")

ビューの設定

年度ごとにスケジュールが表示されるようにするため、[Year] 列でグループ化します。
列ヘッダーの [Year] をクリック > [Year でグループ化] をクリックします。

列の書式設定（ガントチャートの表示）

ガントチャートを表示するために、列の書式設定をします。
列ヘッダーの [Shedule] をクリック > [列の設定] > [この列の書式設定] をクリックします。

画面右側に書式設定の画面が表示されるので、[詳細モード] をクリックし、次の JSON をテキストボックスにコピー & ペーストします。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-direction": "column",
    "margin": "5px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "row",
        "justify-content": "space-between",
        "width": "100%",
        "margin-bottom": "3px"
      },
      "attributes": {
        "class": "ms-fontColor-themePrimary ms-fontWeight-bold"
      },
      "children": [
        {
          "elmType": "span",
          "style": {
            "width": "100%",
            "text-align": "left"
          },
          "txtContent": "1"
        },
        {
          "elmType": "span",
          "style": {
            "width": "100%",
            "text-align": "left"
          },
          "txtContent": "3"
        },
        {
          "elmType": "span",
          "style": {
            "width": "100%",
            "text-align": "left"
          },
          "txtContent": "5"
        },
        {
          "elmType": "span",
          "style": {
            "width": "100%",
            "text-align": "left"
          },
          "txtContent": "7"
        },
        {
          "elmType": "span",
          "style": {
            "width": "100%",
            "text-align": "left"
          },
          "txtContent": "9"
        },
        {
          "elmType": "span",
          "style": {
            "width": "100%",
            "text-align": "left"
          },
          "txtContent": "11"
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "width": "100%",
        "border": "2px solid",
        "height": "20px"
      },
      "attributes": {
        "class": "ms-fontColor-themePrimary"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "position": "relative",
            "cursor": "pointer",
            "max-width": "=((Number(Date('' + getYear([$Start]) + '/12/31')) - Number(Date([$Start]))) / (Number(Date('' + getYear([$Start]) + '/12/31')) - Number(Date('' + getYear([$Start]) + '/01/01')))) * 100 + '%'",
            "width": "=((Number(Date([$End])) - Number(Date([$Start]))) / (Number(Date('' + getYear([$Start]) + '/12/31')) - Number(Date('' + getYear([$Start]) + '/01/01')))) * 100 + '%'",
            "left": "=((Number(Date([$Start])) - Number(Date('' + getYear([$Start]) + '/01/01'))) / (Number(Date('' + getYear([$Start]) + '/12/31')) - Number(Date('' + getYear([$Start]) + '/01/01')))) * 100 + '%'"
          },
          "attributes": {
            "class": "ms-bgColor-themePrimary ms-bgColor-themeTertiary--hover"
          },
          "customCardProps": {
            "directionalHint": "topCenter",
            "isBeakVisible": true,
            "openOnEvent": "hover",
            "formatter": {
              "elmType": "div",
              "style": {
                "display": "flex",
                "align-items": "center",
                "justify-content": "center",
                "width": "250px",
                "height": "30px",
                "margin": "10px",
                "font-weight": "bold"
              },
              "attributes": {
                "class": "ms-fontSize-l"
              },
              "children": [
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "span",
                      "txtContent": "[$Start.displayValue]"
                    },
                    {
                      "elmType": "span",
                      "style": {
                        "margin-left": "5px",
                        "margin-right": "5px"
                      },
                      "txtContent": "-"
                    },
                    {
                      "elmType": "span",
                      "txtContent": "[$End.displayValue]"
                    }
                  ]
                }
              ]
            }
          }
        }
      ]
    }
  ]
} 

[保存] をクリックすると、[Schedule] 列にガントチャートが表示されます。

ガントチャートは列幅にあわせて大きさが変わるようになっています。
下図のように、マウスで列幅を調整ください。

列幅調整後、ビューの変更情報（列幅を変更した情報）を保存ください。
変更情報を保存しなければ、リストを開き直したときに、列幅が調整前の列幅で表示されてしまいます。

ビューの書式設定（グループヘッダーの見た目変更）

グループヘッダーの年度を色付けしたい場合は、次からの手順を実施してください。

ビュー名をクリックし、[現在のビューの書式設定] をクリックします。
画面右側に書式設定の画面が表示されるので、次の JSON をテキストボックスにコピー & ペーストします。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "groupProps": {
    "headerFormatter": {
      "elmType": "span",
      "txtContent": "@group.fieldData",
      "style": {
        "padding": "5px 10px 5px 10px",
        "border-radius": "10px",
        "font-size": "16px",
        "font-weight": "bold"
      },
      "attributes": {
        "class": "ms-bgColor-themePrimary ms-fontColor-white"
      }
    }
  }
}

設定後、[保存] をクリックすると、グループヘッダーの年度の見た目が変わります。

ビューの書式設定（グループヘッダーに月度表示）

下図のように、グループヘッダーに月度を表示したい場合は、次からの手順を実施してください。
※注意：このカスタマイズを適用した場合、ガントチャートの大きさは固定です。

ビュー名をクリックし、[現在のビューの書式設定] をクリックします。
画面右側に書式設定の画面が表示されるので、次の JSON をテキストボックスにコピー & ペーストします。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "row"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "position": "relative",
          "display": "flex",
          "width": "383px",
          "align-items": "center",
          "font-size": "15px",
          "height": "35px",
          "margin-top": "5px",
          "margin-bottom": "5px"
        },
        "children": [
          {
            "elmType": "span",
            "style": {
              "position": "relative",
              "display": "flex",
              "height": "100%",
              "align-items": "center",
              "left": "110px"
            },
            "txtContent": "[$Title]"
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "width": "700px",
          "border": "2px solid",
          "height": "25px"
        },
        "attributes": {
          "class": "ms-fontColor-themePrimary"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "position": "relative",
              "cursor": "pointer",
              "max-width": "=((Number(Date('' + getYear([$Start]) + '/12/31')) - Number(Date([$Start]))) / (Number(Date('' + getYear([$Start]) + '/12/31')) - Number(Date('' + getYear([$Start]) + '/01/01')))) * 100 + '%'",
              "width": "=((Number(Date([$End])) - Number(Date([$Start]))) / (Number(Date('' + [$Year] + '/12/31')) - Number(Date('' + [$Year] + '/01/01')))) * 100 + '%'",
              "left": "=((Number(Date([$Start])) - Number(Date('' + [$Year] + '/01/01'))) / (Number(Date('' + [$Year] + '/12/31')) - Number(Date('' + [$Year] + '/01/01')))) * 100 + '%'"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary ms-bgColor-themeLight--hover"
            },
            "customCardProps": {
              "directionalHint": "topCenter",
              "isBeakVisible": true,
              "openOnEvent": "hover",
              "formatter": {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "align-items": "center",
                  "justify-content": "center",
                  "width": "250px",
                  "height": "30px",
                  "margin": "10px",
                  "font-weight": "bold"
                },
                "attributes": {
                  "class": "ms-fontSize-l"
                },
                "children": [
                  {
                    "elmType": "div",
                    "children": [
                      {
                        "elmType": "span",
                        "txtContent": "[$Start.displayValue]"
                      },
                      {
                        "elmType": "span",
                        "style": {
                          "margin-left": "5px",
                          "margin-right": "5px"
                        },
                        "txtContent": "-"
                      },
                      {
                        "elmType": "span",
                        "txtContent": "[$End.displayValue]"
                      }
                    ]
                  }
                ]
              }
            }
          }
        ]
      }
    ]
  },
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "row"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "width": "300px"
          },
          "children": [
            {
              "elmType": "span",
              "txtContent": "@group.fieldData",
              "style": {
                "padding": "5px 10px 5px 10px",
                "border-radius": "10px",
                "font-size": "16px",
                "font-weight": "bold"
              },
              "attributes": {
                "class": "ms-bgColor-themePrimary ms-fontColor-white"
              }
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "display": "flex",
            "flex-direction": "row",
            "justify-content": "space-between",
            "width": "700px",
            "border": "2px solid",
            "height": "32px",
            "font-weight": "bold",
            "font-size": "18px"
          },
          "attributes": {
            "class": "ms-fontColor-themePrimary"
          },
          "children": [
            {
              "elmType": "span",
              "style": {
                "width": "100%",
                "display": "flex",
                "justify-content": "center",
                "align-items": "center"
              },
              "txtContent": "1"
            },
            {
              "elmType": "span",
              "style": {
                "width": "100%",
                "display": "flex",
                "justify-content": "center",
                "align-items": "center"
              },
              "txtContent": "2"
            },
            {
              "elmType": "span",
              "style": {
                "width": "100%",
                "display": "flex",
                "justify-content": "center",
                "align-items": "center"
              },
              "txtContent": "3"
            },
            {
              "elmType": "span",
              "style": {
                "width": "100%",
                "display": "flex",
                "justify-content": "center",
                "align-items": "center"
              },
              "txtContent": "4"
            },
            {
              "elmType": "span",
              "style": {
                "width": "100%",
                "display": "flex",
                "justify-content": "center",
                "align-items": "center"
              },
              "txtContent": "5"
            },
            {
              "elmType": "span",
              "style": {
                "width": "100%",
                "display": "flex",
                "justify-content": "center",
                "align-items": "center"
              },
              "txtContent": "6"
            },
            {
              "elmType": "span",
              "style": {
                "width": "100%",
                "display": "flex",
                "justify-content": "center",
                "align-items": "center"
              },
              "txtContent": "7"
            },
            {
              "elmType": "span",
              "style": {
                "width": "100%",
                "display": "flex",
                "justify-content": "center",
                "align-items": "center"
              },
              "txtContent": "8"
            },
            {
              "elmType": "span",
              "style": {
                "width": "100%",
                "display": "flex",
                "justify-content": "center",
                "align-items": "center"
              },
              "txtContent": "9"
            },
            {
              "elmType": "span",
              "style": {
                "width": "100%",
                "display": "flex",
                "justify-content": "center",
                "align-items": "center"
              },
              "txtContent": "10"
            },
            {
              "elmType": "span",
              "style": {
                "width": "100%",
                "display": "flex",
                "justify-content": "center",
                "align-items": "center"
              },
              "txtContent": "11"
            },
            {
              "elmType": "span",
              "style": {
                "width": "100%",
                "display": "flex",
                "justify-content": "center",
                "align-items": "center"
              },
              "txtContent": "12"
            }
          ]
        }
      ]
    }
  }
}

設定後、[保存] をクリックすると、グループヘッダーに月度が表示されます。

年間スケジュール📆 #SharePoint #MicrosoftLists #ListFormatting pic.twitter.com/omFOK6iaRL

— てっちゃん (Tetsuya Kawahara) (@techan_k) 2021年4月10日

以上、年間ガントチャートを作成する方法でした。