模板:Tree chart

50px 模板文件[檢視] [編輯] [歷史] [清除快取]

此模板建基於{{Familytree}}，使用類似ASCII藝術的句法生成系譜圖。它用HTML表格和CSS在適當的位置生成文字框和線條以構成家庭樹，使用者在文本框內可以任意運用維基語法。

用法

首先在紙上把家族圖畫好，如下圖：

奶奶

爺爺

媽媽

爸爸

長腿叔叔

哥哥

我

妹妹

選擇資料格最貼近左邊的一行，這裏選擇了「哥哥、我、妹妹」一行，按照排位寫以下代碼：

{{chart | JOE | | ME  | | SIS | | | JOE=哥哥|ME='''我'''|SIS=妹妹}}

留意名字兩旁要留空格，豎線代表框線，框線間也應留空格，再定義名字。接着便可根據符號代表的線條直接加入代碼：

{{chart | |,|-|-|-|+|-|-|-|.| | | }}
{{chart | JOE | | ME  | | SIS | | | JOE=哥哥|ME='''我'''|SIS=妹妹}}

如此類推，便生成以下代碼：

{{chart/start}}
{{chart | | | | GRM |~|y|~| GRP | | GRM=奶奶|GRP=爷爷}}
{{chart | | | | | | | |)|-|-|-|.| }}
{{chart | | | MOM |y| DAD | |UNCLE| MOM=妈妈|DAD=爸爸|UNCLE=<s>長腿叔叔</s>}}
{{chart | |,|-|-|-|+|-|-|-|.| | | }}
{{chart | JOE | | ME  | | SIS | | | JOE=哥哥|ME='''我'''|SIS=妹妹}}
{{chart/end}}

參數

本模版中，每個參數代表一個「格子」或者一個「框」。

• 格子內含有線狀元素，用來生成橫縱線條以及各種拐角以連接各個「框」。每一個格子用簡單的字符參數來描述，一個特別的例子是空格子，用一個空格來描述不含任何線條的格子。下面列出模版支持的格子類型：

實體線

!			,			v			.
-			)			+			(
			`			^			'

虛線

:			F			V			7
~			D			%			C
			L			A			J

點線

Q			S			M			T
P			H			R			G
			Y			W			Z

混合型

fy		y		ye
f		t		e
fh		h		he

Solid hrzntl dashes vrtcl:

dj		j		jc
d		*		c
di		i		ic

Solid hrzntl dot vrtcl:

kr		r		rl
k		a		l
kq		q		ql

Dashed hrzntl dot vrtcl:

kr2		r2		rl2
k2		a2		l2
kq2		q2		ql2

Dots hrzntl solid vrtcl:

om		m		mp
o		b		p
on		n		np

Dots hrzntl dashes vrtcl:

om2		m2		mp2
o2		b2		p2
on2		n2		np2

雜項

		T2
G2		X		K		l4
		U

• 框內可以填寫任意的維基標記，框內的內容用附加命名變量的方法來加以描述。每一個框為三個格子寬，並且通常具有2px寬的黑邊。附加的變量可以取用任何合法的名字，但是建議不要使用單字符的名字以免與「格子」衝突。

框的外型設定

框的外形可以由參數border和boxstyle控制，前一個以像素為單位控制框邊的寬度，後者可以為任意CSS語句，用來修飾框的外觀。{{chart/start}}模版接受一個可選的style參數來制定整個表格的格式。例如下列代碼：

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

產生如下效果：

Box 1

Box 2

Box 3

Box 4

此外，也接受每個框有各自的外觀設定。例如下列代碼：

{{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: #faa;
|boxstyle_ GREEN =background-color: #afa;
|boxstyle_BLUE =background-color: #aaf;
}}
{{chart/end}}

產生如下效果：

Clear box

Red box

Green box

Blue box

• 注意本例中的RED、GREEN和BLUE所有相關參數，如果原始定義框位的名字前後存在空格，那麼在定義其CSS風格時就必須在「boxstyle_」後補充原有的空格數，所以一般來說並不建議在定義框名字時留有任何不必要的空格。

移植自Familytree須知

本模板基本對應{{Familytree}}的大部分參數，但有一些小改動編者必須先讀，首先是在Familytree中你可以以「|}}」完結一行模板，但在Chart中請移除那個不必要的直桿「|」，另外有5個樹枝的參數定義改名及新增兩個混合型丁字樹枝：

標題	{{family tree}}	{{chart}}	備註
	{	c	Change
	}	d	Change
	#	t	Change
	[	e	Change
	]	f	Change
	b	di	Change
	c	fh	Change
	d	ic	Change
	j	he	Change
	n	ye	Change
	p	om2	Change
	q	mp2	Change
	r	kr2	Change

Miscellaneous tiles

Tile	{{family tree}}	{{chart}}	備註
	G	G2	Change
	K	K	Same
	T	T2	Change
	U	U	Same
	X	X	Same
	k	l4	Change

另見

• en:Template:Nerva–Antonine family tree, a large example.
• Template:Tree list
• Template:Ahnentafel

參見

• en:User:GregU/familytree.js：用來生成Chart系譜的Java工具。