Latest前のバージョン :ガントチャート Back to Doc
編集時間: Doc Length:Image Number:Directory Number: 変更理由:

Catalog:

一.概要编辑

1.バージョン

帳票サーババージョン機能変更
11.0
/
11.0.3
新機能:現在時間線の表示設定をサポートします。詳細は第二章第4.2節をご覧ください。

新機能:プロットエリア内で軸枠線、コンテンツ枠線の色変更をサポートします。詳細は第二章第4.5節をご覧ください。

11.0.29

最適化: 時間軸レベルに対応する時間表示効果を最適化しました。

最適化: プレビュー時、[タイトル]を選択後、レベルスケーリングウィジェットをドラッグすることで、選択した位置でズームを実現可能です。

詳細は第二章第4.4節ご覧ください


2.アプリケーションシナリオ

ガントチャートは、横道図やバーチャートとも呼ばれ、アクティビティのリストと時間スケールを使用して、プロジェクトのアクティビティの順序と持続時間を視覚的に示す図表です。

ガントチャートの横軸は時間を示し、縦軸はアクティビティ(プロジェクト)を示します。線はアクティビティが全体の時間周期における計画および実際の進捗状況を示し、現在の作業進捗や作業計画の実行状況を評価するためによく使用されます。

期待される効果は以下の通りです:

最终效果图-原始.jpg

3.チャートの特徴

利点:ガントチャートはシンプルで直感的であり、一般のユーザーにも理解しやすいです。通常、30項目以内の中小規模プロジェクトに適しており、複雑な計算や分析を必要としません。

欠点:ガントチャートは、実際にはプロジェクト管理の三重制約(時間、コスト、範囲)の一部のみを反映します。主に進行管理(時間)に焦点を当てるためです。

二.例编辑

次に、サンプルを用いてガントチャートの作成方法および各属性について紹介します。

他のグラフ属性については、以下のドキュメントを参照してください:「チャートデータ」、「チャートスタイル」、「チャート特殊効果」。

1.テンプレートの準備

1)デザイナーの左上にある[ ファイル > 一般帳票新規作成 ]をクリックします。チャートの表示効果を向上させるため、トップにあるメニューバーの[ テンプレート > ページの設定 ]をクリックし、ページの向きを[横方向]に変更します。

2)Excelデータをダウンロードします:

プロジェクト計画進捗.xlsx

このデータを %FR_HOME%\webapps\webroot\WEB-INF\reportlets パスに保存します。

3)新しいファイルデータセット[プロジェクト計画進捗]を作成し、ファイルタイプにExcelを選択し、ダウンロードしたExcelファイルを選びます。

2.1-V1.png

2.チャートの挿入

セル範囲を選択し、上部ツールバーの[チャート]ボタンをクリックして、[ガントチャート]を挿入します。

下の画像の通りです:

2.2-V1.jpg

3.チャートデータ

3.1データ項目の概要

チャートを選択し、右側のプロパティパネルの[セル要素]をクリックし、[データ]をクリックします。ガントチャートのデータバインディングの設定項目が[ガントチャート]と[タスクの関連付け]に分かれていることが確認できます。下の画像の通りです:

2.3.1-V1.jpg

1)通常、[ガントチャート]下のデータ項目をバインドするだけで十分です。各データ項目の意味は以下の通りです:

プロジェクト名:プロジェクトのタイプまたはステージを表示するために使用され、複数のプロジェクトの表示をサポートします。

  • 系列名:プロジェクト内のサブタスクをバインドするために使用され、表示時に系列に基づいて色などを決定します。

  • 開始日時:プロジェクトタスクの開始日時。

  • 終了日時:プロジェクトタスクの終了日時。

  • マーカー日時:プロジェクトのマーカー日時。マーカー日時を選択するか、[無]を選択できます。

  • 進捗:プロジェクトタスクの進捗。

  • タスクID:プロジェクトタスクのID。通常は[無]を選択しますが、タスク関連を設定する必要がある場合は、タスクIDをバインドする必要があります。

2)2つのタスク間の関連関係を表示する必要がある場合、[タスクの関連付け]にデータをバインドする必要があります。

  • 開始タスクID:2つの関連タスクのうち、開始タスクのID。

  • 終了タスクID:2つの関連タスクのうち、終了タスクのID。

  • 関連タイプ:2つのタスクの関連タイプ。

