Predefinição:Gráfico/doc

Parâmetros

width: largura do gráfico;
height: altura do gráfico;
type: tipo de gráfico.: line para gráfico de linha, area para de área e rect para gráfico de barras;
colors: cores das séries do gráfico, separadas por vírgula. Estas podem ser usadas em formato #rgb/#rrggbb ou pelo nome CSS;
xAxisTitle e yAxisTitle: etiquetas para os eixos x e y;
x: os valores de x em uma lista separada por vírgulas;
y ou y1, y2, …: os valores de y para uma ou várias séries de dados, respectivamente;
legend: título da legenda (somente funciona quando há várias séries de dados);
y1Title, y2Title, …: define a etiqueta da respectiva série de dados na legenda;
linewidth: espessura da linha para gráficos de linha ou distância entre os segmentos para os gráficos de pizza;
showValues: Adicionalmente, mostra os valores de y como texto. (Atualmente, somente gráficos de barras e de pizza não empilhados são suportados) A saída pode ser configurada usando-se os seguintes parâmetros providos como name1:value1, name2:value2:
- fontcolor: cor do texto;
- fontsize: tamanho do texto
innerRadius: Para gráficos de pizza: define o ráio interior para criar um gráfico de donut.

Nota: Na pré-visualização da edição, a extensão um elemento de tela com gráficos vetoriais. No entanto, ao salvar a página, os gráficos são rasterizados para um png.

Exemplos

Gráfico de linha:
{{Gráfico|width=400|height=100|type=line|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9|colors=#36c}}

14

7

0

1

4

8

Nota: O eixo y começa do menor valor de y, apesar de isso poder ser substituído com o parâmetro yAxisMin.

Gráfico de área:
{{Gráfico|width=400|height=100|type=area|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9|colors=#36c}}

14

7

0

1

4

8

Nota: o eixo y começa em 0

Gráfico de barra:
{{Gráfico|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}

Y	10 12 6 14 2 10 7 9
	1 2 3 4 5 6 7 8 X

Gráfico de linha com mais de uma série de dados, usando cores:
{{Gráfico|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legenda|type=line|x=1,2,3,4,5,6,7,8|y1=10,12,6,14,2,10,7,9|y2=2,4,6,8,13,11,9,2|colors=#0000aa,#ff8000}}

Y

14

7

0

1

4

8

X

Gráfico de área com mais de uma série de dados mostrando uma sobreposição homogênea:
{{Gráfico|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legenda|type=area|x=1,2,3,4,5,6,7,8|y1=10,12,6,14,2,10,7,9|y2=2,4,6,8,13,11,9,2|colors=#0000aa,#ff8000}}

Y

14

7

0

1

4

8

X

Gráfico de área com valores de dados suavizados:
{{Gráfico|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legenda|type=stackedarea|x=1,2,3,4,5,6,7,8|y1=10,12,6,14,2,10,7,9|y2=2,4,6,8,13,11,9,2|interpolate=monotone|colors=seagreen, orchid}}

Y

14

7

0

1

4

8

X

Gráfico de barras com séries de dados empilhados:
{{Gráfico|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legenda|type=stackedrect|x=1,2,3,4,5,6,7,8|y1=10,12,6,14,2,10,7,9|y2=2,4,6,8,13,11,9,2|y1Title=Dados A|y2Title=Dados B|colors=seagreen, orchid}}

{{Gráfico|width=100|height=100|type=pie|legend=Legenda|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200}}

	A (7.41%)
	B (14.81%)
	C (11.11%)
	D (22.22%)
	E (7.41%)
	F (7.41%)
	G (11.11%)
	H (3.70%)
	I (14.81%)

{{Gráfico|width=100|height=100|type=pie|legend=Legenda|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200|showValues=}}

	A (7.41%)
	B (14.81%)
	C (11.11%)
	D (22.22%)
	E (7.41%)
	F (7.41%)
	G (11.11%)
	H (3.70%)
	I (14.81%)

{{Gráfico|width=100|height=100|type=pie|legend=Legenda|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200|y2=7,8,9,8,8,9,10,9,5|showValues=}}

	A (7.41%)
	B (14.81%)
	C (11.11%)
	D (22.22%)
	E (7.41%)
	F (7.41%)
	G (11.11%)
	H (3.70%)
	I (14.81%)

TemplateData

Adicione gráficos nas notícias

Parâmetros da predefinição
Esta predefinição prefere a formatação em linha dos parâmetros.
Parâmetro		Descrição	Tipo	Estado
fontcolor	`fontcolor`	defina a cor do texto Padrão #666 Exemplo black ou #000	String	opcional
fontsize	`fontsize`	defina o tamanho do texto Padrão 60% Exemplo 20px ou 50%	String	opcional
style	`style`	defina estilos adicionais Exemplo background: (cor de fundo)	String	opcional
yAxisTitle	`yAxisTitle`	defina o significado dos valores de y	Linha	opcional
type	`type`	defina qual o tipo do gráfico Valores sugeridos `rect` `area` `line` `pie` Exemplo pie para circular; rect para coluna	String	obrigatório
y	`y` `y1`	defina os números do gráfico, separados por vírgula. Você pode usar y2 e assim sucessivamente Exemplo 1,5,10	String	obrigatório
height	`height`	defina a altura do gráfico Exemplo 200px	String	obrigatório
opacity	`opacity`	defina opacidade do gráfico (de 0–1)	String	opcional
width	`width`	defina a largura do gráfico Exemplo 200px	String	obrigatório
x	`x`	defina uma associação aos números de "y" Exemplo 5/2022,6/2022	String	opcional
colors	`colors`	defina cores para o gráfico, separadas por vírgula Padrão #36c Exemplo gold,pink	String	recomendado
y1Title	`y1Title`	defina uma descrição ao y. Ao y2 use y2Title e assim sucessivamente	Linha	opcional
xAxisTitle	`xAxisTitle`	defina o significado dos valores de x	Linha	opcional