• 営業:
    +1(279) 499-2767 (USA)
  •  または 
    +44(800) 0584677 (Europe)
apartment会社概要personログイン
anychart logo
qlik logo
拡張機能
デモ
サービス
ニュース
ミーティングを予約
今すぐ購入
無料トライアル
anychart logo
Qlik partner AnyChart

北米本社

AnyChart, P.O. Box 840180, St. Augustine, FL 32080, USA

営業担当者

+1(279) 499-2767 (USA)
+44(800) 0584677 (Europe)
sales@anychart.com

フォローする

サポート:

support@anychart.com
プライバシーポリシー
© 2026 AnyChart.Com All rights reserved.

プロジェクトガント

概要ドキュメントデモ動画ロードマップバージョン履歴

ガントプロジェクト ドキュメント

基本
ダウンロードとインストール
概要
クイックスタート
次元とメジャー
テーブル (Table)
Elements
Settings of Elements
その他の機能

このページを共有:

基本

ダウンロードとインストール

Qlik Sense Desktop

Gantt Project ExtensionをQlik Sense Desktopにインストールするには、次の手順を実行します。

  1. Qlik Sense用Gantt Project Extensionをダウンロードします。
  2. アーカイブを解凍します。
  3. Windowsエクスプローラーを開き、Qlik SenseのExtensionsディレクトリに移動します: 
    ..\Users\<UserName>\Documents\Qlik\Sense\Extensions
  4. gantt-projectフォルダをExtensionsディレクトリにコピーします。
  5. Qlik Sense Desktopを再起動します。
Qlik Sense Server

Gantt Project ExtensionをQlik Senseサーバーにインストールするには:

  1. Qlik Sense用Gantt Project Extensionをダウンロードします。
  2. Qlik Management Console (QMC) を開きます:https://<QPS server name>/qmc
  3. QMCスタートページまたはStartドロップダウンメニューからExtensionsを選択します。
  4. アクションバーのImportをクリックします。
  5. ダイアログで、ダウンロードしたアーカイブを選択します。パスワード欄は空のままにします。
  6. ファイルエクスプローラーウィンドウでOpenをクリックします。
  7. Importをクリックします。
Qlik Sense Cloud

Gantt Project ExtensionをQlik Sense Cloudにインストールするには、次の手順を実行します。

  1. Qlik Sense Cloud用Gantt Project Extensionをダウンロードします。
  2. アーカイブを解凍します。
  3. Management Consoleにアクセスします:
    • テナントアドレスに/consoleを追加します:https://<your tenant address>/console
    • または、ハブのユーザープロファイルにあるナビゲーションリンクAdministrationを使用します
  4. Extensionsページに移動し、Addをクリックします。
  5. ダイアログで、Extensionが含まれるアーカイブ(例:gantt-project.zip)を選択します。
  6. Addをクリックします。
  7. Management ConsoleでContent Security Policyセクションに移動し、Addをクリックします。
  8. ダイアログで、Content Security Policyに名前(例:AnyChart)を付けます。
  9. オリジンサーバーのアドレスを入力します:qlik.anychart.com
  10. 以下のディレクティブを選択します:
    • connect-src
    • font-src
    • img-src
    • script-src
    • style-src
  11. Addをクリックします。

概要

Project Ganttチャートは、一定期間にわたるプロジェクトをスケジューリングするためのツールです。タスクの実際の期間、計画期間、進捗状況、およびそれらの間の階層関係や接続を表示できます。

Project Ganttチャートの追加方法や使用する次元(dimensions)とメジャー(measures)については、Quick StartおよびDimensions and Measuresをご覧ください。

チャートの左側には、次元とメジャーに関するテキスト情報を表示するtableがあります。デフォルトでは、行のインデックスを表示するindex columnと、すべての次元を表示するdimension columnの2つの列が含まれています。

右側には、タスクの実際の期間を表すactual bars、計画期間を表すbaseline bars、期間がゼロのイベントを表すmilestonesなどのelementsを表示するチャートエリアがあります。

elementsの利用可能な設定には、colors / color by expression、start and end markers、labels、tooltips、およびsettings of milestonesが含まれます。また、reference linesやreference rangesの追加、scale、timeline、toolbarの設定、localeやfiscal yearの開始月の設定などが可能です。

クイックスタート

このクイックチュートリアルでは、基本的なProject Ganttチャートを作成する方法を説明します。

ビデオチュートリアル「Qlik SenseでGanttチャートを作成する方法」もご覧いただけます。

まず、シートに空のチャートを追加します:

  1. アセットパネルのCustom objects > AnyGanttに移動します。
  2. 空のAnyGantt Projectチャートをシートにドラッグします。

次に、タスクを表す次元(dimension)を追加します:

  1. プロパティパネルのDimensionsに移動します。
  2. Add dimensionをクリックし、次元を選択します。

最後に、開始日と終了日の2つのメジャー(measures)を追加します:

  1. プロパティパネルのMeasuresに移動します。
  2. Add measureをクリックし、メジャーを選択します。
  3. Add measureをクリックし、メジャーを選択します。
  4. 最初のメジャーをクリックし、Map asドロップダウンメニューからActual startを選択します。
  5. 2番目のメジャーをクリックし、Map asドロップダウンメニューからActual finishを選択します。

フィールドから次元やメジャーを作成したり、空のチャート上のボタンをクリックして追加したりすることもできることに注意してください。

次元とメジャー

次元 (Dimensions)

次元を追加するには、次の手順を実行します:

  1. プロパティパネルのDimensionsに移動します。
  2. Add dimensionをクリックし、次元を選択します。

Projectチャートにはタスクを表す1つの次元のみが必要ですが、複数の次元を追加することも可能です。すべての次元はdimension columnに表示されます。

複数の次元を追加することで、タスクをグループ化し、多階層構造を作成できます。この場合、AnyGanttはdimension column内の次元をツリー状の構造として階層的に表示します。また、actual barsやその他のelementsをdimension barsの下にグループ化します。

プロパティパネルでドラッグして、上位レベルから下位レベルへ正しい順序で次元を配置する必要があることに注意してください。