3.2 データのバインド

注意:使いやすさを考慮して、テンプレートに使うデータをビルトインデータにしました。データセットはビルトインデータセットです。

2.3.2-V1.jpg
4.チャートスタイル

本例のガントチャートの最終的な効果は、以下の図の通りです(図中にはガントチャートの一部のスタイル説明が示されています):

2.4-原始-V1.jpg

次に、ガントチャートに特有のスタイル設定について詳しく説明します。もっとチャートスタイル設定はヘルプドキュメント「チャートスタイル」をご参照ください。

4.1ラベル

[スタイル>ラベル]をクリックします。デフォルトではラベルは無効化されていますが、[ラベル]に有効化すると、ガントチャートのラベル設定項目が表示されます。本例では以下の図のように設定します:

2.4.1-V1.jpg

注意:ラベルはタスクの完了部分のデータを表示することを目的としており、ラベルの位置は実際のグラフの進捗に基づいてマークされます。

例えば、進捗が100%の場合、ラベルはグラフの中央に配置され、進捗が0%の場合、ラベルの位置はグラフの開始位置に対応します。以下の図の通りです:

2.4.1-2 V1.jpg

4.2系列

ガントチャート系列の各設定項目は以下の通りです:

  • 配色計画:異なる系列の線の色を管理します。系列のグラフは[進捗]の値に基づいて完了部分と未完了部分に分けられます。完了部分の系列配色の不透明度はデフォルトで100%、未完了部分の系列配色の不透明度はデフォルトで50%で、設定変更はサポートされていません。

  • 系列改行:デフォルトは[無効]です。有効にすると、系列の線の表示高さがプロジェクトの行の高さおよび系列の数に基づいて再計算され、[無効]の場合に比べて細い線になります。

  • 関連線:関連線の線のスタイル、色を管理します。データが[タスク関連付け]にバインドされている場合にのみ表示されます。

  • マイルストーン:マイルストーンのポイントスタイル、色などを管理します。データが[マーカー日時]フィールドにバインドされている場合にのみ表示されます。ビッグデータモードはデフォルトで[無効]です。データ量が多い場合は有効にすることができます。有効化すると、一部の機能が制限されます。例えば、ラベルが表示されません。

  • 補助線表示: 現在時間線はデフォルトで[非表示]です。[表示]を選択すると、チャートに縦線が表示され、マウスをフローティングすると現在の時間が表示されます。

注意:バージョン11.0.3以降のデザイナーで[現在時間線]を設定することがサポートされています。

本例では、[現在時間線]を[表示]に変更し、他はデフォルト設定のままにしています。以下の図の通りです:

2.4.2-V1.jpg

4.3プロジェクト軸

ガントチャートのプロジェクト軸とは、チャートの左側に表示されるプロジェクト名やタスクの部分を指します。各設定項目は以下の通りです:

  • 横方向の割合:プロジェクト軸がチャート全体に対して占める横方向の割合の幅。デフォルトは[自動]です。

  • 横方向タイトル:横方向のヘッダーの文字スタイル、色、不透明度を設定できます。

  • 縦方向タイトル:縦方向のヘッダーの文字スタイル、色、不透明度、位置(整列方法)を設定できます。

  • コンテンツ:プロジェクト軸の内容の文字スタイル、色、不透明度、位置(整列方法)を設定できます。

本例では、縦方向タイトルとコンテンツのテキスト位置を[中央]に設定し、その他はデフォルト設定のままにしています。以下の図の通りです:

4.3-V1.jpg

 4.4時間軸

1)ガントチャートの時間軸は、ガントチャートの上部に表示される時間のスパン部分を指します。各設定項目は以下の通りです:

  • 時間ズーム:デフォルトで[有効]に設定されています。有効にすると、グラフの右下に時間ズーム軸が表示され、これをドラッグして時間の表示レベルを調整できます。

  • 初期レベル:ガントチャートの時間表示の初期レベルを選択できます。自動および0~21のレベルに分かれ、デフォルトは[自動]です。対応関係は以下の表を参照してください。

  • 週末ヒント:週末をガントチャートで表示するかどうかを制御します。デフォルトは[有効]で、時間レベルが日単位で表示される場合、週末の色が異なります。

  • 上部タイトル:上層ヘッダーの文字、背景色、不透明度を個別に設定できます。

  • 下部タイトル:下層ヘッダーの文字、背景色、不透明度を個別に設定できます。

