查看“模板:Chart/doc”的源代码

==前言==
<div class="wenzi1">
* 这个模版生成一行由单元与连接线所生成的家族树，使用本模版必须结合[[template:chart/start]]和[[template:chart/end]]一起使用。
</div>
==示例==
<div class="wenzi1">
代码：
<pre><nowiki>
{{chart/start}}
{{chart| | | |GrMa |~|y|~| GRP | |GrMa=Grandma|GRP=Grandpa}}
{{chart| | | | | | | |)|-|-|-|.| }}
{{chart| | | MOM |y| DAD | |DAISY|MOM=Mom|DAD=Dad|DAISY=[[Aunt Daisy]]}}
{{chart| |,|-|-|-|+|-|-|-|.| | | }}
{{chart| JOE | | ME  | | SIS | | |JOE=My brother Joe|ME='''Me!'''|SIS=My little sister}}
{{chart/end}}
</nowiki></pre>

生成效果：

{{chart/start|summary=An example family tree}}
{{chart| | | |GrMa |~|y|~| GRP | |GrMa=Grandma|GRP=Grandpa}}
{{chart| | | | | | | |)|-|-|-|.| }}
{{chart| | | MOM |y| DAD | |DAISY|MOM=Mom|DAD=Dad|DAISY=[[Aunt Daisy]]}}
{{chart| |,|-|-|-|+|-|-|-|.| | | }}
{{chart| JOE | | ME  | | SIS | | |JOE=My brother Joe|ME='''Me!'''|SIS=My little sister}}
{{chart/end}}


表格表示我有一个兄弟Joe和一个妹妹，我的妈妈嫁给了我的爸爸，我爸爸的父母是爷爷和奶奶，我爸爸的父母还有另一个孩子daisy阿姨。
==可折叠示例==
<div class="wenzi1">
代码：
<pre><nowiki>
{{chart top|An example family tree}}
{{chart/start|align=center}}
{{chart| | | |GrMa |~|y|~| GRP | |GrMa=Grandma|GRP=Grandpa}}
{{chart| | | | | | | |)|-|-|-|.| }}
{{chart| | | MOM |y| DAD | |DAISY|MOM=Mom|DAD=Dad|DAISY=[[Aunt Daisy]]}}
{{chart| |,|-|-|-|+|-|-|-|.| | | }}
{{chart| JOE | | ME  | | SIS | | |JOE=My brother Joe|ME='''Me!'''|SIS=My little sister}}
{{chart/end}}
{{chart bottom}}
</nowiki></pre>