dimension columnに表示されるテキストをカスタマイズできます:

  1. プロパティパネルのDimensionsに移動します。
  2. 次元をクリックします。
  3. Dimension column text入力ボックスに文字列値または文字列式を入力します。

例えば、タスクの数値識別子を次元として使用しながら、dimension columnにタスク名を表示できます。そのためには、Dimension column text入力ボックスにタスク名を含むフィールドの名前を入力します。AnyGanttは一意の識別子でのみ正しく動作するため、タスク名が一意ではないが表示したい場合に、この機能を使用するのが有効です。

Null値を非表示にする必要がある場合は、各次元の設定でInclude null valuesチェックボックスをオフにします。ただし、この方法を不均衡なデータツリーに適用すると、深度の浅いノードが非表示になります。

Null値を非表示にし、不均衡なデータツリーを正しく視覚化するには、

  1. プロパティパネルのAdd-ons > Data handlingに移動します。
  2. Unbalanced treeチェックボックスをオンにします。
メジャー (Measures)

メジャーを追加するには、次の手順を実行します:

  1. プロパティパネルのMeasuresに移動します。
  2. Add measureをクリックし、メジャーを選択します。

使用するメジャーをマッピングする必要があります。詳細は以下のMappingセクションをご覧ください。

開始日のメジャーを1つ追加するだけで十分ですが、この場合、すべてのタスクはmilestonesとして表示されます。actual barsを作成するには、2番目のメジャーとして終了日を追加する必要があります。より多くのメジャーを使用して、他のelementsを作成したり、measure columnsに追加情報を表示したりできます。

マッピング (Mapping)

正しく機能させるために、使用するメジャーをマッピングする必要があります。

例えば、actual barsに必要な実際の開始日と終了日をマッピングするには、次の手順を実行します:

  1. プロパティパネルのMeasuresに移動します。
  2. 最初のメジャーをクリックし、Map asドロップダウンメニューからActual startを選択します。
  3. 2番目のメジャーをクリックし、Map asドロップダウンメニューからActual finishを選択します。

以下は、利用可能なマッピングとそれらが対応するelementsの全リストです:

  • Actual start – actual bars, milestones
  • Actual finish – actual bars
  • Baseline start – baseline bars
  • Baseline finish – baseline bars
  • Actual progress – actual progress
  • Baseline progress – baseline progress
  • Data field – デフォルトのマッピング

メジャーが追加情報を表し、それをmeasure columnにのみ表示したい場合は、Data field(デフォルトのマッピング)を使用します。

テーブル (Table)

チャートの左側にあるテーブルには、テキスト情報が表示されます。

index columnには行のインデックス、dimension columnには次元、measure columnsにはメジャーが表示されます。テーブル上部のheaderには、列のタイトルが表示されます。

列のタイトルやその他の設定を変更したり、テーブルのheaderやcellsの外観をカスタマイズしたりできます。

テーブルを無効または有効にするには、

  1. プロパティパネルのAppearance > Table >に移動します。
  2. Enabled / Disabledスライダーを切り替えます。

 

 

A project gantt chart with the table enabled and disabled
読み込み中...

 

Index Column

AnyGanttはチャート作成時に自動的にindex columnを作成します。これには行のインデックスが表示され、デフォルトのタイトルは#です。

index columnを設定するには、プロパティパネルのAppearance > Table > Index columnに移動し、次の手順を実行します:

  • 無効または有効にするには、Enabled / Disabledスライダーを切り替えます。
  • ナンバリングモードを設定するには、Numbering modeに移動し、利用可能なオプションの1つを選択します。
  • カスタムタイトルを設定するには、Label入力ボックスにテキストを入力します。

利用可能なナンバリングモードには、Simple numbering(デフォルト)、Hierarchical numbering、およびExpressionが含まれます。Expressionナンバリングモードでは、Numbering expression入力ボックスに式を入力する必要があります。

Simple Numbering

Hierarchical Numbering

Numbering by Expression

このサンプルでは、index columnにelementsのIDが階層的に表示されています:

Pick(Dimensionality(), department_id, department_id & '.'
& project_id,department_id & '.' & project_id & '.' & task_id)
Dimension Column

AnyGanttはチャート作成時に自動的にdimension columnを作成します。これにはすべての次元が表示され、デフォルトのタイトルはNameです。

次元が2つ以上ある場合、AnyGanttはそれらをツリー状の構造として階層的に表示します。

dimension columnのタイトルをカスタマイズするには、

  1. プロパティパネルのAppearance > Table > Dimension columnに移動します。
  2. Label入力ボックスにテキストを入力します。

dimension columnに表示されるテキストをカスタマイズすることもできます。詳細は次元(dimensions)のセクションをご覧ください。

Measure Columns

メジャーを表示する列を追加できます。デフォルトでは、列のタイトルはメジャーの式になります。

measure columnを作成するには、次の手順を実行します:

  1. プロパティパネルのMeasuresに移動します。
  2. Add measureをクリックし、メジャーを選択します。(すでに追加済みの場合はスキップします。)
  3. メジャーの設定で、Show as columnチェックボックスをオンにします。

メジャーをelementとしても表示したい場合は、マッピングを忘れないでください。列にのみ表示する場合は、デフォルトのマッピングのままでも構いません。

measure columnのタイトルをカスタマイズするには、

  1. プロパティパネルのMeasuresに移動します。
  2. メジャーをクリックし、Label入力ボックスにテキストを入力します。

measure columnにカスタムテキストを表示することもできます。文字列値または任意の文字列式をメジャーとして追加し、それを列に表示します。HTMLやUnicode記号を使用することも可能です。

  1. プロパティパネルのMeasuresに移動します。
  2. Add measureをクリックし、入力ボックスに文字列値または文字列式を入力します。
  3. Show as columnチェックボックスをオンにします。

以下の例では、最初のmeasure columnは単なるデータフィールド(タスクの進捗状況)を表しています。2番目の列は文字列式を表しており、進捗状況に応じて異なるテキストを表示します:

If(progress < 0.5, '<font color="red">Low</font>', '<font color="green">Good</font>')

ヘッダー (Header)

テーブル上部のheaderには、列のタイトルが表示されます。

タイトルのカスタマイズについては、以下のセクションをご覧ください:

  • Index Column
  • Dimension Column
  • Measure Columns

プロパティパネルのAppearance > Table > Headerに移動して、headerの背景やフォントを設定することもできます:

  • 背景を設定するには、Backgroundスライダーを切り替え、FillとOpacityオプションを使用します。
  • フォントを設定するには、Fontスライダーを切り替え、Style、Color、Size、Family、Shadowオプションを使用します。

セル (Cells)

テーブルのcellsを設定するには、プロパティパネルのAppearance > Table > Cellsに移動し、次の手順を実行します:

  1. 塗りつぶしを設定するには、Fill typeドロップダウンメニューから塗りつぶしの種類を選択し、利用可能なオプションを使用します。
  2. フォントを設定するには、Fontスライダーを切り替え、Style、Color、Size、Family、Shadowオプションを使用します。
  3. 高さを設定するには、Rows heightオプションを使用します。
  4. 枠線(ストローク)を設定するには、Rows strokeスライダーを切り替え、Color、Stroke type、Thicknessオプションを使用します。

塗りつぶし、高さ、枠線の設定は、テーブルとelementsが表示される領域の両方に影響することに注意してください。

ここでは、セルの高さとフォントが調整されています:

以下の表では、さまざまな塗りつぶしの種類の違いを説明し、それぞれで使用可能な設定をリストしています:

Fill Type説明設定
Solidすべての行に1つの色が適用されます。Background > Fill, Opacity
Hierarchy階層的な次元を表示する行に1つの色が適用されます。Background base color > Fill, Opacity
Odd/even奇数行と偶数行を2つの色で示します。Background odd row > Fill, Opacity 
Background even row > Fill, Opacity

Solid Fill

Hierarchy Fill

Odd/Even Fill

Elements

Elementsは、時間間隔(タスクに対応)およびそれらに関連する情報を表すProject Ganttチャートのパーツです。

AnyGantt Extension for Qlikで利用可能な要素タイプは以下の通りです:

  • actual bars
  • milestones
  • dimension bars
  • baseline bars
  • actual progress
  • baseline progress
  • connectors

このセクションでは、各タイプの違いと追加方法について説明します。elementsの設定方法については、Settings of Elementsセクションをご覧ください。

Actual Bars

actual barsはタスクの実際の期間を示し、baseline barsは計画期間を表します。

actual barsを追加するには、開始日と終了日の2つのメジャーを追加する必要があります。次の手順を実行します:

  1. プロパティパネルのMeasuresに移動します。
  2. Add measureをクリックし、メジャーを選択します。
  3. Add measureをクリックし、メジャーを選択します。
  4. 最初のメジャーをクリックし、Map asドロップダウンメニューからActual startを選択します。
  5. 2番目のメジャーをクリックし、Map asドロップダウンメニューからActual finishを選択します。
Milestones

Milestonesは、期間がゼロのイベントを表すelementsです。これらには開始日のメジャーが1つだけ必要です。

milestonesを追加するには、actual barsを追加するだけです。データ内に開始日のみを持つアイテムがある場合、AnyGanttはそれらを自動的にmilestonesとして表示します。

また、dimension bars上でmilestonesのプレビューを有効にすることもできます。

Dimension Bars

Dimension barsはタスクのグループを表します。dimension barsを他のdimension barsの下にグループ化して、多階層構造を作成できます。さらに、dimension barsには子milestonesのプレビューを表示できます。

dimension barsを追加するには、チャートに余分な次元を追加します:

  1. プロパティパネルのDimensionsに移動します。
  2. Add dimensionをクリックし、次元を選択します。

プロパティパネルでドラッグして、上位レベルから下位レベルへ正しい順序で次元を配置する必要があることに注意してください。

AnyGanttは、子要素から各dimension barの期間を自動的に計算します。実際の開始日と実際の終了日のメジャーに集計関数を適用した場合、期間はそれらの関数によって計算されます。

dimension barsを無効または有効にするには、

  1. プロパティパネルのAppearance > Dimension barsに移動します。
  2. Enabled / Disabledスライダーを切り替えます。

タスクのグループはtableにのみ表示されます:

Baseline Bars

Baseline barsはタスクのベースライン(計画)期間を示します。

baseline barsを追加するには、ベースライン開始日とベースライン終了日の2つのメジャーを追加する必要があります。次の手順を実行します:

  1. プロパティパネルのMeasuresに移動します。
  2. Add measureをクリックし、メジャーを選択します。
  3. Add measureをクリックし、メジャーを選択します。
  4. 最初のメジャーをクリックし、Map asドロップダウンメニューからBaseline startを選択します。
  5. 2番目のメジャーをクリックし、Map asドロップダウンメニューからBaseline finishを選択します。
Actual Progress

タスクの実際の進捗状況を表示できます。AnyGanttは、これをactual barsの上に配置されたバーとして表示します。

実際の進捗状況を追加するには、次の手順を実行します:

  1. プロパティパネルのMeasuresに移動します。
  2. Add measureをクリックし、メジャーを選択.
  3. メジャーの設定で、Map asドロップダウンメニューからActual progressを選択します。

視覚化にdimension barsを追加すると、その上にもプログレスバーが表示されます。

AnyGanttは、子要素から各dimension barの進捗を自動的に計算します。実際の進捗メジャーに集計関数を適用した場合、進捗はその関数によって計算されます。

dimension barsに付随するプログレスバーを無効または有効にするには、

  1. プロパティパネルのAppearance > Dimension barsに移動します。
  2. Display progressスライダーを切り替えます。
Baseline Progress

ベースライン(計画)の進捗状況を表示できます。AnyGanttは、これをbaseline barsの上に配置されたバーとして表示します。

ベースラインの進捗状況を追加するには、次の手順を実行します:

  1. プロパティパネルのMeasuresに移動します。
  2. Add measureをクリックし、メジャーを選択します。
  3. メジャーの設定で、Map asドロップダウンメニューからBaseline progressを選択します。
コネクタ (Connectors)

Connectorsは、タスク間の依存関係を示すelementsです。

connectorsを追加するには、データ内で先行タスクと後続タスクの識別子、および各コネクタのタイプを指定する必要があります。

このテーブルでは、最初の列(Connectors.task_id)には先行タスクのID、2番目の列(successor_id)には後続タスクのID、3番目の列(connector_type)にはコネクタのタイプが含まれています:

その後、次の手順を実行します:

  1. プロパティパネルのAdd-ons > Connectorsに移動します。
  2. ドロップダウンメニューからMultiple successorsまたはMultiple predecessorsを選択します。
  3. Predecessor(s)を指定します。
  4. Successor(s)を指定します。
  5. Typeを指定します。
  6. 複数の後続タスクまたは先行タスクで使用するDelimiterを指定します。

4つのコネクタタイプがあります:

タイプ説明
start-start先行タスクが開始しないと後続タスクを開始できません。
start-finish先行タスクが開始しないと後続タスクを完了できません。
finish-start先行タスクが完了しないと後続タスクを開始できません。
finish-finish先行タスクが完了しないと後続タスクを完了できません。

タスクには複数の先行タスクや後続タスクを持たせることができることに注意してください。また、タスクはあるタスクの後続タスクでありながら、別のタスクの先行タスクになることもあります。これらの詳細は以下に示されています:

Settings of Elements

カラー (Colors)

チャートのelementsを自由に色付けできます。このセクションで説明するデフォルトの色付けと、以下のセクションで説明するcolor by expressionの2つのオプションが利用可能です。

デフォルトの色や塗りつぶし、枠線の追加設定を変更するには、プロパティパネルのAppearance > Defaultsに移動し、調整したい要素タイプをクリックして次の手順を実行します:

  • 塗りつぶしを設定するには、Fill typeドロップダウンメニューから塗りつぶしの種類を選択し、利用可能なオプションを使用します。
  • 枠線(ストローク)を設定するには、Stroke、Stroke type、Thicknessオプションを使用します。

dimension barsとconnectors以外のすべての要素は、以下の塗りつぶしの種類と設定をサポートしています:

Fill Type説明設定
Solidすべての要素に1つの色が適用されます。Color
Opacity
Palette要素は組み込みのパレットで色付けされます。パレット選択
Reverse colors
Opacity
Parent-dependent要素は親の色を継承します:baseline progressバーはbaseline barsの色を継承し、その他の要素は(存在する場合)dimension barsの色を継承します。Opacity

ここでは、actual barsがパレットで色付けされ、milestonesの塗りつぶしが単色になっています:

dimension barsでは、以下の塗りつぶしの種類と設定が利用可能です:

Fill Type説明設定
Solidすべてのdimension barsに1つの色が適用されます。Color
Opacity
Depth leveldimension barsは、階層内の位置に応じて組み込みのパレットで色付けされます。パレット選択
Reverse colors
Opacity
Parent-dependent階層の最上位では、dimension barsは組み込みのパレットで色付けされます。下位レベルでは、親の色を継承します。パレット選択
Opacity

このスクリーンショットでは、dimension barsが深度レベル(depth level)で色付けされています。actual barsとmilestonesの塗りつぶしは親依存(parent-dependent)になっており、深度レベルに応じて同じパレット(dimension barsと同じ)で色付けされています。

ここでは、親依存の塗りつぶしがすべての要素に適用されています:

connectorsの枠線(ストローク)を設定するには、

  1. プロパティパネルのDefaults > Connectorsに移動します。
  2. Color、Stroke type、Stroke thickness入力ボックスを使用します。

Color by Expression

チャートのelementsを自由に色付けできます。2つのオプションが利用可能です:上述のデフォルトの色付けと、このセクションで説明するcolor by expressionです。

Coloring by expressionは、ユーザー定義の式を使用して色を設定します。これにより、どの色を使用するか、どの値に使用するかを定義でき、視覚化における色の使用方法をより詳細に制御できます。例えば、特に関心のある値を強調したり、異なる値の範囲内で値を区別したりできます。また、国、重要度、RAGなど、視覚化に含まれていない値によってタスクを色付けすることも可能です。

要素を式で色付けするには、次の手順を実行します:

  1. プロパティパネルのAdd-Ons > Data settingsに移動します。
  2. Add settingをクリックします。
  3. 最初のドロップダウンメニューから要素を選択します。
  4. 2番目のドロップダウンメニューからColor stringオプションを選択します。
  5. 入力ボックスに式を入力します。

dimension barsを式で色付けするには、

  1. プロパティパネルのDimensionsに移動します。
  2. 次元をクリックします。
  3. Configurationに移動します。
  4. ドロップダウンメニューからColor stringオプションを選択します。
  5. 入力ボックスに式を入力します。

connectorsを式で色付けするには、

  1. プロパティパネルのAdd-ons > Connectorsに移動します。
  2. ColorとThickness入力ボックスを使用します。
例

ここでは、式による色付けで何ができるかを示すいくつかの例を挙げます。

例:単一のメジャー値による色付け

If(progress > 0.5, 'lightgreen', 'lightblue')

この例では条件があります。タスクの進捗が0.5(50%)を超える場合、対応するactual barsは'lightgreen'に色付けされ、それ以外の場合は'lightblue'になります。

例:複数のメジャー値による色付け

If(Interval(finish_date) - Interval(start_date) > 10, 'lightgreen',
If(Interval(finish_date) - Interval(start_date) > 5, 'lightblue', 'lightgray'))

この例では複数の条件があります。タスクの期間が10日を超える場合、対応するactual barsは'lightgreen'になります。期間が5日から10日の間の場合、対応するactual barsは'lightblue'になります。それ以外のすべてのactual barsは'lightgray'になります。

Start and End Markers

(connectorsとmilestonesを除く)任意の要素の開始マーカーおよび/または終了マーカーを有効にできます:

  1. プロパティパネルのAppearance > Defaultsに移動します。
  2. 要素をクリックします。
  3. Start markerまたはEnd markerに移動します。
  4. Disabled / Enabledスライダーを切り替えます。

これらを設定するには、以下のオプションを使用します:

  • タイプ(形状)を設定するには、Typeドロップダウンメニューから組み込みのタイプの1つを選択します。
  • 塗りつぶしと枠線を設定するには、Fill、Stroke、Thicknessオプションを使用します。
  • サイズを設定するには、Sizeオプションを使用します。

ラベル (Labels)

Labelsは、elementsに関する追加情報を表示するテキストオブジェクトです。各要素タイプには独自ラベル設定があります。

デフォルトでは、チャートにラベルはありません。要素のラベルを有効にするには、そのラベルテキストを設定するだけです。AnyGanttは、その要素が表示される各行にラベルを表示します。

ラベルテキストは、文字列値または任意の文字列式として設定可能であることに注意してください。式を使用することで、特に関心のある値を強調したり、視覚化に含まれていない値や計算結果を表示したりできます。

要素にラベルを追加するには、次の手順を実行します:

  1. プロパティパネルのAdd-ons > Label settingsに移動します。
  2. Add labelをクリックします。
  3. 最初のドロップダウンメニューから要素を選択します。
  4. 2番目のドロップダウンメニューからTextオプションを選択します。
  5. 入力ボックスに文字列値または文字列式を入力します。

これらを設定するには、以下のオプションを使用します:

  • 位置を設定するには、AlignとOffsetオプションを使用します。
  • 背景を設定するには、Backgroundスライダーを切り替え、Fill、Opacity、Corner type、Border type、Border radiusオプションを使用します。
  • フォントを設定するには、Fontスライダーを切り替え、Style、Color、Size、Family、Shadowオプションを使用します。
  • 文字数制限を設定するには、Character limitスライダーを切り替え、入力ボックスに数値を入力します。

dimension barsのラベルを(各次元ごとに個別に)有効にして設定するには、

  1. プロパティパネルのDimensionsに移動します。
  2. 次元をクリックします。
  3. Labelに移動します。
  4. ドロップダウンメニューからTextオプションを選択します。
  5. 入力ボックスに文字列値または文字列式を入力します。
  6. 以下のオプションを使用して、位置、背景、フォントなどを設定します。

Dimension barsには、milestonesとそのラベルのプレビューを表示することもできます。

以下の例では、actual barsとmilestonesのラベルに、異なるテキスト、背景、フォント設定が適用されています。milestonesのラベルには文字列値「Meeting」が表示され、actual barsのラベルには以下の式が表示されています:

progress*100 & '%'

ツールチップ (Tooltips)

Tooltipsは、ユーザーがチャートの行にマウスを置いたときに表示されるテキストボックスです。各要素タイプにカスタムツールチップテキストを設定できます。

ツールチップテキストは、文字列値または任意の文字列式として設定可能であることに注意してください。式を使用することで、特に関心のある値を強調したり、視覚化に含まれていない値や計算結果を表示したりできます。

また、ツールチップではHTMLを使用できます。

ツールチップを無効または有効にするには、プロパティパネルのInteractivityに移動し、Tooltipsスライダーを切り替えます。

ツールチップを設定するには、プロパティパネルのAdd-ons > Tooltip settingsに移動し、次の手順を実行します:

  • 背景を設定するには、Backgroundスライダーを切り替え、Fill、Opacity、Border radiusオプションを使用します。
  • フォントを設定するには、Fontスライダーを切り替え、Style、Color、Size、Familyオプションを使用します。

設定後のツールチップの背景とフォントの表示例は以下の通りです:

要素のツールチップテキストと文字数制限を設定するには、次の手順を実行します:

  1. プロパティパネルのAdd-ons > Tooltip settingsに移動します。
  2. Add tooltipをクリックします。
  3. ドロップダウンメニューから要素を選択します。
  4. 入力ボックスに文字列値または文字列式を入力します。
  5. Character limitスライダーを切り替え、入力ボックスに数値を入力します。
    (このオプションはテキスト設定後にのみ使用可能になります。)

dimension barsのツールチップテキストと文字数制限を(各次元ごとに個別に)設定するには、

  1. プロパティパネルのDimensionsに移動します。
  2. 次元をクリックします。
  3. Tooltip text入力ボックスに文字列値または文字列式を入力します。
  4. Character limitスライダーを切り替え、入力ボックスに数値を入力します。

以下は、actual barsのツールチップテキストを設定するための式の例です:

'<b>' & task_name & '</b>' &
'<br><i>' & employee_name & '</i>' &

'<br><br>Dates: ' &
Date(start_date, 'MM.DD') & ' – ' & Date(finish_date, 'MM.DD') &
'<br>Baselines: ' &
Date(baseline_start_date, 'MM.DD') & ' – ' & Date(baseline_finish_date, 'MM.DD') &
'<br>Duration: ' & (Interval(finish_date) - Interval(start_date)) & ' days' &
'<br>Progress: ' & progress*100 & '%'

Baseline barsには個別のツールチップはありません。ただし、これらが有効な場合、actual barsとdimension barsのツールチップにベースラインの日付という追加情報が表示されます。このテキストを調整するには、要素タイプとしてWith baseline barsオプションを選択する必要があります。

Settings of Milestones

Milestonesは以下の機能をサポートしています:Colors, Color by Expression, Tooltips, Labels。また、以下のサブセクションで説明するいくつかの特別な設定もサポートしています。

タイプとサイズ (Type and Size)

プロパティパネルのAppearance > Defaults > Milestonesセクションで、milestonesのタイプとサイズ(および色)を調整できます。

サイズを設定するには、Sizeオプションを使用します。

タイプを設定するには、以下のいずれかのオプションを使用します:

「icon」ピクトグラムをクリックし、ドロップダウンメニューから組み込みのアイコン(形状)を選択します。
「image」ピクトグラムをクリックし、Image URL入力ボックスにカスタム画像へのリンクを入力します。

以下は組み込みアイコンの1つです:

また、ユーザー定義の式を使用して、異なるmilestonesに異なるカスタム画像を割り当てることもできます:

  1. プロパティパネルのAdd-Ons > Data settingsに移動します。
  2. Add settingをクリックします。
  3. 最初のドロップダウンメニューからMilestonesを選択します。
  4. 2番目のドロップダウンメニューからImage urlオプションを選択します。
  5. 入力ボックスに式を入力します。

以下の例では、異なるグループに属するmilestonesが異なる画像として表されています。以下の式が使用されています:

If(department_name = 'IT', 'https://qlik.anychart.com/static/qlik-demo-apps/milestone-icon-it.jpg',
If(department_name = 'Accounting', 'https://qlik.anychart.com/static/qlik-demo-apps/milestone-icon-accounting.jpg',
If(department_name = 'Manufacturing', 'https://qlik.anychart.com/static/qlik-demo-apps/milestone-icon-manufacturing.jpg')))

プレビュー (Previews)

dimension bars上にmilestonesのプレビューを表示できます。milestonesにラベルがある場合は、ラベルのプレビューも表示可能です。

プレビューを表示または非表示にするには、次の手順を実行します:

  1. プロパティパネルのAppearance > Defaults > Dimension barsに移動します。
  2. Milestones previewスライダーを切り替えます。

プレビューを設定するには、

  • プレビューを折りたたまれた(collapsed)dimension barsにのみ表示するには、Draw on collapsed onlyチェックボックスをオンにします。
  • 重なったラベルを管理するには、Hide overlappedチェックボックスをオフまたはオンにします。

このスクリーンショットでは、milestonesのプレビューが有効になっています。ご覧の通り、dimension barsには展開された状態と折りたたまれた状態の両方でプレビューが表示されています:

ここでは、dimension barsにはラベル付きのmilestonesのプレビューが表示されています:

その他の機能

リファレンスライン (Reference Lines)

リファレンスラインは、timeline上の特定のポイントからチャートエリアを横切る線です。

特定の1日または複数の日付を示すために、チャートに1つまたは複数のリファレンスラインを追加できます。リファレンスラインは、現在表示されている範囲内にある場合にのみ描画されます。

リファレンスラインの位置を定義する値は、日付値または任意の日の式として指定可能であることに注意してください。

リファレンスラインを追加するには、次の手順を実行します:

  1. プロパティパネルのAdd-ons > Reference linesに移動します。
  2. Add reference lineをクリックします。
  3. Date入力ボックスに日付値または日付式を入力します。

その後、設定を行います:

  • テキストラベルを追加するには、Label入力ボックスに文字列を入力します。
  • 枠線(ストローク)を設定するには、Stroke、Stroke type、Thicknessオプションを使用します。
  • ラベルの位置を設定するには、Label orientationとLabel positionオプションを使用します。
  • フォントを設定するには、Fontスライダーを切り替え、Style、Color、Size、Family、Shadowオプションを使用します。

リファレンスレンジ (Reference Ranges)

リファレンスレンジは、timeline上の特定の範囲からチャートエリアを横切る領域です。

特定の期間を示すために、チャートに1つまたは複数のリファレンスレンジを追加できます。リファレンスレンジは、現在表示されている範囲内にある場合にのみ描画されます。

リファレンスレンジの位置を定義する値は、日付値または任意の日の式として指定可能であることに注意してください。

リファレンスレンジを追加するには、次の手順を実行します:

  1. プロパティパネルのAdd-ons > Reference rangeに移動します。
  2. Add reference rangeをクリックします。
  3. From入力ボックスに日付値または日付式を入力します。
  4. To入力ボックスに日付値または日付式を入力します。

その後、設定を行います:

  • テキストラベルを追加するには、Label入力ボックスに文字列を入力します。
  • 塗りつぶしを設定するには、ColorとOpacityオプションを使用します。
  • ラベルの位置を設定するには、Label orientationとLabel positionオプションを使用します。
  • フォントを設定するには、Fontスライダーを切り替え、Style、Color、Size、Family、Shadowオプションを使用します。

スケール (Scale)

AnyGantt Extensionは、設定可能なscaleを操作します。デフォルトで表示される日付範囲、およびスケールの最小値(minimum)と最大値(maximum)を設定できます。

これらの日付はすべて、日付値または任意の日の式として指定可能であることに注意してください。

デフォルトの表示範囲 (Default Display Range)

デフォルトでは、チャートは最大限にズームアウトされています。カスタムの日付範囲にズームインすることも可能です。ただし、スケールの最小値と最大値が許容する範囲内であれば、ユーザーはtoolbar(またはマウスホイール)を使用してチャートをズームアウトできます。

デフォルトの表示範囲を設定するには、次の手順を実行します:

  1. プロパティパネルのAppearance > Scale > Display rangeに移動します。
  2. Display rangeをAutoからCustomに切り替えます。
  3. From入力ボックスに日付値または日付式を入力します。
  4. To入力ボックスに日付値または日付式を入力します。

次の例では、デフォルトの表示範囲が2019年7月1日から15日に設定されています:

Date#('07.01.2019', 'MM.DD.YYYY')
Date#('07.15.2019', 'MM.DD.YYYY')

これらの設定を適用したチャートのデフォルト表示は以下の通りです:

最小値と最大値 (Minimum and Maximum)

toolbar(またはマウスホイール)を使用してチャートを最大限にズームアウトすると、スケールの最小値と最大値の間の日付範囲が表示されます。デフォルトでは、AnyGanttはチャートのすべてのelementsを表示するようにこれらを調整します。

スケールの最小日付を設定するには、

  1. プロパティパネルのAppearance > Scale > Minimumに移動します。
  2. MinimumをAutoからCustomに切り替えます。
  3. 必要に応じて、Softチェックボックスをオンにしてsoft modeを有効にします。
  4. 入力ボックスに日付値または日付式を入力します。

スケールの最大日付を設定するには、

  1. プロパティパネルのAppearance > Scale > Maximumに移動します。
  2. MaximumをAutoからCustomに切り替えます。
  3. 必要に応じて、Softチェックボックスをオンにしてsoft modeを有効にします。
  4. 入力ボックスに日付値または日付式を入力します。

この例では、最小値が最も早い開始日の10日前に設定され、最大値が最も遅い終了日の10日後に設定されています:

Min(start_date) - 10
Max(finish_date) + 10

最大限にズームアウトした状態のチャートは以下の通りです:

Soft Mode

soft modeを有効にするには、スケールの最小値と最大値を設定する際にSoftチェックボックスをオンにします。

soft modeは、チャートのelementsに合わせて最小値と最大値を調整します。これは、最小値より前、または最大値より後に要素や要素の一部が存在する場合に重要になります。

例えば、最小値を2019年7月1日に設定してsoft modeを有効にした場合、チャートはこの日付より前にあるすべての要素や要素の一部を依然として表示します。最小値と最大値の両方でsoft modeを有効にすると、(toolbarを使用して)すべての要素を表示するために常にチャートをズームアウトできるようになります。

以下は、スケールの最小値と最大値を2019年7月1日と15日に設定したGanttチャートです:

Date#('07.01.2019', 'MM.DD.YYYY')
Date#('07.15.2019', 'MM.DD.YYYY')

最小値と最大値の両方でsoft modeが無効な場合:

同じチャートで、最小値に対してのみsoft modeを有効にした場合:

最大値に対してのみsoft modeを有効にした場合:

余白 (Gaps)

elementsが占有するスペースの左右に、最小値と最大値の余白(gap)を追加できます:

  1. プロパティパネルのAppearance > Scale > Gapsに移動します。
  2. GapsをAutoからCustomに切り替えます。
  3. Unit typeドロップダウンメニューからPercentsまたはPixelsを選択します。
  4. Minimum gapおよびMaximum gapオプションを使用します。

また、その上にあるMinimumおよびMaximumスライダーがAutoに切り替わっていることを確認してください。最小値と最大値の設定は余白の設定を上書きします。

ここでは最小余白が20%、最大余白が50%に設定されています:

タイムライン (Timeline)

timelineは、日付が表示されるチャートエリアの上の行(レベル)のセットです。

タイムラインにおける日付と間隔の表示は、fiscal yearの設定とlocaleの影響を受けます。

Timeline Levels

デフォルトでは、タイムラインには3つのレベルがあります。各レベルには、現在のズームレベルとzoom levelsの設定に応じて、特定の時間単位が表示されます。

レベルの設定を開くには、次の手順を実行します:

  1. プロパティパネルのAppearance > Timelineに移動します。
  2. Top level / Middle level / Bottom levelをクリックします。

その後、設定を行います:

  • 無効または有効にするには、Enabledスライダーを切り替えます。
  • 塗りつぶしの色を設定するには、Fillオプションを使用します。
  • フォントを設定するには、Fontスライダーを切り替え、Style、Color、Size、Family、Shadowオプションを使用します。

Zoom Levels

チャートは、toolbar(またはマウスホイール)を使用してズームインおよびズームアウトできます。各ズームレベルで、タイムラインレベルには特定の時間単位が表示されます。これらを設定するには、

  1. プロパティパネルのAppearance > Timelineに移動します。
  2. Zoom levelsをクリックして設定ウィンドウを開きます。
  3. zoom levelsを設定します。
  4. SaveをクリックしてからCloseをクリックします。

以下は、ズームレベルのデフォルト設定が表示されたウィンドウです:

デフォルトでは9つのズームレベルがあります。利用可能な最大レベル数も9です。Zoom levelsウィンドウでは、各レベルの右側にあるボタンをクリックすることで、レベルの削除や複製が可能です。デフォルト設定に戻すには、Restore defaultsをクリックします。

各ズームレベルには、3つのタイムラインレベル(Top level、Middle level、Bottom level)の設定が含まれています。タイムラインレベルごとに、時間単位と単位数を指定できます。

タイムラインのTop levelには最大の時間単位を指定し、Bottom levelには最小の単位を指定する必要があります。同じロジックがズームレベルにも適用されます。リストの最初のレベル(Maxと表示)は、チャートを完全にズームアウトしたときに表示されるレベルであり、タイムラインには最大の時間単位が表示されます。リストの最後のズームレベル(Min)は、チャートを完全にズームインしたときに表示されるレベルであり、タイムラインには最小の時間単位が表示されます。

以下の例では、ズームレベルが1つしかないチャートを示しています:

会計年度 (Fiscal Year)

会計年度(fiscal year)の開始月を設定できます。この設定は、timelineの日付と間隔の表示にのみ影響します。

会計年度を設定するには、次の手順を実行します:

  1. プロパティパネルのAppearance > Fiscal yearに移動します。
  2. 最初のドロップダウンメニューからThis year / Next year を選択します。
  3. 2番目のドロップダウンメニューから月を選択します。

スケジュール (Schedule)

休日、週末、勤務時間、非勤務時間などの勤務スケジュールを設定および強調表示できます。

休日の強調表示はチャートを「日」単位にズームインした際に見ることができます。勤務時間の強調表示は「時間」単位にズームした際に見ることができます(toolbarやマウスホイールを使用してチャートをズームイン/アウトしてください)。

休日を設定するには、プロパティパネルのAppearance > Schedule > Holidaysに移動し、次の手順を実行します:

  • 休日を設定するには、Holiday dates入力ボックスにデータを入力します。
  • 強調表示を無効または有効にするには、Highlightスライダーを切り替えます。
  • 強調表示を設定するには、ColorとOpacityオプションを使用します。

休日はカンマで区切った文字列として入力できます:

'07.16.2019, 07.17.2019'

休日日付を含むデータフィールドを使用することもできます。これらをConcat()関数で結合します:

Concat(holiday_date, ',')

週末を設定するには、プロパティパネルのAppearance > Schedule > Weekendsに移動します:

  • 週末の日を設定するには、曜日を表すボタンをクリックします。
  • 強調表示を無効または有効にするには、Highlightスライダーを切り替えます。
  • 強調表示を設定するには、ColorとOpacityオプションを使用します。

このスクリーンショットでは、週末と2つの休日が異なる2つの色で強調表示されています:

勤務時間を設定するには、プロパティパネルのAppearance > Schedule > Working hoursに移動します:

  • 勤務時間の開始を設定するには、Startドロップダウンメニューから時間を選択します。
  • 勤務時間の終了を設定するには、Endドロップダウンメニューから時間を選択します。
  • 勤務時間の強調表示を無効または有効にするには、Highlight working timeスライダーを切り替えます。
  • 非勤務時間の強調表示を無効または有効にするには、Highlight non-working timeスライダーを切り替えます。
  • 強調表示を設定するには、スライダーの下にあるColorとOpacityオプションを使用します。

