IgxDataChart – RangeBarSeries を使ってガント風スケジュール表示を実現する方法

Ignite UI for Angular には専用のガントチャート コンポーネントはありませんが、IgxDataChart の IgxRangeBarSeries を利用することで、タスクの開始日・終了日を横棒で表現したガント風のスケジュール表示を実現できます。

IgxDataChart の設定

Y 軸にタスク名を並べるため IgxCategoryYAxis を使用します。isInverted を true にすると上から下へ順番にタスクが並びます。X 軸は日数オフセットを扱う IgxNumericXAxis を使用し、formatLabel で数値を日付文字列に変換して表示します。

<igx-data-chart name="Chart" #chart [dataSource]="ganttItems">
    <igx-category-y-axis name="yAxis" #yAxis label="task"
        [isInverted]="true" gap="0.7">
    </igx-category-y-axis>
    <igx-numeric-x-axis name="xAxis" #xAxis [minimumValue]="0"
        [interval]="1" [formatLabel]="formatXAxisAsDate">
    </igx-numeric-x-axis>
</igx-data-chart>

データは各タスクの開始オフセット・終了オフセット・タスク名などをプロパティに持つオブジェクト配列として用意します。

public ganttItems = [
  { task: '要件定義', start: 1,  end: 4,  center: 2.5, yPosition: 0.25, durationLabel: '3日', color: '#00695C' },
  { task: '設計',     start: 3,  end: 7,  center: 5,   yPosition: 1.25, durationLabel: '4日', color: '#00838F' },
  { task: '実装',     start: 6,  end: 12, center: 9,   yPosition: 2.25, durationLabel: '6日', color: '#1565C0' },
  { task: 'テスト',   start: 11, end: 15, center: 13,  yPosition: 3.25, durationLabel: '4日', color: '#6A1B9A' },
  { task: 'リリース', start: 16, end: 18, center: 17,  yPosition: 4.25, durationLabel: '2日', color: '#EF6C00' },
];

RangeBarSeries の使用

IgxRangeBarSeries の lowMemberPath に開始オフセット、highMemberPath に終了オフセットを指定することで、各タスクの期間を横棒として描画します。

<igx-range-bar-series name="Schedule" #rangeSeries
    [dataSource]="ganttItems" [xAxis]="xAxis" [yAxis]="yAxis"
    [lowMemberPath]="'start'" [highMemberPath]="'end'"
    [isCustomCategoryStyleAllowed]="true"
    [showDefaultTooltip]="false" [tooltipTemplate]="valueTooltip"
    (assigningCategoryStyle)="onAssigningCategoryStyle($event)">
</igx-range-bar-series>

assigningCategoryStyle イベントの処理

タスクごとに異なる色を付けるには、isCustomCategoryStyleAllowed を true に設定したうえで、assigningCategoryStyle イベントを処理します。イベント引数の startIndex でデータのインデックスを取得し、args.fill と args.stroke に色を設定します。

public onAssigningCategoryStyle(event: { args: IgxAssigningCategoryStyleEventArgs }): void {
  const index = event.args.startIndex;
  if (index < 0) return;
  const color = this.ganttItems[index]?.color;
  if (color) {
    event.args.fill = color;
    event.args.stroke = color;
  }
}

IgxCalloutLayer による期間ラベルの表示

各バーの中央に期間ラベルを重ねて表示するには IgxCalloutLayer を使用します。xMemberPath・yMemberPath でラベルの座標を指定し、labelMemberPath で表示する文字列のプロパティを指定します。calloutBackground と calloutLeaderBrush を transparent にすることで、吹き出し背景を消してテキストだけを浮かせることができます。

<igx-callout-layer name="DurationLabels" [dataSource]="ganttItems"
    xMemberPath="center" yMemberPath="yPosition"
    keyMemberPath="task"  labelMemberPath="durationLabel"
    targetSeriesName="Schedule"
    calloutTextColor="white" calloutBackground="transparent"
    calloutLeaderBrush="transparent" allowedPositions="Top"
    [calloutBadgeVisible]="false" [mouseOverEnabled]="false">
</igx-callout-layer>

X 軸ラベルの日付フォーマット

X 軸の値は「プロジェクト開始日からの日数オフセット」として管理し、IgxNumericXAxis の formatLabel プロパティに変換関数を渡すことで軸ラベルを日付文字列として表示します。

private readonly projectStartDate = new Date(2026, 11, 1);

public formatXAxisAsDate = (value: unknown): string => {
  const offsetDays = typeof value === 'number' ? value : Number(value);
  return Number.isFinite(offsetDays) ? this.offsetToDate(offsetDays) : '';
};

public offsetToDate(offsetDays: number): string {
  const date = new Date(this.projectStartDate);
  date.setDate(this.projectStartDate.getDate() + Math.round(offsetDays));
  return date.toLocaleDateString('ja-JP', { month: 'numeric', day: 'numeric' });
}

実行結果

各タスクが色分けされた横棒で表示され、バーの中央には期間ラベルが白文字で重なります。X 軸にはプロジェクト開始日を基準とした日付が表示され、ガント チャートに近い見た目のスケジュール表示が実現できます。