3 167
edições
Mudanças
Ir para navegação
Ir para pesquisar
Criou página com '{{Lua|Módulo:TreeChart}} <noinclude>{{documentation subpage}}</noinclude> <!--PLEASE ADD METADATA TO THE <includeonly> SECTION AT THE BOTTOM OF THIS PAGE EDIT TEMPLATE D...'
{{Lua|Módulo:TreeChart}}
<noinclude>{{documentation subpage}}</noinclude>
<!--PLEASE ADD METADATA TO THE <includeonly> SECTION AT THE BOTTOM OF THIS PAGE
EDIT TEMPLATE DOCUMENTATION BELOW THIS LINE-->
==Uso==
Este modelo produz um gráfico numa ficha tipo "árvore genealógica" que consiste em caixas e linhas de conexão baseadas livremente numa sintaxe similar ao [[ASCII art]]. Está destinado a usar-se junto com {{tl|Chart/start}} e {{tl|Chart/end}}. O gráfico mostra-se como tabelas [[HTML]] utilizando os atributos [[CSS]], e pode conter [[wikitexto]] arbitrário dentro dos quadros. Esta implementação baseou-se no modelo agora obsoleto {{tl|árvore genealógica}}.
'''NOTA:''' <u>O modelo também funciona com o nome abreviado de {{tl|chart}}.</u>
==Exemplo básico==
Este código:
<pre><nowiki>
{{Chart/start|align=center|summary=Um exemplo de árvore genealógica}}
{{Chart||| |Aba |~|e|~| Abo||Aba=Avó|Abo=Avô}}
{{Chart||||||| |)|-|-|-|.| }}
{{Chart||| Mad |e| Pad||DAISY|Mad=Mãe|Pad=Pai|DAISY=[[Tia Daisy]]}}
{{Chart| |,|-|-|-|+|-|-|-|.||| }}
{{Chart| JOE|| EU || HMA|| |JOE=Meu irmão Joe|EU='''Eu!'''|HMA=Minha irmã pequena}}
{{Chart/end}}
</nowiki></pre>
produz isto:
{{Chart/start|align=center|summary=Um exemplo de árvore genealógica}}
{{Chart||| |Aba |~|e|~| Abo||Aba=Avó|Abo=Avô}}
{{Chart||||||| |)|-|-|-|.| }}
{{Chart||| Mad |e| Pad||DAISY|Mad=Mãe|Pad=Pai|DAISY=[[Tia Daisy]]}}
{{Chart| |,|-|-|-|+|-|-|-|.||| }}
{{Chart| JOE|| EU || HMA|| |JOE=Meu irmão Joe|EU='''Eu!'''|HMA=Minha irmã pequena}}
{{Chart/end}}
Este quadro mostra visualmente a informação de que tenho um irmão Joe e uma irmã pequena; minha mãe casou-se com meu pai; e os pais de meu pai eram avó e avô; e os pais de meu pai tiveram outro filho, tia Daisy. O código anterior produz uma tabela de tamanho 9 bichas x 10 colunas como se mostra a seguir.
[[File:Chart template table structure.png|center|A estrutura da tabela criada usando o exemplo anterior]]
==Exemplo básico colapsable==
Este código usa {{tl|chart top}}:
<pré><nowiki>
{{chart top|Um exemplo de árvore genealógica}}
{{Chart/start|align=center}}
{{Chart||| |Aba |~|e|~| Abo||Aba=Avó|Abo=Avô}}
{{Chart||||||| |)|-|-|-|.| }}
{{Chart||| Mad |e| Pad||DAISY|Mad=Mãe|Pad=Pai|DAISY=[[Tia Daisy]]}}
{{Chart| |,|-|-|-|+|-|-|-|.||| }}
{{Chart| JOE|| EU || HMA|| |JOE=Meu irmão Joe|EU='''Eu!'''|HMA=Minha irmã pequena}}
{{Chart/end}}
{{chart bottom}}
</nowiki></pré>
produz isto:
{{chart top|Um exemplo de árvore genealógica}}
{{Chart/start|align=center}}
{{Chart||| |Aba |~|e|~| Abo||Aba=Avó|Abo=Avô}}
{{Chart||||||| |)|-|-|-|.| }}
{{Chart||| Mad |e| Pad||DAISY|Mad=Mãe|Pad=Pai|DAISY=[[Tia Daisy]]}}
{{Chart| |,|-|-|-|+|-|-|-|.||| }}
{{Chart| JOE|| EU || HMA|| |JOE=Meu irmão Joe|EU='''Eu!'''|HMA=Minha irmã pequena}}
{{Chart/end}}
{{chart bottom}}
Este quadro mostra visualmente a informação de que tenho um irmão Joe e uma irmã pequena; minha mãe casou-se com meu pai; e os pais de meu pai eram avó e avô; e os pais de meu pai tiveram outro filho, tia Daisy.
==Parâmetros==
O modelo aceita qualquer número de parâmetros sem nome e cada parâmetro especifica um '''box''' (caixa) ou um '''tile''' (conector).
* '''Boxes''' (caixas) podem conter [[wikitexto]] arbitrário. O conteúdo de cada quadro especifica-se utilizando parâmetros com nome adicionais agregados ao telefonema de modelo. Cada caixa tem '''três lacunas de largura''' e normalmente tem uma borda negra de dois pixels de largura. Os quadros podem ter qualquer nome que seja um nome de parâmetro de modelo válido, sujeito a um mínimo de dois caracteres alfabéticos.
* '''Tiles''' (conectores) são símbolos de desenho linear utilizados para ligar as caixas. Cada conector ocupa '''uma lacuna de largura'''. Consistem em vários estilos de linhas horizontais e verticais junto com cantos e cruzes segundo seja necessário. As fichas especificam-se utilizando seu nome de um ou dois caracteres: para as fichas mais comuns, esse carácter é mais ou menos aproximado à aparência da ficha. Um caso especial é o '''conector vazio''', especificado por um sozinho carácter de espaço. A seguir mostra-se uma tabela de conectores disponíveis:
{| style="float: left; margin-left: 1em;"
|+ '''Linhas sólidas:'''
|-
| {{grande|<code>!</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|!}}{{Chart/end}} ||
| {{grande|<code>,</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|,}}{{Chart/end}} ||
| {{grande|<code>v</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|v}}{{Chart/end}} ||
| {{grande|<code>.</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|.}}{{Chart/end}} ||
|-
| {{grande|<code>-</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|-}}{{Chart/end}} ||
| {{grande|<code>)</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|)}}{{Chart/end}} ||
| {{grande|<code>+</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|+}}{{Chart/end}} ||
| {{grande|<code>(</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|(}}{{Chart/end}} ||
|-
| || ||
| {{grande|<code>`</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|`}}{{Chart/end}} ||
| {{grande|<code>^</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|^}}{{Chart/end}} ||
| {{grande|<code>'</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|'}}{{Chart/end}} ||
|}
{| style="float: left; margin-left: 1em;"
|+ '''Linhas de guiões:'''
|-
| {{grande|<code>:</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|:}}{{Chart/end}} ||
| {{grande|<code>F</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|F}}{{Chart/end}} ||
| {{grande|<code>V</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|V}}{{Chart/end}} ||
| {{grande|<code>7</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|7}}{{Chart/end}} ||
|-
| {{grande|<code>~</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|~}}{{Chart/end}} ||
| {{grande|<code>D</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|D}}{{Chart/end}} ||
| {{grande|<code>%</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|%}}{{Chart/end}} ||
| {{grande|<code>C</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|C}}{{Chart/end}} ||
|-
| || ||
| {{grande|<code>L</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|L}}{{Chart/end}} ||
| {{grande|<code>A</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|A}}{{Chart/end}} ||
| {{grande|<code>J</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|J}}{{Chart/end}} ||
|}
{| style="float: left; margin-left: 1em;"
|+ '''Linhas punteadas:'''
|-
| {{grande|<code>Q</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|Q}}{{Chart/end}} ||
| {{grande|<code>S</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|S}}{{Chart/end}} ||
| {{grande|<code>M</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|M}}{{Chart/end}} ||
| {{grande|<code>T</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|T}}{{Chart/end}} ||
|-
| {{grande|<code>P</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|P}}{{Chart/end}} ||
| {{grande|<code>H</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|H}}{{Chart/end}} ||
| {{grande|<code>R</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|R}}{{Chart/end}} ||
| {{grande|<code>G</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|G}}{{Chart/end}} ||
|-
| || ||
| {{grande|<code>E</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|E}}{{Chart/end}} ||
| {{grande|<code>W</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|W}}{{Chart/end}} ||
| {{grande|<code>Z</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|Z}}{{Chart/end}} ||
|}
{| style="float: left; margin-left: 1em;"
|+'''Guiões horiz sólido vert:'''
| {{grande|<code>fy</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|fy}}{{Chart/end}}
| {{grande|<code>e</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|e}}{{Chart/end}}
| {{grande|<code>ye</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|ye}}{{Chart/end}}
|-
| {{grande|<code>f</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|f}}{{Chart/end}}
| {{grande|<code>t</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|t}}{{Chart/end}}
| {{grande|<code>e</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|e}}{{Chart/end}}
|-
| {{grande|<code>fh</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|fh}}{{Chart/end}}
| {{grande|<code>h</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|h}}{{Chart/end}}
| {{grande|<code>tenho</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|tenho}}{{Chart/end}}
|}
{| style="float: left; margin-left: 1em;"
|+ '''Sólido horiz guiões vert:'''
| {{grande|<code>dj</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|dj}}{{Chart/end}}
| {{grande|<code>j</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|j}}{{Chart/end}}
| {{grande|<code>jc</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|jc}}{{Chart/end}}
|-
| {{grande|<code>d</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|d}}{{Chart/end}}
| {{grande|<code>*</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|*}}{{Chart/end}}
| {{grande|<code>c</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|c}}{{Chart/end}}
|-
| {{grande|<code>di</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|di}}{{Chart/end}}
| {{grande|<code>i</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|i}}{{Chart/end}}
| {{grande|<code>ic</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|ic}}{{Chart/end}}
|}
{| style="float: left; margin-left: 1em;"
|+'''Sólido horiz pontos vert:'''
| {{grande|<code>kr</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|kr}}{{Chart/end}}
| {{grande|<code>r</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|r}}{{Chart/end}}
| {{grande|<code>rl</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|rl}}{{Chart/end}}
|-
| {{grande|<code>k</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|k}}{{Chart/end}}
| {{grande|<code>a</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|a}}{{Chart/end}}
| {{grande|<code>l</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|l}}{{Chart/end}}
|-
| {{grande|<code>kq</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|kq}}{{Chart/end}}
| {{grande|<code>q</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|q}}{{Chart/end}}
| {{grande|<code>ql</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|ql}}{{Chart/end}}
|}
{| style="float: left; margin-left: 1em;"
|+ '''Guiões horiz pontos vert:'''
| {{grande|<code>kr2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|kr2}}{{Chart/end}}
| {{grande|<code>r2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|r2}}{{Chart/end}}
| {{grande|<code>rl2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|rl2}}{{Chart/end}}
|-
| {{grande|<code>k2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|k2}}{{Chart/end}}
| {{grande|<code>a2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|a2}}{{Chart/end}}
| {{grande|<code>l2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|l2}}{{Chart/end}}
|-
|{{grande|<code>kq2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|kq2}}{{Chart/end}}
| {{grande|<code>q2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|q2}}{{Chart/end}}
| {{grande|<code>ql2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|ql2}}{{Chart/end}}
|}
{| style="float: left; margin-left: 1em;"
|+ '''Pontos horiz sólido vert:'''
| {{grande|<code>om</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|om}}{{Chart/end}}
| {{grande|<code>m</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|m}}{{Chart/end}}
| {{grande|<code>mp</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|mp}}{{Chart/end}}
|-
| {{grande|<code>ou</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|ou}}{{Chart/end}}
| {{grande|<code>b</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|b}}{{Chart/end}}
| {{grande|<code>p</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|p}}{{Chart/end}}
|-
| {{grande|<code>on</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|on}}{{Chart/end}}
| {{grande|<code>n</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|n}}{{Chart/end}}
| {{grande|<code>np</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|np}}{{Chart/end}}
|}
{| style="float: left; margin-left: 1em;"
|+ '''Pontos horiz guiões vert:'''
| {{grande|<code>om2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|om2}}{{Chart/end}}
| {{grande|<code>m2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|m2}}{{Chart/end}}
| {{grande|<code>mp2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|mp2}}{{Chart/end}}
|-
| {{grande|<code>ou2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|ou2}}{{Chart/end}}
| {{grande|<code>b2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|b2}}{{Chart/end}}
| {{grande|<code>p2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|p2}}{{Chart/end}}
|-
| {{grande|<code>on2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|on2}}{{Chart/end}}
| {{grande|<code>n2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|n2}}{{Chart/end}}
| {{grande|<code>np2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|np2}}{{Chart/end}}
|}
{{limpar}}
{|
|+ '''Vários:'''<!-- This subset is an insufficient set or questionable, but maps onto tiles that exist in {{familytree}}: -->
|-
| ||
| {{grande|<code>T2</code>}} ||style="border:1px solid gray"| {{Chart/start}}{{Chart|T2}}{{Chart/end}}
|-
| {{grande|<code>G2</code>}} ||style="border:1px solid gray"| {{Chart/start}}{{Chart|G2}}{{Chart/end}}
| {{grande|<code>X</code>}} ||style="border:1px solid gray"| {{Chart/start}}{{Chart|X}}{{Chart/end}}
| {{grande|<code>K</code>}} ||style="border:1px solid gray"| {{Chart/start}}{{Chart|K}}{{Chart/end}}
| {{grande|<code>l4</code>}} ||style="border:1px solid gray"| {{Chart/start}}{{Chart|l4}}{{Chart/end}}
|-
| ||
| {{grande|<code>Ou</code>}} ||style="border:1px solid gray"| {{Chart/start}}{{Chart|Ou}}{{Chart/end}}
|}
==Atributos de estilo==
A aparência dos quadros numa bicha pode-se controlar mediante os seguintes parâmetros de modelo opcionais:
* ''border'' especifica o largo da borda do quadro em pixels,
* ''boxstyle'' pode-se usar para agregar declarações arbitrárias [[CSS]] directamente aos atributos de estilo de caixa. Por exemplo, o seguinte código:
<pré><nowiki>
{{Chart/start}}
{{Chart|border=1|boxstyle=color:white; background:green;|| FOO |e| 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></pré>
produz este quadro:
{{Chart/start}}
{{Chart|border=1|boxstyle=color:white; background:green; || FOO |e| BAR||FOO=Box 1|BAR=Box 2}}
{{Chart|||,|-|^|-|.||}}
{{Chart|border=3|boxstyle=background:yellow;|| FOO|| BAR||FOO=Box 3|BAR=Box 4}}
{{Chart/end}}
Os atributos de estilo inclusive podem-se estabelecer para quadros individuais dentro de cada bicha, como no seguinte exemplo:
<pré><nowiki>
{{Chart/start}}
{{Chart|||||CLEAR|||||CLEAR=Clear box}}
{{Chart| |,|-|-|'|!|`|-|-|.| }}
{{Chart|REDE |~|GREEN|~|BLUE |REDE=Rede box|GREEN=Green box|BLUE=Blue box
|boxstyle_REDE =color:white; background-color: rede;
|boxstyle_GREEN=color:yellow; background-color: green;
|boxstyle_BLUE =color:white; background-color: blue;
}}
{{Chart/end}}
</nowiki></pré>
que produz isto:
{{Chart/start}}
{{Chart|||||CLEAR|||||CLEAR=Clear box}}
{{Chart| |,|-|-|'|!|`|-|-|.| }}
{{Chart|REDE |~|GREEN|~|BLUE |REDE=Rede box|GREEN=Green box|BLUE=Blue box
|boxstyle_REDE =color:white; background-color: rede;
|boxstyle_GREEN=color:yellow; background-color: green;
|boxstyle_BLUE =color:white; background-color: blue;
}}
{{Chart/end}}
'''Nota:''' Ao especificar atributos de estilo para quadros com nome individuais, assegure-se de que os nomes dos quadros estejam alinhados com o lado '''esquerdo''' da área reservada para eles no telefonema de modelo (como em "<code>|REDE |</code>"em lugar de"<code>| REDE |</code>" no exemplo anterior), caso contrário, o modelo terminará procurando um parâmetro de estilo com espaços em seu nome.
O modelo {{tl|Chart/start}} também aceita um parâmetro opcional {{param|style}} que se pode usar para estabelecer estilos CSS pára todo o diagrama, e um parâmetro opcional {{param|align}} para estabelecer o alinhamento do gráfico.
== Migração desde ''árvore genealógica''==
O modelo {{tl|chart}} é amplamente compatível com o modelo anterior {{tl|árvore genealógica}}. No entanto, para usar a funcionalidade adicional que se oferece com este modelo, os diagramas devem se actualizar para usar {{tl|chart}} em seu lugar. Muitos diagramas de {{tl|árvore genealógica}} podem modificar-se para usar {{tl|chart}} simplesmente substituindo o wikitexto <code>árvore genealógica</code> por <code>chart</code>. Alguns dos conectores "mistos" tiveram que ser renomeados, e os diagramas {{tl|árvore genealógica}} que usam estes conectores terão que fazer algumas mudanças. Ademais, incluíram-se três conectores "vários" nesta lista que não têm mudado: <code>K, Ou, X.</code>
{| class="wikitable" style="text-align:center; float: left; margin-left: 1em;"
|+Conectores modificados
!Tile!!{{tl|árvore genealógica}}!!{{tl|chart}}||Notas sobre<br />parâmetros
|-
|{{Chart/start}}{{Chart|c}}{{Chart/end}}||<code>{</code>||<code>c</code>||Mudado
|-
|{{Chart/start}}{{Chart|d}}{{Chart/end}}||<code>}</code>||<code>d</code>||Mudado
|-
|{{Chart/start}}{{Chart|t}}{{Chart/end}}||<code>#</code>||<code>t</code>||Mudado
|-
|{{Chart/start}}{{Chart|e}}{{Chart/end}}||<code>[</code>||<code>e</code>||Mudado
|-
|{{Chart/start}}{{Chart|f}}{{Chart/end}}||<code>]</code>||<code>f</code>||Mudado
|-
|{{Chart/start}}{{Chart|dei}}{{Chart/end}}||<code>b</code>||<code>dei</code>||Mudado
|-
|{{Chart/start}}{{Chart|fh}}{{Chart/end}}||<code>c</code>||<code>fh</code>||Mudado
|-
|{{Chart/start}}{{Chart|ic}}{{Chart/end}}||<code>d</code>||<code>ic</code>||Mudado
|-
|{{Chart/start}}{{Chart|tenho}}{{Chart/end}}||<code>j</code>||<code>tenho</code>||Mudado
|-
|{{Chart/start}}{{Chart|ye}}{{Chart/end}}||<code>n</code>||<code>ye</code>||Mudado
|-
|{{Chart/start}}{{Chart|om2}}{{Chart/end}}||<code>p</code>||<code>om2</code>||Mudado
|-
|{{Chart/start}}{{Chart|mp2}}{{Chart/end}}||<code>q</code>||<code>mp2</code>||Mudado
|-
|{{Chart/start}}{{Chart|kr2}}{{Chart/end}}||<code>r</code>||<code>kr2</code>||Mudado
|}
{| class="wikitable" style="text-align:center; float: left; margin-left: 1em;"
|+Conectores vários
!Conector!!{{tl|árvore genealógica}}!!{{tl|chart}}||Notas sobre<br />parâmetros
|-
|{{Chart/start}}{{Chart|G2}}{{Chart/end}}||<code>G</code>||<code>G2</code>||Mudado
|-
||{{Chart/start}}{{Chart|K}}{{Chart/end}}||<code>K</code>||<code>K</code>||Igual
|-
|{{Chart/start}}{{Chart|T2}}{{Chart/end}}||<code>T</code>||<code>T2</code>||Mudado
|-
||{{Chart/start}}{{Chart|Ou}}{{Chart/end}}||<code>Ou</code>||<code>Ou</code>||Igual
|-
||{{Chart/start}}{{Chart|X}}{{Chart/end}}||<code>X</code>||<code>X</code>||Igual
|-
|{{Chart/start}}{{Chart|l4}}{{Chart/end}}||<code>k</code>||<code>l4</code>||Mudado
|}
{{limpar}}
Ao converter de {{tl|árvore genealógica}} a {{tl|chart}} deve-se ter cuidado com todos os glifos mencionados nesta secção para gerar conectores com {{tl|árvore genealógica}}, tendo cuidado ao os modificar para que os conectores não se alterem, sendo substituídos por conectores inapropiados de {{tl|chart}}.
{|
|-
|Por exemplo: o glifo "[[k]]" gera o conector
|style="border:1px solid gray"|{{familytree/start}}{{árvore genealógica|k}}{{familytree/end}}
|com {{tl|árvore genealógica}}
|mas
|style="border:1px solid gray"|{{Chart/start}}{{Chart|k}}{{Chart/end}}
|com {{tl|chart}}
|(em vez de usar "l4" para gerar
|style="border:1px solid gray"|{{Chart/start}}{{Chart|l4}}{{Chart/end}}
|com {{tl|chart}}).
|}
Por último, se algum uso do modelo {{tl|árvore genealógica}} termina com <code>|}}</code>, essa barra vertical deve eliminar-se, deixando a última cela nessa ficha que contenha texto ou um espaço.
A ferramenta familytree.js pode-se usar para converter as diferentes sintaxes. Simplesmente mude-se a etiqueta de início editando o código, depois clique-se em "Art → Predefinições" para voltar à vista de wikitexto. Os outros modelos actualizar-se-ão para que coincidam.
== Ver também ==
* [[:en:Wirchelp:Family trees]] for other methods.
* [[:en:User:GregU/familytree.js|familytree.js]], uma ferramenta para a fácil criação ou actualização de diagramas utilizando estes modelos
* [[:en:Category:Family tree templates]]
* [[:en:Template:Nerva–Antonine family tree]], um exemplo muito completo
* [[Família Kennedy]], outro exemplo muito completo
* [[Predefinição:Árvore genealógica]]
* [[Predefinição:Ahnentafel]]
<includeonly>
[[Categoria:!Predefinições de diagramas e gráficos]]
[[Categoria:!Predefinições sobre genealogia]]
</includeonly>
<noinclude>{{documentation subpage}}</noinclude>
<!--PLEASE ADD METADATA TO THE <includeonly> SECTION AT THE BOTTOM OF THIS PAGE
EDIT TEMPLATE DOCUMENTATION BELOW THIS LINE-->
==Uso==
Este modelo produz um gráfico numa ficha tipo "árvore genealógica" que consiste em caixas e linhas de conexão baseadas livremente numa sintaxe similar ao [[ASCII art]]. Está destinado a usar-se junto com {{tl|Chart/start}} e {{tl|Chart/end}}. O gráfico mostra-se como tabelas [[HTML]] utilizando os atributos [[CSS]], e pode conter [[wikitexto]] arbitrário dentro dos quadros. Esta implementação baseou-se no modelo agora obsoleto {{tl|árvore genealógica}}.
'''NOTA:''' <u>O modelo também funciona com o nome abreviado de {{tl|chart}}.</u>
==Exemplo básico==
Este código:
<pre><nowiki>
{{Chart/start|align=center|summary=Um exemplo de árvore genealógica}}
{{Chart||| |Aba |~|e|~| Abo||Aba=Avó|Abo=Avô}}
{{Chart||||||| |)|-|-|-|.| }}
{{Chart||| Mad |e| Pad||DAISY|Mad=Mãe|Pad=Pai|DAISY=[[Tia Daisy]]}}
{{Chart| |,|-|-|-|+|-|-|-|.||| }}
{{Chart| JOE|| EU || HMA|| |JOE=Meu irmão Joe|EU='''Eu!'''|HMA=Minha irmã pequena}}
{{Chart/end}}
</nowiki></pre>
produz isto:
{{Chart/start|align=center|summary=Um exemplo de árvore genealógica}}
{{Chart||| |Aba |~|e|~| Abo||Aba=Avó|Abo=Avô}}
{{Chart||||||| |)|-|-|-|.| }}
{{Chart||| Mad |e| Pad||DAISY|Mad=Mãe|Pad=Pai|DAISY=[[Tia Daisy]]}}
{{Chart| |,|-|-|-|+|-|-|-|.||| }}
{{Chart| JOE|| EU || HMA|| |JOE=Meu irmão Joe|EU='''Eu!'''|HMA=Minha irmã pequena}}
{{Chart/end}}
Este quadro mostra visualmente a informação de que tenho um irmão Joe e uma irmã pequena; minha mãe casou-se com meu pai; e os pais de meu pai eram avó e avô; e os pais de meu pai tiveram outro filho, tia Daisy. O código anterior produz uma tabela de tamanho 9 bichas x 10 colunas como se mostra a seguir.
[[File:Chart template table structure.png|center|A estrutura da tabela criada usando o exemplo anterior]]
==Exemplo básico colapsable==
Este código usa {{tl|chart top}}:
<pré><nowiki>
{{chart top|Um exemplo de árvore genealógica}}
{{Chart/start|align=center}}
{{Chart||| |Aba |~|e|~| Abo||Aba=Avó|Abo=Avô}}
{{Chart||||||| |)|-|-|-|.| }}
{{Chart||| Mad |e| Pad||DAISY|Mad=Mãe|Pad=Pai|DAISY=[[Tia Daisy]]}}
{{Chart| |,|-|-|-|+|-|-|-|.||| }}
{{Chart| JOE|| EU || HMA|| |JOE=Meu irmão Joe|EU='''Eu!'''|HMA=Minha irmã pequena}}
{{Chart/end}}
{{chart bottom}}
</nowiki></pré>
produz isto:
{{chart top|Um exemplo de árvore genealógica}}
{{Chart/start|align=center}}
{{Chart||| |Aba |~|e|~| Abo||Aba=Avó|Abo=Avô}}
{{Chart||||||| |)|-|-|-|.| }}
{{Chart||| Mad |e| Pad||DAISY|Mad=Mãe|Pad=Pai|DAISY=[[Tia Daisy]]}}
{{Chart| |,|-|-|-|+|-|-|-|.||| }}
{{Chart| JOE|| EU || HMA|| |JOE=Meu irmão Joe|EU='''Eu!'''|HMA=Minha irmã pequena}}
{{Chart/end}}
{{chart bottom}}
Este quadro mostra visualmente a informação de que tenho um irmão Joe e uma irmã pequena; minha mãe casou-se com meu pai; e os pais de meu pai eram avó e avô; e os pais de meu pai tiveram outro filho, tia Daisy.
==Parâmetros==
O modelo aceita qualquer número de parâmetros sem nome e cada parâmetro especifica um '''box''' (caixa) ou um '''tile''' (conector).
* '''Boxes''' (caixas) podem conter [[wikitexto]] arbitrário. O conteúdo de cada quadro especifica-se utilizando parâmetros com nome adicionais agregados ao telefonema de modelo. Cada caixa tem '''três lacunas de largura''' e normalmente tem uma borda negra de dois pixels de largura. Os quadros podem ter qualquer nome que seja um nome de parâmetro de modelo válido, sujeito a um mínimo de dois caracteres alfabéticos.
* '''Tiles''' (conectores) são símbolos de desenho linear utilizados para ligar as caixas. Cada conector ocupa '''uma lacuna de largura'''. Consistem em vários estilos de linhas horizontais e verticais junto com cantos e cruzes segundo seja necessário. As fichas especificam-se utilizando seu nome de um ou dois caracteres: para as fichas mais comuns, esse carácter é mais ou menos aproximado à aparência da ficha. Um caso especial é o '''conector vazio''', especificado por um sozinho carácter de espaço. A seguir mostra-se uma tabela de conectores disponíveis:
{| style="float: left; margin-left: 1em;"
|+ '''Linhas sólidas:'''
|-
| {{grande|<code>!</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|!}}{{Chart/end}} ||
| {{grande|<code>,</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|,}}{{Chart/end}} ||
| {{grande|<code>v</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|v}}{{Chart/end}} ||
| {{grande|<code>.</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|.}}{{Chart/end}} ||
|-
| {{grande|<code>-</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|-}}{{Chart/end}} ||
| {{grande|<code>)</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|)}}{{Chart/end}} ||
| {{grande|<code>+</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|+}}{{Chart/end}} ||
| {{grande|<code>(</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|(}}{{Chart/end}} ||
|-
| || ||
| {{grande|<code>`</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|`}}{{Chart/end}} ||
| {{grande|<code>^</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|^}}{{Chart/end}} ||
| {{grande|<code>'</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|'}}{{Chart/end}} ||
|}
{| style="float: left; margin-left: 1em;"
|+ '''Linhas de guiões:'''
|-
| {{grande|<code>:</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|:}}{{Chart/end}} ||
| {{grande|<code>F</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|F}}{{Chart/end}} ||
| {{grande|<code>V</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|V}}{{Chart/end}} ||
| {{grande|<code>7</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|7}}{{Chart/end}} ||
|-
| {{grande|<code>~</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|~}}{{Chart/end}} ||
| {{grande|<code>D</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|D}}{{Chart/end}} ||
| {{grande|<code>%</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|%}}{{Chart/end}} ||
| {{grande|<code>C</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|C}}{{Chart/end}} ||
|-
| || ||
| {{grande|<code>L</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|L}}{{Chart/end}} ||
| {{grande|<code>A</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|A}}{{Chart/end}} ||
| {{grande|<code>J</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|J}}{{Chart/end}} ||
|}
{| style="float: left; margin-left: 1em;"
|+ '''Linhas punteadas:'''
|-
| {{grande|<code>Q</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|Q}}{{Chart/end}} ||
| {{grande|<code>S</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|S}}{{Chart/end}} ||
| {{grande|<code>M</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|M}}{{Chart/end}} ||
| {{grande|<code>T</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|T}}{{Chart/end}} ||
|-
| {{grande|<code>P</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|P}}{{Chart/end}} ||
| {{grande|<code>H</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|H}}{{Chart/end}} ||
| {{grande|<code>R</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|R}}{{Chart/end}} ||
| {{grande|<code>G</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|G}}{{Chart/end}} ||
|-
| || ||
| {{grande|<code>E</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|E}}{{Chart/end}} ||
| {{grande|<code>W</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|W}}{{Chart/end}} ||
| {{grande|<code>Z</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|Z}}{{Chart/end}} ||
|}
{| style="float: left; margin-left: 1em;"
|+'''Guiões horiz sólido vert:'''
| {{grande|<code>fy</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|fy}}{{Chart/end}}
| {{grande|<code>e</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|e}}{{Chart/end}}
| {{grande|<code>ye</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|ye}}{{Chart/end}}
|-
| {{grande|<code>f</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|f}}{{Chart/end}}
| {{grande|<code>t</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|t}}{{Chart/end}}
| {{grande|<code>e</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|e}}{{Chart/end}}
|-
| {{grande|<code>fh</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|fh}}{{Chart/end}}
| {{grande|<code>h</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|h}}{{Chart/end}}
| {{grande|<code>tenho</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|tenho}}{{Chart/end}}
|}
{| style="float: left; margin-left: 1em;"
|+ '''Sólido horiz guiões vert:'''
| {{grande|<code>dj</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|dj}}{{Chart/end}}
| {{grande|<code>j</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|j}}{{Chart/end}}
| {{grande|<code>jc</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|jc}}{{Chart/end}}
|-
| {{grande|<code>d</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|d}}{{Chart/end}}
| {{grande|<code>*</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|*}}{{Chart/end}}
| {{grande|<code>c</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|c}}{{Chart/end}}
|-
| {{grande|<code>di</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|di}}{{Chart/end}}
| {{grande|<code>i</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|i}}{{Chart/end}}
| {{grande|<code>ic</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|ic}}{{Chart/end}}
|}
{| style="float: left; margin-left: 1em;"
|+'''Sólido horiz pontos vert:'''
| {{grande|<code>kr</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|kr}}{{Chart/end}}
| {{grande|<code>r</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|r}}{{Chart/end}}
| {{grande|<code>rl</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|rl}}{{Chart/end}}
|-
| {{grande|<code>k</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|k}}{{Chart/end}}
| {{grande|<code>a</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|a}}{{Chart/end}}
| {{grande|<code>l</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|l}}{{Chart/end}}
|-
| {{grande|<code>kq</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|kq}}{{Chart/end}}
| {{grande|<code>q</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|q}}{{Chart/end}}
| {{grande|<code>ql</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|ql}}{{Chart/end}}
|}
{| style="float: left; margin-left: 1em;"
|+ '''Guiões horiz pontos vert:'''
| {{grande|<code>kr2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|kr2}}{{Chart/end}}
| {{grande|<code>r2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|r2}}{{Chart/end}}
| {{grande|<code>rl2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|rl2}}{{Chart/end}}
|-
| {{grande|<code>k2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|k2}}{{Chart/end}}
| {{grande|<code>a2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|a2}}{{Chart/end}}
| {{grande|<code>l2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|l2}}{{Chart/end}}
|-
|{{grande|<code>kq2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|kq2}}{{Chart/end}}
| {{grande|<code>q2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|q2}}{{Chart/end}}
| {{grande|<code>ql2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|ql2}}{{Chart/end}}
|}
{| style="float: left; margin-left: 1em;"
|+ '''Pontos horiz sólido vert:'''
| {{grande|<code>om</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|om}}{{Chart/end}}
| {{grande|<code>m</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|m}}{{Chart/end}}
| {{grande|<code>mp</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|mp}}{{Chart/end}}
|-
| {{grande|<code>ou</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|ou}}{{Chart/end}}
| {{grande|<code>b</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|b}}{{Chart/end}}
| {{grande|<code>p</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|p}}{{Chart/end}}
|-
| {{grande|<code>on</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|on}}{{Chart/end}}
| {{grande|<code>n</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|n}}{{Chart/end}}
| {{grande|<code>np</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|np}}{{Chart/end}}
|}
{| style="float: left; margin-left: 1em;"
|+ '''Pontos horiz guiões vert:'''
| {{grande|<code>om2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|om2}}{{Chart/end}}
| {{grande|<code>m2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|m2}}{{Chart/end}}
| {{grande|<code>mp2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|mp2}}{{Chart/end}}
|-
| {{grande|<code>ou2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|ou2}}{{Chart/end}}
| {{grande|<code>b2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|b2}}{{Chart/end}}
| {{grande|<code>p2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|p2}}{{Chart/end}}
|-
| {{grande|<code>on2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|on2}}{{Chart/end}}
| {{grande|<code>n2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|n2}}{{Chart/end}}
| {{grande|<code>np2</code>}} || style="border: 1px solid gray;"|{{Chart/start}}{{Chart|np2}}{{Chart/end}}
|}
{{limpar}}
{|
|+ '''Vários:'''<!-- This subset is an insufficient set or questionable, but maps onto tiles that exist in {{familytree}}: -->
|-
| ||
| {{grande|<code>T2</code>}} ||style="border:1px solid gray"| {{Chart/start}}{{Chart|T2}}{{Chart/end}}
|-
| {{grande|<code>G2</code>}} ||style="border:1px solid gray"| {{Chart/start}}{{Chart|G2}}{{Chart/end}}
| {{grande|<code>X</code>}} ||style="border:1px solid gray"| {{Chart/start}}{{Chart|X}}{{Chart/end}}
| {{grande|<code>K</code>}} ||style="border:1px solid gray"| {{Chart/start}}{{Chart|K}}{{Chart/end}}
| {{grande|<code>l4</code>}} ||style="border:1px solid gray"| {{Chart/start}}{{Chart|l4}}{{Chart/end}}
|-
| ||
| {{grande|<code>Ou</code>}} ||style="border:1px solid gray"| {{Chart/start}}{{Chart|Ou}}{{Chart/end}}
|}
==Atributos de estilo==
A aparência dos quadros numa bicha pode-se controlar mediante os seguintes parâmetros de modelo opcionais:
* ''border'' especifica o largo da borda do quadro em pixels,
* ''boxstyle'' pode-se usar para agregar declarações arbitrárias [[CSS]] directamente aos atributos de estilo de caixa. Por exemplo, o seguinte código:
<pré><nowiki>
{{Chart/start}}
{{Chart|border=1|boxstyle=color:white; background:green;|| FOO |e| 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></pré>
produz este quadro:
{{Chart/start}}
{{Chart|border=1|boxstyle=color:white; background:green; || FOO |e| BAR||FOO=Box 1|BAR=Box 2}}
{{Chart|||,|-|^|-|.||}}
{{Chart|border=3|boxstyle=background:yellow;|| FOO|| BAR||FOO=Box 3|BAR=Box 4}}
{{Chart/end}}
Os atributos de estilo inclusive podem-se estabelecer para quadros individuais dentro de cada bicha, como no seguinte exemplo:
<pré><nowiki>
{{Chart/start}}
{{Chart|||||CLEAR|||||CLEAR=Clear box}}
{{Chart| |,|-|-|'|!|`|-|-|.| }}
{{Chart|REDE |~|GREEN|~|BLUE |REDE=Rede box|GREEN=Green box|BLUE=Blue box
|boxstyle_REDE =color:white; background-color: rede;
|boxstyle_GREEN=color:yellow; background-color: green;
|boxstyle_BLUE =color:white; background-color: blue;
}}
{{Chart/end}}
</nowiki></pré>
que produz isto:
{{Chart/start}}
{{Chart|||||CLEAR|||||CLEAR=Clear box}}
{{Chart| |,|-|-|'|!|`|-|-|.| }}
{{Chart|REDE |~|GREEN|~|BLUE |REDE=Rede box|GREEN=Green box|BLUE=Blue box
|boxstyle_REDE =color:white; background-color: rede;
|boxstyle_GREEN=color:yellow; background-color: green;
|boxstyle_BLUE =color:white; background-color: blue;
}}
{{Chart/end}}
'''Nota:''' Ao especificar atributos de estilo para quadros com nome individuais, assegure-se de que os nomes dos quadros estejam alinhados com o lado '''esquerdo''' da área reservada para eles no telefonema de modelo (como em "<code>|REDE |</code>"em lugar de"<code>| REDE |</code>" no exemplo anterior), caso contrário, o modelo terminará procurando um parâmetro de estilo com espaços em seu nome.
O modelo {{tl|Chart/start}} também aceita um parâmetro opcional {{param|style}} que se pode usar para estabelecer estilos CSS pára todo o diagrama, e um parâmetro opcional {{param|align}} para estabelecer o alinhamento do gráfico.
== Migração desde ''árvore genealógica''==
O modelo {{tl|chart}} é amplamente compatível com o modelo anterior {{tl|árvore genealógica}}. No entanto, para usar a funcionalidade adicional que se oferece com este modelo, os diagramas devem se actualizar para usar {{tl|chart}} em seu lugar. Muitos diagramas de {{tl|árvore genealógica}} podem modificar-se para usar {{tl|chart}} simplesmente substituindo o wikitexto <code>árvore genealógica</code> por <code>chart</code>. Alguns dos conectores "mistos" tiveram que ser renomeados, e os diagramas {{tl|árvore genealógica}} que usam estes conectores terão que fazer algumas mudanças. Ademais, incluíram-se três conectores "vários" nesta lista que não têm mudado: <code>K, Ou, X.</code>
{| class="wikitable" style="text-align:center; float: left; margin-left: 1em;"
|+Conectores modificados
!Tile!!{{tl|árvore genealógica}}!!{{tl|chart}}||Notas sobre<br />parâmetros
|-
|{{Chart/start}}{{Chart|c}}{{Chart/end}}||<code>{</code>||<code>c</code>||Mudado
|-
|{{Chart/start}}{{Chart|d}}{{Chart/end}}||<code>}</code>||<code>d</code>||Mudado
|-
|{{Chart/start}}{{Chart|t}}{{Chart/end}}||<code>#</code>||<code>t</code>||Mudado
|-
|{{Chart/start}}{{Chart|e}}{{Chart/end}}||<code>[</code>||<code>e</code>||Mudado
|-
|{{Chart/start}}{{Chart|f}}{{Chart/end}}||<code>]</code>||<code>f</code>||Mudado
|-
|{{Chart/start}}{{Chart|dei}}{{Chart/end}}||<code>b</code>||<code>dei</code>||Mudado
|-
|{{Chart/start}}{{Chart|fh}}{{Chart/end}}||<code>c</code>||<code>fh</code>||Mudado
|-
|{{Chart/start}}{{Chart|ic}}{{Chart/end}}||<code>d</code>||<code>ic</code>||Mudado
|-
|{{Chart/start}}{{Chart|tenho}}{{Chart/end}}||<code>j</code>||<code>tenho</code>||Mudado
|-
|{{Chart/start}}{{Chart|ye}}{{Chart/end}}||<code>n</code>||<code>ye</code>||Mudado
|-
|{{Chart/start}}{{Chart|om2}}{{Chart/end}}||<code>p</code>||<code>om2</code>||Mudado
|-
|{{Chart/start}}{{Chart|mp2}}{{Chart/end}}||<code>q</code>||<code>mp2</code>||Mudado
|-
|{{Chart/start}}{{Chart|kr2}}{{Chart/end}}||<code>r</code>||<code>kr2</code>||Mudado
|}
{| class="wikitable" style="text-align:center; float: left; margin-left: 1em;"
|+Conectores vários
!Conector!!{{tl|árvore genealógica}}!!{{tl|chart}}||Notas sobre<br />parâmetros
|-
|{{Chart/start}}{{Chart|G2}}{{Chart/end}}||<code>G</code>||<code>G2</code>||Mudado
|-
||{{Chart/start}}{{Chart|K}}{{Chart/end}}||<code>K</code>||<code>K</code>||Igual
|-
|{{Chart/start}}{{Chart|T2}}{{Chart/end}}||<code>T</code>||<code>T2</code>||Mudado
|-
||{{Chart/start}}{{Chart|Ou}}{{Chart/end}}||<code>Ou</code>||<code>Ou</code>||Igual
|-
||{{Chart/start}}{{Chart|X}}{{Chart/end}}||<code>X</code>||<code>X</code>||Igual
|-
|{{Chart/start}}{{Chart|l4}}{{Chart/end}}||<code>k</code>||<code>l4</code>||Mudado
|}
{{limpar}}
Ao converter de {{tl|árvore genealógica}} a {{tl|chart}} deve-se ter cuidado com todos os glifos mencionados nesta secção para gerar conectores com {{tl|árvore genealógica}}, tendo cuidado ao os modificar para que os conectores não se alterem, sendo substituídos por conectores inapropiados de {{tl|chart}}.
{|
|-
|Por exemplo: o glifo "[[k]]" gera o conector
|style="border:1px solid gray"|{{familytree/start}}{{árvore genealógica|k}}{{familytree/end}}
|com {{tl|árvore genealógica}}
|mas
|style="border:1px solid gray"|{{Chart/start}}{{Chart|k}}{{Chart/end}}
|com {{tl|chart}}
|(em vez de usar "l4" para gerar
|style="border:1px solid gray"|{{Chart/start}}{{Chart|l4}}{{Chart/end}}
|com {{tl|chart}}).
|}
Por último, se algum uso do modelo {{tl|árvore genealógica}} termina com <code>|}}</code>, essa barra vertical deve eliminar-se, deixando a última cela nessa ficha que contenha texto ou um espaço.
A ferramenta familytree.js pode-se usar para converter as diferentes sintaxes. Simplesmente mude-se a etiqueta de início editando o código, depois clique-se em "Art → Predefinições" para voltar à vista de wikitexto. Os outros modelos actualizar-se-ão para que coincidam.
== Ver também ==
* [[:en:Wirchelp:Family trees]] for other methods.
* [[:en:User:GregU/familytree.js|familytree.js]], uma ferramenta para a fácil criação ou actualização de diagramas utilizando estes modelos
* [[:en:Category:Family tree templates]]
* [[:en:Template:Nerva–Antonine family tree]], um exemplo muito completo
* [[Família Kennedy]], outro exemplo muito completo
* [[Predefinição:Árvore genealógica]]
* [[Predefinição:Ahnentafel]]
<includeonly>
[[Categoria:!Predefinições de diagramas e gráficos]]
[[Categoria:!Predefinições sobre genealogia]]
</includeonly>
