模板:Tree chart

模板文档[查看] [编辑] [历史] [清除缓存]

此模板建基于{{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}}

参数

模版接受至多100个未命名参数，每个参数代表一个“格子”或者一个“框”。

• 格子内含有线状元素，用来生成横纵线条以及各种拐角以连接各个“框”。每一个格子用简单的字符参数来描述，一个特别的例子是空格子，用一个空格来描述不含任何线条的格子。下面列出模版支持的格子类型：

实体线

!			,			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工具。

上述文档嵌入自Template:Tree chart/doc。（编辑 | 历史）
编者可以在本模板的沙盒（创建 | 镜像）和测试样例（创建）页面进行实验。
请在/doc子页面中添加分类。本模板的子页面。