Volver al principio

Insertar gráficos, tablas y métricas

En este tema

  1. Crear una tabla
  2. Mostrar métricas clave
  3. Gráficos de barras
  4. Gráficos circulares
  5. Gráficos de líneas
  6. Diagramas de dispersión
  7. Gráficos JSON

Cree visualizaciones de datos utilizando gráficos, tablas y estadísticas de resumen. Estos tipos de visualizaciones son útiles para mostrar estadísticas y tendencias clave. Los miembros del equipo del sitio o la iniciativa 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 ArcGIS Hub.

Para empezar, inicie sesión en ArcGIS Hub y seleccione Sitios en la página Descripción general para ver una lista de sus sitios. Si su organización tiene licencia para ArcGIS Hub Premium, puede encontrar sus sitios enumerados en Iniciativas de la página Descripción general.

Sugerencia:

También puede editar un sitio al verlo en un navegador. Asegúrese de haber iniciado sesión en ArcGIS Hub y busque el botón de edición a la izquierda del sitio.

Crear una tabla

Utilice la tarjeta Texto para organizar la información en una tabla.

Sugerencia:

Si desea crear una tabla con HTML, use la vista Código de las opciones de la tarjeta de texto para insertar el código.

  1. Arrastre una tarjeta de Texto sobre una fila existente.
  2. Desplácese sobre la tarjeta y seleccione el botón de configuración para cambiar al modo de edición.
  3. Seleccione la opción de tabla.
  4. Seleccione el número de celdas que desea por fila y columna.
  5. Cuando haya configurado el tamaño de la tabla, haga clic para insertarla. Agregue o elimine filas o columnas haciendo clic dentro de una celda y eligiendo los botones para 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.

  6. Seleccione Guardar.

Mostrar métricas clave

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.

  1. Arrastre una tarjeta de Estadística de resumen a una fila existente.
  2. Desplácese sobre la tarjeta y seleccione el botón de edición. En Tipo, seleccione Dinámico o Estático.
  3. En Tarjetas dinámicas, elija Seleccionar contenido, un dataset y Agregar. Seleccione Capa/tabla y, en Atributo, elija un campo del dataset.
  4. 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.
  5. 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 más acciones.
  6. En Tarjetas estadísticas, introduzca un valor de visualización.
  7. Active Formato si es preciso; introduzca las unidades para mostrar y elegir su colocación.
  8. 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).
  9. 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.

  10. En Apariencia, seleccione el tipo de alineación y el color del texto de la estadística.
  11. 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.
  12. Seleccione Guardar.

Gráficos de barras

