Plantilla:Gráfico/doc
Apariencia
Uso[editar]
Crea un objeto JSON de <graph> para visualizar gráficos.
Parámetros[editar]
- 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[editar]
Gráfico lineal[editar]
{{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[editar]
{{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[editar]
{{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[editar]
{{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[editar]
{{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[editar]
{{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[editar]
{{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[editar]
{{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[editar]
{{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[editar]