Patrocinado por PHPDocX

Síguenos en Twitter

Buscar en WikilleratO
   

Ayuda:Gráficas de barras

De Wikillerato

(Diferencias entre revisiones)
Línea 1: Línea 1:
 +
==Gráfica de barras básica==
 +
Para dibujar gráficas de barras inserta tus datos entre <bars> and </bars> (también puedes utilizar <lines> y <pie> para otros tipos de gráficas).
Para dibujar gráficas de barras inserta tus datos entre <bars> and </bars> (también puedes utilizar <lines> y <pie> para otros tipos de gráficas).
Línea 18: Línea 20:
-
AVISO: Por defecto el eje Y se autoescala entre sus valores máximos y mínimos. Esa es la razón por la que la segunda barra no se muestra
+
AVISO: Por defecto el eje Y se autoescala entre sus valores máximos y mínimos. Esa es la razón por la que la segunda barra no se muestra.
Línea 68: Línea 70:
2541,911
2541,911
5410,2433
5410,2433
 +
</bars>
 +
 +
 +
==Incluir etiquetas en el eje Y==
 +
 +
Para tener un idea más precisa de los valores en cada barra es conveniente incluir etiquetas en el eje Y. En este ejemplo que incluyen 4 valores:
 +
 +
&lt;bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel&gt;
 +
Oct,4115,1230
 +
Nov,2541,911
 +
Dic,5410,2433
 +
&lt;/bars&gt;
 +
 +
<bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel>
 +
Oct,4115,1230
 +
Nov,2541,911
 +
Dic,5410,2433
 +
</bars>
 +
 +
 +
==Incluir etiquetas en el eje X==
 +
 +
 +
Si se incluye el parámetro xlabel la primera columna de los datos se toma como etiqueta para los mismos:
 +
 +
&lt;bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel&gt;
 +
Oct,4115,1230
 +
Nov,2541,911
 +
Dic,5410,2433
 +
&lt;/bars&gt;
 +
 +
 +
<bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel>
 +
Oct,4115,1230
 +
Nov,2541,911
 +
Dic,5410,2433
 +
</bars>
 +
 +
==Incluir una leyenda==
 +
 +
Cuando la gráfica tiene más de un valor por barra es necesario añadir una leyenda explicativa. Esto se consigue utilizando el parámetro "legend" e incluyendo las etiquetas en la primera fila de datos.
 +
 +
&lt;bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel legend&gt;
 +
,EU ,US
 +
Oct,4115,1230
 +
Nov,2541, 911
 +
Dic,5410,2433
 +
&lt;/bars&gt;
 +
 +
 +
<bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel legend>
 +
,EU ,US
 +
Oct,4115,1230
 +
Nov,2541, 911
 +
Dic,5410,2433
 +
</bars>
 +
 +
AVISO: Si se utilizan tambien etiquetas para el eje X la primera entrada debe estar vacía.
 +
 +
 +
==Barras horizontales==
 +
 +
Puedes cambiar la orientación de las barras incluyendo el parámetro "horizontal":
 +
 +
&lt;bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel legend horizontal&gt;
 +
,EU ,US
 +
Oct,4115,1230
 +
Nov,2541, 911
 +
Dic,5410,2433
 +
&lt;/bars&gt;
 +
 +
<bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel legend horizontal>
 +
,EU ,US
 +
Oct,4115,1230
 +
Nov,2541, 911
 +
Dic,5410,2433
 +
</bars>
 +
 +
AVISO: al girar la gráfica las etiquetas del eje Y se dibujan en el eje X y viceversa.
 +
 +
==Dibujando una retícula==
 +
 +
Puede ser más sencillo visualizar los valores de una gráfica si dibujamos una retícula bajo la misma. Puedes poner líneas para ambos ejes, pero normalmente queda mejor si solo se incluyen para el eje Y:
 +
 +
&lt;bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel legend horizontal grid=y&gt;
 +
,EU ,US
 +
Oct,4115,1230
 +
Nov,2541, 911
 +
Dic,5410,2433
 +
&lt;/bars&gt;
 +
 +
<bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel legend horizontal grid=y>
 +
,EU ,US
 +
Oct,4115,1230
 +
Nov,2541, 911
 +
Dic,5410,2433
</bars>
</bars>

Revisión de 15:21 3 nov 2011

Tabla de contenidos

Gráfica de barras básica

Para dibujar gráficas de barras inserta tus datos entre <bars> and </bars> (también puedes utilizar <lines> y <pie> para otros tipos de gráficas).

Si incluyes este código:

 <bars title="Visitas Wiki">
 5345
 3452
 7843
 </bars>

Se dibujará:


AVISO: Por defecto el eje Y se autoescala entre sus valores máximos y mínimos. Esa es la razón por la que la segunda barra no se muestra.


Configurando el eje Y

Si deseas configurar manualmente los valores máximo y mínimo del eje Y (no es obligatorio especificar ambos límites):

 <bars title="Visitas Wiki" ymin=0 ymax=8000>
 5345
 3452
 7843
 </bars>


Barras con valores múltiples

Puedes poner más de un valor si separas los datos por una coma. Para mayor claridad debes de asignar un color diferente a cada valor:

 <bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00>
 4115,1230
 2541,911
 5410,2433
 </bars>

Si prefieres que los distintos valores estén apilados y no uno al lado del otro debes incluir el parámetro "stacked":

 <bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked>
 4115,1230
 2541,911
 5410,2433
 </bars>


Incluir etiquetas en el eje Y

Para tener un idea más precisa de los valores en cada barra es conveniente incluir etiquetas en el eje Y. En este ejemplo que incluyen 4 valores:

 <bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel>
 Oct,4115,1230
 Nov,2541,911
 Dic,5410,2433
 </bars>


Incluir etiquetas en el eje X

Si se incluye el parámetro xlabel la primera columna de los datos se toma como etiqueta para los mismos:

 <bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel>
 Oct,4115,1230
 Nov,2541,911
 Dic,5410,2433
 </bars>


Incluir una leyenda

Cuando la gráfica tiene más de un valor por barra es necesario añadir una leyenda explicativa. Esto se consigue utilizando el parámetro "legend" e incluyendo las etiquetas en la primera fila de datos.

 <bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel legend>
    ,EU  ,US
 Oct,4115,1230
 Nov,2541, 911
 Dic,5410,2433
 </bars>


AVISO: Si se utilizan tambien etiquetas para el eje X la primera entrada debe estar vacía.


Barras horizontales

Puedes cambiar la orientación de las barras incluyendo el parámetro "horizontal":

 <bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel legend horizontal>
    ,EU  ,US
 Oct,4115,1230
 Nov,2541, 911
 Dic,5410,2433
 </bars>

AVISO: al girar la gráfica las etiquetas del eje Y se dibujan en el eje X y viceversa.

Dibujando una retícula

Puede ser más sencillo visualizar los valores de una gráfica si dibujamos una retícula bajo la misma. Puedes poner líneas para ambos ejes, pero normalmente queda mejor si solo se incluyen para el eje Y:

 <bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel legend horizontal grid=y>
    ,EU  ,US
 Oct,4115,1230
 Nov,2541, 911
 Dic,5410,2433
 </bars>

   
 
ASIGNATURAS
MatemáticasFísicaQuímicaBiologíaDibujoHistoriaLengua y LiteraturaHistoria del ArteFilosofía
Creative Commons License
Los contenidos de Wikillerato están disponibles bajo una licencia de Creative Commons.
Pueden utilizarse y redistribuirse libremente siempre que se reconozca su procedencia.