生成效果：
{{chart top|An example family tree}}
{{chart/start|align=center}}
{{chart| | | |GrMa |~|y|~| GRP | |GrMa=Grandma|GRP=Grandpa}}
{{chart| | | | | | | |)|-|-|-|.| }}
{{chart| | | MOM |y| DAD | |DAISY|MOM=Mom|DAD=Dad|DAISY=[[Aunt Daisy]]}}
{{chart| |,|-|-|-|+|-|-|-|.| | | }}
{{chart| JOE | | ME  | | SIS | | |JOE=My brother Joe|ME='''Me!'''|SIS=My little sister}}
{{chart/end}}
{{chart bottom}}
</div>
==参数==
<div class="wenzi1">
这个模版可以接收任何代表“单元”和“连接线”的参数。
*“单元”可以包含任何wiki标记，每个单元的内容由一个命名参数来决定，通常情况下，单元用来表示人物及相关信息，每个单元有3倍连接线宽，并且默认有一个2像素的黑色边框。单元可以被任何合法的模版参数命名。
*“连接线”被用来连接各个“单元”。模版提供各种各样的连接线样式。连接线由一个-或者两个-表示，在连接线为空的特殊情况下，空连接线由一个空格表示。下面是连接线的表示。
{| style="float: left; margin-left: 1em;"
|+ '''实线:'''
|-
| <big><code>!</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|!}}{{chart/end}} || &nbsp;
| <big><code>,</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|,}}{{chart/end}} || &nbsp;
| <big><code>v</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|v}}{{chart/end}} || &nbsp;
| <big><code>.</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|.}}{{chart/end}} || &nbsp;
|-
| <big><code>-</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|-}}{{chart/end}} || &nbsp;
| <big><code>)</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|)}}{{chart/end}} || &nbsp;
| <big><code>+</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|+}}{{chart/end}} || &nbsp;
| <big><code>(</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|(}}{{chart/end}} || &nbsp;
|-
| || ||
| <big><code>`</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|`}}{{chart/end}} || &nbsp;
| <big><code>^</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|^}}{{chart/end}} || &nbsp;
| <big><code>'</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|'}}{{chart/end}} || &nbsp;
|}
{| style="float: left; margin-left: 1em;"
|+ '''虚线:'''
|-
| <big><code>:</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|:}}{{chart/end}} || &nbsp;
| <big><code>F</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|F}}{{chart/end}} || &nbsp;
| <big><code>V</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|V}}{{chart/end}} || &nbsp;
| <big><code>7</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|7}}{{chart/end}} || &nbsp;
|-
| <big><code>~</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|~}}{{chart/end}} || &nbsp;
| <big><code>D</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|D}}{{chart/end}} || &nbsp;
| <big><code>%</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|%}}{{chart/end}} || &nbsp;
| <big><code>C</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|C}}{{chart/end}} || &nbsp;
|-
| || ||
| <big><code>L</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|L}}{{chart/end}} || &nbsp;
| <big><code>A</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|A}}{{chart/end}} || &nbsp;
| <big><code>J</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|J}}{{chart/end}} || &nbsp;
|}
{| style="float: left; margin-left: 1em;"
|+ '''点虚线:'''
|-
| <big><code>Q</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|Q}}{{chart/end}} || &nbsp;
| <big><code>S</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|S}}{{chart/end}} || &nbsp;
| <big><code>M</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|M}}{{chart/end}} || &nbsp;
| <big><code>T</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|T}}{{chart/end}} || &nbsp;
|-
| <big><code>P</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|P}}{{chart/end}} || &nbsp;
| <big><code>H</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|H}}{{chart/end}} || &nbsp;
| <big><code>R</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|R}}{{chart/end}} || &nbsp;
| <big><code>G</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|G}}{{chart/end}} || &nbsp;
|-
| || ||
| <big><code>Y</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|Y}}{{chart/end}} || &nbsp;
| <big><code>W</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|W}}{{chart/end}} || &nbsp;
| <big><code>Z</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|Z}}{{chart/end}} || &nbsp;
|}
{| style="float: left; margin-left: 1em;"
|+ '''混合:'''
|-
| || ||
| <big><code>j</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|j}}{{chart/end}} || &nbsp;
| || ||
| || ||
| <big><code>y</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|y}}{{chart/end}} || &nbsp;
| || ||
| &nbsp; || &nbsp; || &nbsp;
| || ||
| <big><code>r</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|r}}{{chart/end}} || &nbsp;
| || ||
| || ||
| <big><code>m</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|m}}{{chart/end}} || &nbsp;
| || ||
| &nbsp; || &nbsp; || &nbsp;
| || ||
| <big><code>r2</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|r2}}{{chart/end}} || &nbsp;
| || ||
| || ||
| <big><code>m2</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|m2}}{{chart/end}} || &nbsp;
| || ||
|-
| <big><code>d</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|d}}{{chart/end}} || &nbsp;
| <big><code>*</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|*}}{{chart/end}} || &nbsp;
| <big><code>c</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|c}}{{chart/end}} || &nbsp;
| <big><code>f</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|f}}{{chart/end}} || &nbsp;
| <big><code>t</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|t}}{{chart/end}} || &nbsp;
| <big><code>e</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|e}}{{chart/end}} || &nbsp;
| &nbsp; || &nbsp; || &nbsp;
| <big><code>k</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|k}}{{chart/end}} || &nbsp;
| <big><code>a</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|a}}{{chart/end}} || &nbsp;
| <big><code>l</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|l}}{{chart/end}} || &nbsp;
| <big><code>o</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|o}}{{chart/end}} || &nbsp;
| <big><code>b</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|b}}{{chart/end}} || &nbsp;
| <big><code>p</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|p}}{{chart/end}} || &nbsp;
| &nbsp; || &nbsp; || &nbsp;
| <big><code>k2</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|k2}}{{chart/end}} || &nbsp;
| <big><code>a2</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|a2}}{{chart/end}} || &nbsp;
| <big><code>l2</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|l2}}{{chart/end}} || &nbsp;
| <big><code>o2</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|o2}}{{chart/end}} || &nbsp;
| <big><code>b2</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|b2}}{{chart/end}} || &nbsp;
| <big><code>p2</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|p2}}{{chart/end}} || &nbsp;
|-
| || ||
| <big><code>i</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|i}}{{chart/end}} || &nbsp;
| || ||
| || ||
| <big><code>h</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|h}}{{chart/end}} || &nbsp;
| || ||
| &nbsp; || &nbsp; || &nbsp;
| || ||
| <big><code>q</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|q}}{{chart/end}} || &nbsp;
| || ||
| || ||
| <big><code>n</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|n}}{{chart/end}} || &nbsp;
| || ||
| &nbsp; || &nbsp; || &nbsp;
| || ||
| <big><code>q2</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|q2}}{{chart/end}} || &nbsp;
| || ||
| || ||
| <big><code>n2</code></big> || style="border: 1px solid gray;" | {{chart/start}}{{chart|n2}}{{chart/end}} || &nbsp;
| || ||
|}
</div>
==样式属性==
<div class="wenzi1">
单元的外观可以由以下参数控制：
* ''border'' 表示每个单元边框，单位是像素。
* ''boxstyle'' 可以用 CSS 直接控制。示例如下：
<pre><nowiki>
{{chart/start}}
{{chart|border=1|boxstyle=background:green;  | | FOO |y| BAR | |FOO=Box 1|BAR=Box 2}}
{{chart | | |,|-|^|-|.| | }}
{{chart|border=3|boxstyle=background:yellow; | | FOO | | BAR | |FOO=Box 3|BAR=Box 4}}
{{chart/end}}
</nowiki></pre>

