Parâmetros

editar
  • 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

editar

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

editar

Adicione gráficos nas notícias

Parâmetros da predefinição

Esta predefinição prefere a formatação em linha dos parâmetros.

ParâmetroDescriçãoTipoEstado
fontcolorfontcolor

defina a cor do texto

Padrão
#666
Exemplo
black ou #000
Stringopcional
fontsizefontsize

defina o tamanho do texto

Padrão
60%
Exemplo
20px ou 50%
Stringopcional
stylestyle

defina estilos adicionais

Exemplo
background: (cor de fundo)
Stringopcional
yAxisTitleyAxisTitle

defina o significado dos valores de y

Linhaopcional
typetype

defina qual o tipo do gráfico

Valores sugeridos
rect area line pie
Exemplo
pie para circular; rect para coluna
Stringobrigatório
yy y1

defina os números do gráfico, separados por vírgula. Você pode usar y2 e assim sucessivamente

Exemplo
1,5,10
Stringobrigatório
heightheight

defina a altura do gráfico

Exemplo
200px
Stringobrigatório
opacityopacity

defina opacidade do gráfico (de 0–1)

Stringopcional
widthwidth

defina a largura do gráfico

Exemplo
200px
Stringobrigatório
xx

defina uma associação aos números de "y"

Exemplo
5/2022,6/2022
Stringopcional
colorscolors

defina cores para o gráfico, separadas por vírgula

Padrão
#36c
Exemplo
gold,pink
Stringrecomendado
y1Titley1Title

defina uma descrição ao y. Ao y2 use y2Title e assim sucessivamente

Linhaopcional
xAxisTitlexAxisTitle

defina o significado dos valores de x

Linhaopcional