Cree visualizaciones de datos utilizando tablas, estadísticas de resumen (también conocidas como métricas) y gráficos. Este tipo de visualizaciones son útiles para mostrar estadísticas y tendencias clave en sitios y páginas. Los propietarios del sitio y los miembros del grupo de edición pueden crear visualizaciones de datos utilizando datasets privados y públicos. Solo las personas con quienes se comparten los datos pueden ver una tabla, un gráfico o una estadística al iniciar sesión en un sitio o página.
Crear una tabla
Utilice la tarjeta Texto para organizar la información en una tabla.
Sugerencia:
Para crear una tabla utilizando HTML, seleccione </> Editar en HTML en la tarjeta Texto.
Para crear una tabla, siga estos pasos:
- Edite un diseño de página o sitio.
- En el panel Personalizar, seleccione Diseño.
- Arrastre una tarjeta de Texto sobre una fila existente.
- Seleccione la opción de tabla.
- Seleccione el número de celdas que desea por fila y columna y haga clic para insertar la tabla.
- Para agregar o eliminar filas o columnas, seleccione una celda y elija los botones para insertar o eliminar filas o columnas. Haga clic en el botón de eliminación para eliminar la tabla por completo.
Sugerencia:
Para agregar un encabezado, seleccione la fila superior de la tabla y el botón Activar encabezado de tabla. Gracias al encabezado, las personas que utilizan tecnologías de asistencia pueden navegar por el contenido de la tabla con mayor facilidad.
- Haga clic en Guardar diseño.
Mostrar una métrica de resumen
Utilice la tarjeta Estadística de resumen para mostrar indicadores clave de rendimiento y más. Puede configurar una tarjeta para utilizar un valor dinámico o estático. Los valores dinámicos se generan a partir de una consulta de dataset y se actualizan automáticamente a medida que se actualiza el dataset. Los valores estáticos se introducen y actualizan manualmente. Solamente aquellas personas con quienes se haya compartido la estadística de resumen podrán visualizarla.
Para mostrar una métrica de resumen, siga estos pasos:
- Edite un diseño de página o sitio.
- En el panel Personalizar, seleccione Diseño.
- Arrastre una tarjeta de Estadística de resumen a una fila existente.
- En Tipo, seleccione Dinámico o Estático.
- Para las tarjetas dinámicas, elija Seleccionar contenido, seleccione un dataset, elija Agregar, seleccione Capa/tabla y, en Atributo, elija un campo del dataset.
- En Agregación, elija el tipo de operación que desea realizar en el campo seleccionado tal como se indica a continuación:
- En los campos de texto y fecha, elija recuento, mínimo o máximo.
- En los campos numéricos, elija recuento, suma, mínimo, máximo, media, desviación estándar o varianza.
- Si desea agregar un filtro adicional, active los Filtros de atributo y seleccione un atributo, un tipo de filtro y los parámetros, que variarán según el tipo de campo. Para eliminar un filtro, seleccione el botón Más acciones
. - Para las tarjetas estáticas, introduzca un valor para Valor de visualización.
- Active Formato si es preciso, introduzca las unidades para mostrar y elija su ubicación.
- Para obtener estadísticas de resumen dinámicas que dependan de servicios más grandes o más lentos, configure un período de Tiempo de espera del servidor en Configuración avanzada que permita un mayor tiempo de respuesta, si es necesario.
- En Detalles, proporcione texto para Título, Subtítulo y Texto final, si es necesario. Para proporcionar un vínculo al dataset de la estadística, active Mostrar vínculo de origen (solo dinámico). En el sitio en vivo, este vínculo le dirigirá a la página de detalles del elemento como la página de vista previa.
Sugerencia:
Si muestra el texto final, asegúrese de que su color de texto contraste con el color de fondo de la fila. - En Apariencia, seleccione el tipo de alineación y el color de texto de la estadística.
- En Uso compartido, puede habilitar el uso compartido para que los usuarios puedan copiar y compartir un vínculo directo a esta tarjeta en esta página. Con el uso compartido habilitado, puede configurar el botón Compartir para que se muestre solamente cuando pase el cursor o para que esté visible siempre.
- Haga clic en Guardar diseño.
Mostrar un gráfico de líneas, barras, circular o de dispersión
Utilice la tarjeta Gráfico para crear y mostrar una gran variedad de tipos de gráficos. Utilice un Gráfico de barras para resumir y comparar los datos de categorías. Utilice un Gráfico de líneas para visualizar los cambios en un rango continuo, como el tiempo o la distancia. Utilice un Gráfico circular para ilustrar cómo las partes individuales se relacionan con un conjunto completo, cuando solo hay unas pocas categorías en los datos. Utilice un Gráfico de dispersión para mostrar la relación entre dos variables numéricas; muestre una variable en el eje x y la otra variable en el eje y.
Para mostrar uno de estos gráficos, siga estos pasos:
- Edite un diseño de página o sitio.
- En el panel Personalizar, seleccione Diseño.
- Arrastre una tarjeta de Gráfico sobre una fila existente.
- Seleccione un valor para Tipo de gráfico (Gráfico de barras está seleccionado de forma predeterminada).
- Seleccione Buscar un elemento.
- Seleccione un elemento de los servicios de datos disponibles y seleccione una capa o tabla, si es necesario.
- Haga clic en Guardar.
- En Elegir atributo de categoría, seleccione el elemento gráfico principal de sus datos.
En los gráficos se pueden utilizar campos numéricos y de cadena de caracteres. De forma predeterminada, cuando seleccione un atributo de categoría, el gráfico resultante será un recuento de este atributo.
- Si lo desea, en Elegir valor de atributo, seleccione un campo numérico para usarlo como métrica de valor para el atributo de categoría.
La operación estadística predeterminada de este campo es la Suma. Es posible cambiar la operación utilizando el menú desplegable situado debajo de Elegir valor de atributo. El atributo de valor admite Mínimo, Máximo, Suma, Media y Recuento. Si selecciona Recuento, el atributo valor queda deseleccionado (ya que no es necesario un campo adicional para recontar el atributo de categoría).
En los gráficos se pueden utilizar campos numéricos y de cadena de caracteres. De forma predeterminada, cuando seleccione un atributo de categoría, el gráfico resultante será un recuento de este atributo.
- Abra el menú Opciones para personalizar la visualización del gráfico con la siguiente configuración:
- Ordenar: elija cómo se muestran los datos de atributos. Seleccione un atributo y haga clic en el botón para ordenar ubicado junto al atributo para visualizar los datos en orden ascendente o descendente.
- Altura (px): establezca un valor de altura (píxeles) para el gráfico.
- Título de gráfico: indique un título para el gráfico. Si desea mostrar un título, proporcione un nombre y elija una alineación.
- Color del gráfico principal: introduzca un código de color o utilice el selector de color para elegir un color.
- Gráfico de barras: introduzca valores de Etiqueta de categoría y Etiqueta de valor.
- Gráfico de líneas: introduzca un valor de Etiqueta de categoría para cada punto y un valor de Etiqueta de valor para la métrica (que se muestra en la información sobre herramientas).
- Gráfico circular: introduzca un valor de Etiqueta de categoría para cada porción del gráfico y un valor de Etiqueta de valor para la métrica (que se muestra en la información sobre herramientas).
- Gráficos de dispersión: introduzca los valores de Etiqueta del eje X y Etiqueta del eje Y que se mostrarán en el gráfico.
- Establezca un Tiempo de espera de conexión del servidor (segundos) mayor (para servicios amplios) para que el servicio tenga más tiempo para responder.
- Haga clic en Guardar diseño.
Mostrar un gráfico JSON
Use la tarjeta de Gráfico y cree un gráfico personalizado con JSON utilizando una especificación de gráfico concreta.
Para mostrar un gráfico JSON, siga estos pasos:
- Edite un diseño de página o sitio.
- En el panel Personalizar, seleccione Diseño.
- Arrastre una tarjeta de Gráfico sobre una fila existente.
- Seleccione el gráfico JSON.
- Introduzca su JSON en el campo Definición de gráfico JSON.
- Si lo desea, en la sección Opciones, habilite o deshabilite y personalice la configuración del Título del gráfico y la Altura (en píxeles).
- Establezca un Tiempo de espera de conexión del servidor (segundos) mayor (para servicios amplios) para que el servicio tenga más tiempo para responder.
- Haga clic en Guardar diseño.
Datasets
El conjunto de datasets especifica una URL de servicio de entidades de ArcGIS y parámetros de consulta. Consulte la documentación de la API REST para obtener más información acerca de los parámetros de consulta. A continuación se muestra un ejemplo.
{ "datasets": [ { "url": "SampleArcGISFeatureService_URL", "name" : "Number_of_SUM",
"query": { "groupByFieldsForStatistics": "Zip", "outStatistics": [{
"statisticType": "sum", "onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM" }] } } ]
}
Serie
El conjunto de series permite especificar las asociaciones entre campos en la respuesta de servicio y los aspectos visuales del gráfico (ejes x,y, color y tamaño de gráficos de dispersión, y radio de gráficos circulares). A continuación se muestra un ejemplo.
{ "series": [ { "source": "Number_of_SUM", "category": { "field": "Type", "label": "Facility
Use" }, "value": { "field":"Number_of_SUM","label":"Total Students" }} ] }
Invalidaciones
La propiedad de excepciones permite especificar excepciones visuales, como el color o el posicionamiento, para todo el gráfico. A continuación se muestra un ejemplo.
"overrides": {
"legend": {
"enabled": true
},
"backgroundColor": "#E6E6FA",
"backgroundAlpha": 1
}
}
Especificaciones
La propiedad de especificaciones permite introducir un esquema Cedar completo para obtener un gráfico puramente personalizado. Vea ejemplos de especificaciones de gráficos existentes.
Ejemplo de gráfico de barras
{
"type": "bar",
"datasets": [
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Number_of_SUM",
"query": {
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [
{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}
]
}
}
],
"series": [
{
"category": {"field": "Type", "label": "Type"},
"value": {"field": "Number_of_SUM", "label": "Number of Students"},
"source": "Number_of_SUM"
}
]
}
Ejemplo de gráfico de barras horizontales
{
"type": "bar-horizontal",
"datasets": [
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Number_of_SUM",
"query": {
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [
{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}
]
}
}
],
"series": [
{
"category": {"field": "Type", "label": "Type"},
"value": {"field": "Number_of_SUM", "label": "Number of Students"},
"source": "Number_of_SUM"
}
],
"overrides": {
"categoryAxis": {
"labelRotation": -45
}
}
}
Ejemplo de gráfico de barras agrupadas
Nota:
Cada serie se corresponderá con un grupo.{
"type": "bar",
"datasets": [
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Jordan",
"query": {
"where": "City='Jordan'",
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}]
},
"join": "Type"
},
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Dewitt",
"query": {
"where": "City='Dewitt'",
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}]
},
"join": "Type"
},
{
"url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"name": "Fayetteville",
"query": {
"where": "City='Fayetteville'",
"orderByFields": "Number_of_SUM DESC",
"groupByFieldsForStatistics": "Type",
"outStatistics": [{
"statisticType": "sum",
"onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM"
}]
},
"join": "Type"
}
],
"series": [
{
"category": {"field": "Type", "label": "Type"},
"value": { "field": "Number_of_SUM", "label": "Jordan Students"},
"source": "Jordan"
},
{
"category": {"field": "Type", "label": "Type"},
"value": { "field": "Number_of_SUM", "label": "Dewitt Students"},
"source": "Dewitt"
},
{
"category": {"field": "Type", "label": "Type"},
"value": { "field": "Number_of_SUM", "label": "Fayetteville Students"},
"source": "Fayetteville"
}
]
}Ejemplo de gráfico de dispersión
{
"type": "scatter",
"datasets": [ {
"url": "https://services1.arcgis.com/bqfNVPUK3HOnCFmA/arcgis/rest/services/Demographics_(Median_Household_Income)/FeatureServer/0"
}],
"series": [
{
"category": {"field": "TotalPop2015", "label": "Population"},
"value": {"field": "MedianHHIncome2015", "label": "Median Median Household Income"}
}
]
}
Ejemplo de gráfico de dispersión burbujas
{
"type": "scatter",
"datasets": [
{
"url":"https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0"
}
],
"series": [
{
"category": {"field": "Number_of", "label": "Number of Teachers"},
"value": {"field": "F_of_teach", "label": "Fraction of Teachers"},
"size": {"field": "Not_Taught", "label": "Number not Taught"}
}
]
}
Ejemplo de gráfico de línea temporal
Nota:
La categoría debe ser un campo datetime. {
"type": "timeline",
"datasets": [
{
"url": "https://services.arcgis.com/bkrWlSKcjUDFDtgw/arcgis/rest/services/DC_Crashes/FeatureServer/0",
"query": {
"where": "REPORTDATE > '2008-10-01' AND REPORTDATE < '2008-11-01'",
"orderByFields": "REPORTDATE ASC",
"sqlFormat": "standard"
}
}
],
"series": [
{
"category": {
"field": "REPORTDATE",
"label": "Date"
},
"value": {
"field": "MAJORINJURIES",
"label": "Major Injuries"
}
}
]
}
Vínculos relacionados
Para obtener más información, consulte lo siguiente: