Gantt diagrams#

ガントチャートは、1896年にKarol Adamieckiによって最初に開発され、1910年代にHenry Ganttによって独自に開発された棒グラフの一種であり、プロジェクトのスケジュールと1つのプロジェクトが完了するまでにかかる時間を示します。ガントチャートは、プロジェクトの終了要素と要約要素の開始日と終了日の間の日数を示します。

A note to users#

ガントチャートは、スケジュールされた各タスクを、左から右に伸びる1本の連続したバーとして記録します。 x軸は時間を表し、yはさまざまなタスクとそれらが完了する順序を記録します。

タスクに固有の日付、日、または日付のコレクションが「除外」されると、ガントチャートは、内部にギャップを作成するのではなく、右に向かって同じ日数を延長することによって、これらの変更に対応することを覚えておくことが重要です。タスク。ここに示すように

ただし、除外された日付が連続して開始するように設定された2つのタスクの間にある場合、除外された日付はグラフィカルにスキップされて空白のままになり、次のタスクは除外された日付の終了後に開始されます。ここに示すように

ガントチャートは、プロジェクトが完了するまでにかかる時間を追跡するのに役立ちますが、いくつかの調整を加えて「非稼働日」をグラフィカルに表すためにも使用できます。

マーメイドは、ガント図をSVG、PNG、またはドキュメントに貼り付けることができるMarkDownリンクとしてレンダリングできます。

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

Syntax#

gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h

gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h

multiple dependencies#

スペースで区切って複数の依存関係を設定することができます。

gantt
        apple :a, 2017-07-20, 1w
        banana :crit, b, 2017-07-23, 1d
        cherry :active, c, after b a, 1d

gantt
        apple :a, 2017-07-20, 1w
        banana :crit, b, 2017-07-23, 1d
        cherry :active, c, after b a, 1d

Description#

題名#

titleある任意全体としてグラフを記述するために、ガントチャートの上部に表示される文字列。

セクションステートメント#

チャートをさまざまなセクションに分割できます。たとえば、開発やドキュメントなど、プロジェクトのさまざまな部分を分離できます。

これを行うには、sectionキーワードで行を開始し、名前を付けます。（チャート全体のタイトルとは異なり、この名前は必須であることに注意してください。

日付の設定#

dateFormatガント要素の日付入力の形式を定義します。レンダリングされたチャート出力でこれらの日付がどのように表されるかは、によって定義されaxisFormatます。

入力日付形式#

デフォルトの入力日付形式はYYYY-MM-DDです。カスタムを定義できますdateFormat。

dateFormat YYYY-MM-DD

次のフォーマットオプションがサポートされています。

Input	Example	Description
YYYY	2014	4 digit year
YY	14	2 digit year
Q	1..4	Quarter of year. Sets month to first month in quarter.
M MM	1..12	Month number
MMM MMMM	January..Dec	Month name in locale set by moment.locale()
D DD	1..31	Day of month
Do	1st..31st	Day of month with ordinal
DDD DDDD	1..365	Day of year
X	1410715640.579	Unix timestamp
x	1410715640579	Unix ms timestamp
H HH	0..23	24 hour time
h hh	1..12	12 hour time used with a A.
a A	am pm	Post or ante meridiem
m mm	0..59	Minutes
s ss	0..59	Seconds
S	0..9	Tenths of a second
SS	0..99	Hundreds of a second
SSS	0..999	Thousandths of a second
Z ZZ	+12:00	Offset from UTC as +-HH:mm, +-HHmm, or Z

詳細情報はこちら

軸の出力日付形式デフォルトの出力日付形式はYYYY-MM-DDです。2020年の第1四半期のaxisFormatよう2020-Q1に、カスタムを定義できます。

axisFormat %Y-%m-%d

次のフォーマット文字列がサポートされています。

format	description
%a	abbreviated weekday name.
%A	full weekday name.
%b	abbreviated month name.
%B	full month name.
%c	date and time, as "%a %b %e %H:%M:%S %Y".
%d	zero-padded day of the month as a decimal number [01,31].
%e	space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d.
%H	hour (24-hour clock) as a decimal number [00,23].
%I	hour (12-hour clock) as a decimal number [01,12].
%j	day of the year as a decimal number [001,366].
%m	month as a decimal number [01,12].
%M	minute as a decimal number [00,59].
%L	milliseconds as a decimal number [000, 999].
%p	either AM or PM.
%S	second as a decimal number [00,61].
%U	week number of the year (Sunday as the first day of the week) as a decimal number [00,53].
%w	weekday as a decimal number [0(Sunday),6].
%W	week number of the year (Monday as the first day of the week) as a decimal number [00,53].
%x	date, as "%m/%d/%Y".
%X	time, as "%H:%M:%S".
%y	year without century as a decimal number [00,99].
%Y	year with century as a decimal number.
%Z	time zone offset, such as "-0700".
%%	a literal "%" character.

詳細情報はこちら

Styling#

ガントチャートのスタイリングは、いくつかのcssクラスを定義することによって行われます。レンダリング中に、これらのクラスはsrc / themes /gantt.scssにあるファイルから抽出されます

使用されるクラス

クラス	説明
grid.tick	グリッド線のスタイリング
grid.path	グリッドの境界線のスタイリング
.taskText	タスクテキストのスタイリング
.taskTextOutsideRight	右側のアクティビティバーを超えるタスクテキストのスタイル。
.taskTextOutsideLeft	左側のアクティビティバーを超えるタスクテキストのスタイリング。
todayMarker	「今日のマーカー」の切り替えとスタイリング

サンプルスタイルシート#

.grid .tick {
    stroke: lightgrey;
    opacity: 0.3;
    shape-rendering: crispEdges;
}
.grid path {
    stroke-width: 0;
}

#tag {
    color: white;
    background: #FA283D;
    width: 150px;
    position: absolute;
    display: none;
    padding:3px 6px;
    margin-left: -80px;
    font-size: 11px;
}

#tag:before {
    border: solid transparent;
    content: ' ';
    height: 0;
    left: 50%;
    margin-left: -5px;
    position: absolute;
    width: 0;
    border-width: 10px;
    border-bottom-color: #FA283D;
    top: -20px;
}
.taskText {
    fill:white;
    text-anchor:middle;
}
.taskTextOutsideRight {
    fill:black;
    text-anchor:start;
}
.taskTextOutsideLeft {
    fill:black;
    text-anchor:end;
}

Others#

今日のマーカー#

現在の日付のマーカーをスタイル設定または非表示にすることができます。スタイルを設定するには、todayMarkerキーの値を追加します。

todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5 マーカーを非表示にするには、に設定todayMarkerしoffます。

todayMarker off

構成#

ガントチャートをレンダリングするためのマージンを調整することが可能です。

これはganttConfig、構成オブジェクトの一部を定義することによって行われます。

jelly.ganttConfigは、構成パラメーターまたは対応するオブジェクトを使用してJSON文字列に設定できます。

mermaid.ganttConfig = {
    titleTopMargin:25,
    barHeight:20,
    barGap:4,
    topPadding:75,
    sidePadding:75
}

可能な構成パラメータ#

パラム	説明	デフォルト値
mirrorActor	ダイアグラムの下と上にあるアクターのレンダリングのオン/オフを切り替えます	false
bottomMarginAdj	グラフがどれだけ下に終了したかを調整します。cssを使用した幅の広い境界線スタイルは、不要なクリッピングを生成する可能性があるため、この構成パラメーターが存在します。	1

インタラクション#

クリックイベントをタスクにバインドすることができます。クリックすると、javascriptコールバック、または現在のブラウザタブで開かれるリンクのいずれかにつながる可能性があります。注：この機能は、を使用するsecurityLevel='strict'と無効になり、を使用すると有効になりsecurityLevel='loose'ます。

click taskId call callback(arguments) click taskId href URL taskIdはタスクのIDですコールバックは、グラフを表示するページで定義されたjavascript関数の名前です。他の引数が指定されていない場合、関数はパラメーターとしてtaskIdを使用して呼び出されます。初心者向けのヒント、htmlコンテキストでインタラクティブリンクを使用した完全な例：

gantt dateFormat YYYY-MM-DD section Clickable Visit mermaidjs :active, cl1, 2014-01-07, 3d Print arguments :cl2, after cl1, 3d Print task :cl3, after cl2, 3d click cl1 href "https://mermaidjs.github.io/" click cl2 call printArguments("test1", "test2", test3) click cl3 call printTask()