Predefinição:Gráfico

Documentação da predefinição

Esta documentação é incluída (transcluded) a partir de Predefinição:Gráfico/doc. (editar | histórico)

Uso

Essa predefinição pretende simplificar a criação de gráficos, usando o módulo:Gráfico.

Campo type=

Você deve definir o tipo de gráfico, os valores aceitos são:

• bar (valor padrão): gráfico de barras ou colunas.
• dot: gráfico de dispersão (bolinhas).
• pie: gráfico circular (de pizza).
• cartesian: plano cartesiano.

Uso simples

A predefinição aceita um número indeterminada de valores no campo x=. Os grupos devem ser separados por ponto e vírgula (;).

• {{gráfico|x=20.5, 40; 50, 100}}

Nesse exemplo, o gráfico vai criar dois grupos "20.5, 40" e "50, 100" separados por ponto e vírgula. Cada grupo tem duas colunas. As cores são geradas automaticamente.

Nome do grupo

Para definir o nome de cada grupo é utilizado o campo y=. O gráfico circular não aceita esse campo. Assim como x=, os valores devem ser separados por ponto e vírgula.

• {{gráfico|x=20, 40; 50, 100|y=Janeiro; Fevereiro}}

Nesse exemplo, o gráfico vai criar dois grupos "20, 40" e "50, 100". O nome de cada grupo é definido por y=Janeiro; Fevereiro. Note que os valores são separados por ponto e vírgula.

Janeiro

Fevereiro

Campo legend=

Para definir uma legenda para cada cor é utilizado o campo legend=. O plano cartesiano não aceita esse campo, utilize y= ao invés. Os valores devem ser separados por vírgula.

• {{gráfico|x=20, 40; 50, 100|y=Janeiro; Fevereiro|legend=Empresa I, Empresa II}}

Nesse exemplo, o gráfico vai criar dois grupos "20, 40" e "50, 100". A primeira coluna de cada grupo recebeu a cor azul e a legenda "Empresa I" definida em legend=Empresa I, Empresa II.

Janeiro

Fevereiro

Empresa I

Empresa II

Personalização

A predefinição aceita personalização. Verifique os campos:

• colors=: permite escolher as cores do gráfico. Se não utilizado, até oito cores predefinidas serão utilizadas.
• lines=: permite definir o número de linhas no fundo. Útil para o gráfico de barras e dispersão.
• color= permite escolher a cor do texto.
• bg=: permite a escolha do fundo do gráfico.
• style=: permite a adição de qualquer código CSS.
• align= move o gráfico na página. Aceita "left" (valor padrão, esquerda) e "right" (direita).
• width= define a largura e height= define sua altura. Os valores devem estar em pixel (exemplo: 300px).

O gráfico abaixo possui dez linhas (lines=10) e cores personalizadas (colors=#a6a1ff,#c4adfd,#efcef1)

Janeiro

Fevereiro

Empresa I

Empresa II

Empresa III

Campos title= e hide

title= permite estabelecer um título. hide= deve ocultar o gráfico se for preenchido com qualquer texto, portanto deixe esse campo vazio caso não seja seu objetivo. Exemplo:

• {{gráfico|x=20, 40; 50, 100|y=Janeiro; Fevereiro|legend=Empresa I, Empresa II|title=Balanço financeiro|hide=sim}}

Balanço financeiro

Janeiro

Fevereiro

Empresa I

Empresa II

Exemplos

• {{gráfico|type=dot|x=37,33,29,1; 39,35,25,1; 42,35,22,2|y=Jan; Fev; Mar|legend=A, B, C, Nulo|colors=orange, lightblue, #DD2D4A, gray|title=Intenção de votos}}

O gráfico de dispersão (type=dot) funciona igual ao de barras. Clique na bolinha para visualizar seu respectivo valor.

Intenção de votos

Jan

Fev

Mar

A

B

C

Nulo

• {{gráfico|type=pie|width=150px|x=7,58,12,23|legend=Área I, Área II, Área III, Área IV|colors=#7678ED, #F7B801, #F18701, #F35B04}}

Para garantir que o gráfico type=pie permaneça proposicional, sua altura e largura são iguais. Nesse exemplo está definida como width=150px.

Área I (7%)

Área II (58%)

Área III (12%)

Área IV (23%)

• {{gráfico|type=cartesian|x=-2,3; -1,-5; 7,-3|y=A; B; C|colors=#C5D8FF, #41EAD4, #FF8FAB}}

O gráfico type=cartesian possui maiores especificações. O campo x= deve ser preenchido na seguinte sequência: "abscissa, ordenada". Ou seja, em "-4, 7", o valor -4 pertence ao eixo x (linha horizontal) e 7 ao eixo y (vertical). O tamanho padrão do plano cartesiano permite exibir até o ponto 7. Os valores de tamanho sugeridos são: 280px (padrão), 360px, 440px, 520px.

Observações

Essa predefinição gera gráficos localmente usando CSS. A principal opção nos projetos da Wikimedia atualmente é a extensão Chart. Para criar um gráfico é necessário adicionar seus dados no Wikimedia Commons. Exemplo: {{#chart:Example.Pie.chart}} obtém dados de c:Data:Chart Example Data.tab e gera o gráfico em c:Data:Example.Pie.chart, usando Json.

TemplateData

gere um gráfico

Parâmetros do modelo[Editar dados da predefinição]

Este modelo prefere a formatação em linha dos parâmetros.

Parâmetro		Descrição	Tipo	Estado
bg	bg	cor de fundo do gráfico	String	opcional
align	align	posição do gráfico Valores sugeridos left right	String	opcional
style	style	estilo de CSS	String	opcional
hide	hide	permite ocultar o gráfico	Booliano	opcional
title	title	defina um título ao gráfico	String	opcional
color	color	defina a cor do texto	String	opcional
x	x	valores do gráfico	String	obrigatório
y	y	nome dos grupos	String	sugerido
legend	legend	legenda de cada cor	String	sugerido
type	type	tipo de gráfico Valores sugeridos pie dot cartesian	String	sugerido
colors	colors	defina as cores do gráfico	String	sugerido
lines	lines	defina o número de linhas do fundo	Número	opcional
width	width	defina a largura do gráfico Valores sugeridos 280px 360px 440px 520px	String	sugerido
height	height	defina a altura do gráfico	String	opcional