Insertar gráficos, tablas y métricas—ArcGIS Hub

Cree visualizaciones de datos utilizando gráficos, tablas y estadísticas de resumen. 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 podrán ver 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:

Abra un sitio o página en modo de edición.
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 insertar o eliminar filas o columnas. Seleccione 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.
Seleccione Guardar el 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:

Abra un sitio o página en modo de edición.
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.
En Tarjetas dinámicas, elija Seleccionar contenido, un dataset y 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.
- 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.
Para agregar un filtro adicional (opcional), active Filtros de atributo; seleccione un atributo, un tipo de filtro y parámetros (variará en función del tipo de campo). Para eliminar un filtro, seleccione el botón Más acciones .
En Tarjetas estadísticas, introduzca un valor de visualización.
Active Formato si es preciso; introduzca las unidades para mostrar y elegir su colocación.
En Configuración avanzada (solo dinámica), configure un periodo de tiempo de espera de servidor si es necesario (para permitir a los servicios más grandes o lentos más tiempo para responder).
En Detalles, introduzca un título, subtítulo y texto de 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 del texto de la estadística.
En Uso compartido, puede habilitar el uso compartido (los usuarios pueden 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.
Seleccione Guardar.

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 Gráfico de barras para resumir y comparar los datos categóricos. Utilice Gráfico de líneas para visualizar los cambios en un rango continuo, como el tiempo o la distancia. Utilice 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 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:

Abra un sitio o página en modo de edición.
En el panel Personalizar, seleccione Diseño.
Arrastre una tarjeta de Gráfico sobre una fila existente.
Seleccione un Tipo de gráfico (Gráfico de barras se selecciona 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).
Seleccione 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.
Opcionalmente, en Elegir valor de atributo seleccione un campo numérico que se utilice como métrica de valor para su 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 esta configuración:
- Ordenar le permite seleccionar cómo se visualizarán los datos de atributos. Seleccione un atributo y haga clic en el botón de ordenar junto al atributo para visualizar los datos en orden ascendente o descendente.
- Altura (px) le permite establecer un valor de altura (píxeles) para el gráfico.
- Título de gráfico le permite mostrar un título para su gráfico. Si desea mostrar un título, introduzca un nombre y elija una alineación.
- En Color del gráfico principal, introduzca un código de color o utilice el selector de color para elegir un color.
- En Gráfico de barras, introduzca una Etiqueta de categoría y una Etiqueta de valor.
- En Gráfico de líneas, introduzca una Etiqueta de categoría para cada punto y una Etiqueta de valor para la métrica (que se muestra en la información emergente).
- En Gráfico circular, introduzca una Etiqueta de categoría para cada porción del gráfico y una Etiqueta de valor para la métrica (que se muestra en la información emergente).
- Para los Gráficos de dispersión, introduzca una Etiqueta del eje X y una 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.
Seleccione Guardar el 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:

Abra un sitio o página en modo de edición.
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.
De forma opcional, en la sección Opciones puede habilitar o deshabilitar y personalizar 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.
Seleccione Guardar el 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.

{ "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).

{ "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.

"overrides": {
      "legend": {
          "enabled": true
      },
      "backgroundColor": "#E6E6FA",
      "backgroundAlpha": 1
  }
}

Especificaciones

La propiedad de especificaciones permite introducir una especificación Cedar completa 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"
      }
    }
  ]
}

¿Algún comentario sobre este tema?

Crear una tabla

Sugerencia:

Sugerencia:

Mostrar una métrica de resumen

Sugerencia:

Mostrar un gráfico de líneas, barras, circular o de dispersión

Mostrar un gráfico JSON

Datasets

Serie

Invalidaciones

Especificaciones

Ejemplo de gráfico de barras

Ejemplo de gráfico de barras horizontales

Ejemplo de gráfico de barras agrupadas

Nota:

Ejemplo de gráfico de dispersión

Ejemplo de gráfico de dispersión burbujas

Ejemplo de gráfico de línea temporal

Nota:

En este tema