本例では、時間軸の設定はすべてデフォルトのままとします。以下の図の通りです:

4.4-V1.jpg

2)初期レベルと時間表示の対応関係は以下の表の通りです:

注意:バージョン11.0.29では、一部のレベル表示が最適化されています。例えば、13~21レベルでは、タイトルに完全な日付が表示されます。

初期レベル時間表示

0

上部[yyyy年] 下部[前または後] 

1

上部[yyyy年] 下部[前または後]さらに広い

2上部[yyyy年] 下部[第*四半期]
3

上部[yyyy,前または後] 下部[*月]

4

上部[yyyy,第*四半期] 下层[*月]

5

上部[yyyy,第*四半期] 下层[*月]さらに広い

6

上部[yyyy年MM月] 下部[第*週]

7上部[yyyy年MM月dd日] 下部[月火...日]
8

上部[yyyy年MM月] 下部[1、2...31]

9

上部[yyyy年MM月] 下部[1、2...31] さらに広い

10

上部[yyyy年MM月dd日] 下部[午前または午後

11

上部[yyyy年MM月dd日] 下部[0~6時、6~12時、12~18時、18~24時

12

上部[yyyy年MM月dd日] 下部[0、1、...23]

13

上部[yyyy年MM月dd日,午前または午後] 下部[0、1、...23]

14

上部[yyyy年MM月dd日 0:00、1:00、...23:00] 下部[*:00、*:30]

15上部[yyyy年MM月dd日 0:00、1:00、...23:00] 下部[0、10、...50]
16

上部[yyyy年MM月dd日 0:00、0:30、...23:30] 下部[0、5、...55]

17

上部[yyyy年MM月dd日 0:00、0:30、...23:30] 下部[0、5、...55] より広い

18

上部[yyyy年MM月dd日 0:00、0:30、...23:30] 下部[0、1、...59]

19

上部[yyyy年MM月dd日 0:00、0:10、...23:50] 下部[0、1、...59]

20

上部[yyyy年MM月dd日 0:00、0:01、...23:59] 下部[0、30]

21

上部[yyyy年MM月dd日 0:00、0:01、...23:59] 下部[0、10、...50]


3)プレビュー時にガントチャートの右下のレベルズームウィジェットをドラッグすると、時間軸のレベルを変更できます。

バージョン11.0.29以降では、[下部タイトル]をクリックして選択した後、レベルズームウィジェットをドラッグすることで、選択した位置でズームを行うことができます。効果は以下の図の通りです。

动态表头截取.gif

 4.5背景

ガントチャートの背景設定は[チャートエリア]と[プロットエリア]に分かれています。以下の図の通りです:

注意:バージョン11.0.3以降のデザイナーでは、[プロットエリア]が追加され、軸枠線とコンテンツ枠線を設定できるようになりました。

 2.4.5-1-V1.jpg

設定項目の効果は以下の図の通りです:

2.4.5-2-V2.jpg

本例では、[背景]設定項目はすべてデフォルトのままです。

5.チャートの特殊効果

ここでは、ガントチャートに条件属性を追加する際、一つの特殊な属性のみ紹介します。

ガントチャートが複数のプロジェクトを持つ場合、特定の子プロジェクトを指定するには、プロジェクト名を[親プロジェクト/子プロジェクト]として記述します。

この例では、条件表示で[プロジェクト名]等しい[プロジェクトA/機能開発]という文字列に使用します。以下の図の通りです:

2.5.1-2 V1.jpg

6.効果プレビュー

6.1PC版

テンプレートを保存し、[改ページプレビュー]をクリックすると、第2章第4節で示された最終効果が表示されます。

6.2モバイル版

アプリ版およびHTML5版の両方でもサポートされており、効果は以下の図の通りです。

2.6-V1.jpg

三.テンプレートのダウンロード编辑

テンプレートをダウンロードするにはこちらをクリックしてください:

ガントチャート.cpt