ここでは勤務時間が緑色、非勤務時間が灰色に色付けされています:

ロケール (Locale)

デフォルトでは、AnyGanttはQlikのロケールを読み取り、それをtimelineやtooltipsで使用される日付/時刻形式、およびtoolbarのラベルに適用します。別のロケールを選択することも可能です:

  1. プロパティパネルのAppearance > Localeに移動します。
  2. Use Qlik localeチェックボックスをオフにします。
  3. ドロップダウンメニューからロケールを選択します。

AnyGanttは以下のロケールをサポートしています:

  • 中国語 (中華人民共和国)
  • 中国語 (台湾)
  • オランダ語 (オランダ)
  • 英語 (米国)
  • フランス語 (フランス)
  • ドイツ語 (ドイツ)
  • イタリア語 (イタリア)
  • 日本語 (日本)
  • 韓国語 (韓国)
  • ポーランド語 (ポーランド)
  • ポルトガル語 (ブラジル)
  • ロシア語 (ロシア)
  • スペイン語 (スペイン)
  • スウェーデン語 (スウェーデン)
  • トルコ語 (トルコ)

以下は中国語ロケールを適用したGanttチャートです:

ツールバー (Toolbar)

Toolbarは、チャートの上にあるナビゲーションパネルです。ユーザーはこれを使用してチャートのズームイン/アウト、行の折りたたみや展開(階層関係がある場合)、チャートの印刷を行うことができます。

Toolbarを設定するには、プロパティパネルのAppearance > Toolbarに移動し、次の手順を実行します:

  • 無効または有効にするには、Enabledチェックボックスをオフまたはオンにします。
  • ボタンのタイプを設定するには、Icons(デフォルト)、Labels、Bothオプションを使用します。
  • Printドロップダウンメニューに表示する印刷形式を選択するには、Print formatsに移動し、対応するチェックボックスをオンにします。
  • フォントを設定するには、Fontスライダーを切り替え、Style、Color、Size、Familyオプションを使用します。

フォントスタイルとファミリーの設定は、(有効な場合)ボタンのラベルにのみ影響します。フォントサイズと色は、ラベルとアイコンの両方、およびPrintメニューに影響します。また、ラベルのテキストはlocaleの影響を受けます。

ボタンタイプごとのツールバーの表示は以下の通りです:

Icons
Labels
Both

このスクリーンショットでは、ラベルとアイコンの両方が有効になっており、フォントが調整されています:

印刷 (Printing)

チャート上部のtoolbarは、印刷のためのインターフェースを提供します。

AnyGanttは、複数ページの印刷やA0からA6までのさまざまな印刷形式をサポートしています。また、横向き(landscape)や縦向き(portrait)のレイアウトを選択したり、印刷範囲(すべての日付または表示されている日付のみ)を指定したりすることもできます。

以下は、利用可能なオプションが表示されたPrintドロップダウンメニューです:

メニューに表示する印刷形式を選択するには、

  1. プロパティパネルのAppearance > Toolbar > Print formatsに移動します。
  2. 対応するチェックボックスをオンにします。

インタラクティブ性 (Interactivity)

デフォルトでは、選択、スナップショット、tooltipsのインタラクティブ機能が利用可能です。マウスホイールはチャートを垂直方向にスクロールするために使用されますが、ズームに使用することもできます。

これらの機能を無効または有効にするには、プロパティパネルのInteractivityに移動し、以下のスライダーを切り替えます:

  • Selection
  • Snapshots
  • Tooltips
  • Zoom with mouse wheel

展開 / 折りたたみ (Expanding / Collapsing)

次元が2つ以上ある場合、AnyGanttはテーブルとelementsを階層的に整理します。デフォルトでは、チャートはすべての行が展開された状態で描画され、階層のすべてのレベルが表示されます。

ユーザーは、テーブルやtoolbarのボタンを使用して、行の折りたたみや展開を行うことができます。

 

 

A project gantt chart with the rows expanded and collaped
読み込み中...

 

チャートを、すべての子要素がロードされているかどうかにかかわらず、すべての行が折りたたまれた状態で描画することもできます。ロード時のチャートの状態を処理するには、プロパティパネルのAdd-ons > Data handlingに移動し、次の手順を実行します:

  • ツリー全体をロードするか最上位レベルのみをロードするかを切り替えるには、Fully expandedスライダーを切り替えます。
  • デフォルトで行を折りたたむか展開するかを切り替えるには、Collapse on loadスライダーを切り替えます。

Fully expandedオプションが無効な場合、最上位の親要素のみがロードされます。ツールバーのExpand Allボタンは以前にロードされた要素のみを展開するため、この場合はツリー全体を一度に展開するために使用することはできません。子要素をロードするには、テーブルのボタンを使用して手動で親要素を展開する必要があります。

Fully expandedオプションが有効な場合、ツリーのすべての要素がロードされます。Collapse on loadを有効にすると、チャートはすべての子要素が折りたたまれた状態で描画されますが、それらは依然としてロードされています。この場合、ツールバーのExpand Allボタンを使用すると、ツリー全体を一度に展開できます。

計算条件 (Calculation Conditions)

AnyGanttは計算条件をサポートしています。オブジェクトが表示されるために満たされる(trueである)必要のある条件を設定できます。条件が満たされない場合、カスタムメッセージが表示されます。

計算条件は、チャートやテーブルが非常に大きく、視覚化の応答が遅くなる場合に役立ちます。計算条件を使用すると、例えば、ユーザーが選択を適用してデータを扱いやすいレベルまでフィルタリングするまでオブジェクトを表示しないようにすることができます。

条件を追加するには、次の手順を実行します:

  1. プロパティパネルのAdd-ons > Data handlingに移動します。
  2. Calculation condition入力ボックスに式を入力します。
  3. Displayed message入力ボックスに文字列値または文字列式を入力します。

例えば、以下の式は、ユーザーが選択したタスクが20未満の場合にのみチャートを表示することを許可します:

If(Count(task_id) < 20, 1, 0)

タスクが多すぎる場合、AnyGanttはこのメッセージを表示します:

'There are too many tasks (' & Count(task_id) & ').'

 

 

A project gantt chart with a calculation condition
読み込み中...