Use la tarjeta de Gráfico y cree un gráfico de barras para resumir y comparar los datos categóricos.

  1. Arrastre una tarjeta de Gráfico sobre una fila existente.
  2. Desplácese sobre la tarjeta y haga clic en el botón de configuración para cambiar al modo de edición.
  3. El gráfico de barras se seleccionará de forma predeterminada.
  4. Haga clic en Agregar datos.
  5. Seleccione un elemento de los servicios de datos disponibles.
  6. 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.

  7. 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. Cuando esté seleccionado, la operación estadística predeterminada de este campo es la Suma. Puede modificar la configuración de Operación estadística usando el menú desplegable a la derecha del selector Elegir valor de atributo. El atributo de valor admite Mínimo, Máximo, Suma, Media y Recuento. Si selecciona Recuento, se anula la selección del valor de atributo (ya que no es necesario ningún campo adicional para hacer un recuento del 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.

  8. Haga clic en el menú Opciones para personalizar la visualización del gráfico con esta configuración:
    • La opció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.
    • Defina un valor de altura (en píxeles) para su gráfico en el campo de texto Altura (px).
    • Opte por mostrar un título para el gráfico haciendo clic en el botón de alternancia junto a Título del gráfico. Si se muestra un título, introduzca su nombre en el campo de texto que se proporciona y seleccione una alineación.
    • Defina el Color del gráfico principal introduciendo un código de colores o haciendo clic en el selector de color para seleccionar uno.
    • Introduzca texto en los campos Etiqueta de categoría y Etiqueta de valor.
  9. 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.
  10. Haga clic en Guardar.

Gráficos circulares

Use la tarjeta de Gráfico y cree un gráfico circular para ilustrar cómo cada parte se relaciona con un conjunto completo. Use un gráfico circular cuando solo haya unas pocas categorías en los datos.

  1. Arrastre una tarjeta de Gráfico sobre una fila existente.
  2. Desplácese sobre la tarjeta y haga clic en el botón de configuración para cambiar al modo de edición.
  3. Seleccione el gráfico circular haciendo clic en el botón del gráfico circular.
  4. Haga clic en Agregar datos.
  5. Seleccione un elemento de los servicios de datos disponibles.
  6. 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.

  7. 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. Cuando esté seleccionado, la operación estadística predeterminada de este campo es la Suma. Puede modificar la configuración de Operación estadística haciendo clic en la flecha desplegable que se encuentra a la derecha del selector Elegir valor de atributo. El atributo de valor admite Mínimo, Máximo, Suma, Media y Recuento. Si selecciona Recuento, se anula la selección del valor de atributo (ya que no es necesario ningún campo adicional para hacer un recuento del 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.

  8. Haga clic en el menú Opciones para personalizar la visualización del gráfico con esta configuración:
    • La opció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.
    • Defina un valor de altura (en píxeles) para su gráfico en el campo de texto Altura (px).
    • Opte por mostrar un título para el gráfico haciendo clic en el botón de alternancia junto a Título del gráfico. Si se muestra un título, introduzca su nombre en el campo de texto que se proporciona y seleccione una alineación.
    • Defina el texto de Etiqueta de categoría de la etiqueta de cada porción de la información sobre herramientas y el texto de Etiqueta de valor de la etiqueta de la métrica de la información sobre herramientas.
  9. 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.
  10. Haga clic en Guardar.

Gráficos de líneas

Use la tarjeta de Gráfico y cree un gráfico de líneas para visualizar los cambios en un rango continuo, como el tiempo o la distancia.

  1. Arrastre una tarjeta de Gráfico sobre una fila existente.
  2. Desplácese sobre la tarjeta y haga clic en el botón de configuración para cambiar al modo de edición.
  3. Seleccione el gráfico de líneas haciendo clic en el botón del gráfico de líneas.
  4. Haga clic en Agregar datos.
  5. Seleccione un elemento de los servicios de datos disponibles.
  6. 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.

  7. 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. Cuando esté seleccionado, la operación estadística predeterminada de este campo es la Suma. Puede modificar la configuración de Operación estadística haciendo clic en la flecha desplegable que se encuentra a la derecha del selector Elegir valor de atributo. El atributo de valor admite Mínimo, Máximo, Suma, Media y Recuento. Si selecciona Recuento, se anula la selección del valor de atributo (ya que no es necesario ningún campo adicional para hacer un recuento del 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.

  8. Haga clic en el menú Opciones para personalizar la visualización del gráfico con esta configuración:
    • La opció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.
    • Defina un valor de altura (en píxeles) para su gráfico en el campo de texto Altura (px).
    • Opte por mostrar un título para el gráfico haciendo clic en el botón de alternancia junto a Título del gráfico. Si se muestra un título, introduzca su nombre en el campo de texto que se proporciona y seleccione una alineación.
    • Defina el Color del gráfico principal introduciendo un código de colores o haciendo clic en el selector de color para seleccionar uno.
    • Defina el texto de Etiqueta de categoría de la etiqueta de cada punto de la información sobre herramientas y el texto de Etiqueta de valor de la etiqueta de la métrica de la información sobre herramientas.
  9. 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.
  10. Haga clic en Guardar.

Diagramas de dispersión

Use la tarjeta de Gráfico y cree un gráfico de dispersión, que muestre la relación entre dos variables numéricas. Muestre una variable en el eje x y la otra variable en el eje y.

  1. Arrastre una tarjeta de Gráfico sobre una fila existente.
  2. Desplácese sobre la tarjeta y haga clic en el botón de configuración para cambiar al modo de edición.
  3. Seleccione el gráfico de líneas haciendo clic en el botón del gráfico de dispersión.
  4. Haga clic en Agregar datos.
  5. Seleccione un elemento de los servicios de datos disponibles.
  6. En Elegir atributo del eje X, 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.

  7. Seleccione un atributo para el campo Elegir atributo del eje Y. Seleccione un campo numérico que se utilice como métrica de valor para su 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.

  8. Haga clic en el menú Opciones para personalizar la visualización del gráfico con esta configuración:
    • La opció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.
    • Defina un valor de altura (en píxeles) para su gráfico en el campo de texto Altura (px).
    • Opte por mostrar un título para el gráfico haciendo clic en el botón de alternancia junto a Título del gráfico. Si se muestra un título, introduzca su nombre en el campo de texto que se proporciona y seleccione una alineación.
    • Defina el Color del gráfico principal introduciendo un código de colores o haciendo clic en el selector de color para seleccionar uno.
    • Defina etiquetas para Etiqueta del eje X y Etiqueta del eje Y para mostrarlas en su gráfico.
  9. 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.
  10. Haga clic en Guardar.

Gráficos JSON

Use la tarjeta de Gráfico y cree un gráfico personalizado con JSON utilizando una especificación de gráfico concreta.

  1. Arrastre una tarjeta de Gráfico sobre una fila existente.
  2. Desplácese sobre la tarjeta y haga clic en el botón de configuración para cambiar al modo de edición.
  3. Seleccione la tesela JSON.
  4. Introduzca su JSON en el campo Especificación de gráfico JSON.
  5. 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).
  6. 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.
  7. Haga clic en Guardar.

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?

En este tema
  1. Crear una tabla
  2. Mostrar métricas clave
  3. Gráficos de barras
  4. Gráficos circulares
  5. Gráficos de líneas
  6. Diagramas de dispersión
  7. Gráficos JSON