生成这个表格：

{{chart/start}}
{{chart|border=1|boxstyle=background:green;  | | FOO |y| BAR | |FOO=Box 1|BAR=Box 2}}
{{chart | | |,|-|^|-|.| | }}
{{chart|border=3|boxstyle=background:yellow; | | FOO | | BAR | |FOO=Box 3|BAR=Box 4}}
{{chart/end}}


样式属性甚至可以为每行每个单元设置样式，示例如下：

<pre><nowiki>
{{chart/start}}
{{chart| | | | |CLEAR| | | | |CLEAR=Clear box}}
{{chart| |,|-|-|'|!|`|-|-|.| }}
{{chart|RED  |~|GREEN|~|BLUE |RED=Red box|GREEN=Green box|BLUE=Blue box
|boxstyle_RED  =background-color: red;
|boxstyle_GREEN=background-color: green;
|boxstyle_BLUE =background-color: blue;
}}
{{chart/end}}
</nowiki></pre>

生成如下：

{{chart/start}}
{{chart| | | | |CLEAR| | | | |CLEAR=Clear box}}
{{chart| |,|-|-|'|!|`|-|-|.| }}
{{chart|RED  |~|GREEN|~|BLUE |RED=Red box|GREEN=Green box|BLUE=Blue box
|boxstyle_RED  =background-color: red;
|boxstyle_GREEN=background-color: green;
|boxstyle_BLUE =background-color: blue;
}}
{{chart/end}}


当用样式属性来设置每个单元的样式时，请确保设置为左对齐 (用 "<code>|RED&nbsp;&nbsp;|</code>" 代替"<code>|&nbsp;RED&nbsp;|</code>"在上面的例子中),，否则模版会停止寻找样式参数。

这个[[template:chart/start]]模版同样支持用<b><span style="color:purple;">|style</span></b>参数来为整个表格设置样式，还可以使用可选参数<b><span style="color:purple;">|align</span></b>来设置对齐格式。
</div>
==使用模板==
<div class="wenzi1">
在管理的wiki下创建以下内容：

*[[模板:Chart]]
*[[模板:Chart/start]]
*[[模板:Chart/end]]
*[[模板:Chart_top]]
*[[模板:Chart_bottom]]
*[[模块:Arguments]]
*[[模块:No globals]]
*[[模块:TreeChart]]
*[[模块:TreeChart/data]]

</div>