Plantilla:Gráfico/doc

Uso

Crea un objeto JSON de <graph> para visualizar gráficos.

Parámetros

• width: ancho del gráfico.
• height: altura del gráfico.
• type: tipo de gráfico.: line para gráfico lineal, area para gráfico de áreas, y rect para gráfico de barras (columnas). Puede puede apilar múltiples series utilizando el prefijo stacked, por ejemplo stackedarea.
• interpolate: la interpolación es un método para gráficos lineales y de áreas. Se recomienda usar monotone para una interpolación cúbica monótona —para más información, véase https://github.com/nyurik/vega/wiki/Marks#area —.
• colors: colores de las barras del gráfico, separados por una coma. Estos pueden usarse en formato #rgb/#rrggbb/#aarrggbb o por el nombre CSS. Para #aarrggbb, el componente aa es el canal alfa, por ejemplo FF=100% de opacidad, 80=50% de opacidad/transparencia, etc. (La paleta predeterminada está en category10).
• xAxisTitle y yAxisTitle: etiquetas para los ejes x y y.
• xAxisMin, xAxisMax, yAxisMin, and yAxisMax: valores mínimos y máximos de los ejes x y y.
• xAxisFormat and yAxisFormat: cambia el formato de las etiquetas de los ejes. Los valores admitidos se enumeran en https://github.com/mbostock/d3/wiki/Formatting. Por ejemplo, puede usarse el formato d para suprimir los separadores para los números de año.
• showSymbols: en los gráficos lineales marca con un símbolo (círculo) cada punto de datos.
• xGrid e yGrid: muestra las rejillas o líneas de fondo horizontal y vertical respectivamente.
• x: los valores de x en una lista separada por comas.
• y or y1, y2, …: los valores de y para una o varias series de datos, respectivamente
• legend: título de la leyenda (solo funciona cuando hay varias series de datos)
• y1Title, y2Title, …: define la etiqueta de la respectiva serie de datos en la leyenda
• formatjson: formato del objeto JSON para una mejor legibilidad

Ejemplos

Gráfico lineal

{{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
}}

Gráfico de áreas

{{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
}}

Bar chart

{{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
}}

Gráfico de líneas con más de una serie de datos, utilizando colores

{{Gráfico
|width = 400
|height = 100
|xAxisTitle = X
|yAxisTitle = Y
|legend = Leyenda
|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
}}

Gráfico de áreas con más de una serie de datos en superposiciones

{{Gráfico
|width = 400
|height = 100
|xAxisTitle = X
|yAxisTitle = Y
|legend = Leyenda
|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 = #800000aa, #80ff8000
}}

Gráfico de barras con varias series de datos

{{Gráfico
|width = 400
|height = 100
|xAxisTitle = X
|yAxisTitle = Y
|legend = Leyenda
|type = rect
|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 = #800000aa, #80ff8000
}}

Gráfico de áreas con líneas suavizadas

{{Gráfico
|width = 400
|height = 100
|xAxisTitle = X
|yAxisTitle = Y
|legend = Leyenda
|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
}}

Gráfico de barras con series de datos apilados

{{Gráfico
|width = 400
|height = 100
|xAxisTitle = X
|yAxisTitle = Y
|legend = Leyenda
|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 = Datos A
|y2Title = Datos B
|colors = seagreen, orchid
}}

Gráfico lineal usando porcentajes y mostrando puntos y rejilla

{{Gráfico
|width = 400
|height = 200
|x = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
|yAxisMin = .35
|yAxisMax = .55
|yAxisFormat = %
|showSymbols = 1
|xGrid = 1
|yGrid = 1
|y1 = .39, .43, .38, .38, .40, .48, .54 , .42, .47, .45, .48, .44, .41, .41, .45, .46
}}

Véase también

• Plantilla:Gráfico circular