Skip To Content

Insertar gráficos, tablas y métricas

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 central 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.

Para empezar, inicie sesión en Portal for ArcGIS y haga clic en Sitios en la página Descripción general para ver una lista de sus sitios.

Sugerencia:

También puede editar un sitio al verlo en un navegador. Asegúrese de haber iniciado sesión 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 haga clic en el botón de configuración para cambiar al modo de edición.
  3. Haga clic en la opción de tabla.
  4. Seleccione el número de celdas que desea por fila y columna.
  5. Cuando haya seleccionado 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. Haga clic en el botón de eliminación para eliminar la tabla por completo.

    Sugerencia:

    Para agregar un encabezado, haga clic en la fila superior de la tabla y en 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. Haga clic en Guardar.

Mostrar métricas clave

Utilice la tarjeta Estadística de resumen para mostrar indicadores clave de rendimiento y más. Las estadísticas de resumen se generan a partir de una consulta de dataset y se actualizan automáticamente a medida que se actualiza el dataset. 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 haga clic en el botón de configuración para cambiar al modo de edición.
  3. Haga clic en Agregar datos y elija un dataset. Al editar el sitio, el vínculo de origen debajo de su estadística vinculará a la página de detalles del elemento para la página de vista previa del dataset.
  4. En Campo de estadística, elija un campo del dataset seleccionado.
  5. En Tipo de estadística, elija el tipo de operación que desea realizar en el campo seleccionado.
    • Para campos de texto y fecha, elija entre recuento, mínimo y máximo.
    • Para campos numéricos, elija entre recuento, suma, mínimo, máximo, media, desviación estándar y varianza.
  6. Si lo desea, agregue un filtro a su estadística eligiendo un atributo desde el menú desplegable Seleccionar un atributo.
    1. Seleccione un atributo para usar en su filtro.
    2. Haga clic en Agregar.
    3. Seleccione el cuadro del nuevo atributo para mostrar la entrada del filtro. El cuadro de entrada varía en función del tipo de campo.
    4. Introduzca el filtro deseado.
    5. Haga clic fuera del cuadro de filtro o pulse Intro.
  7. Introduzca un título en el cuadro de texto Título.
  8. Si lo desea, introduzca texto para Texto final para proporcionar un vínculo al dataset de la estadística y modifique el Color de énfasis del texto.

    Sugerencia:
    Si elige mostrar el texto final, asegúrese de que su color de texto contraste con el color de fondo de la fila.

  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.

Personalizar la apariencia de las estadísticas

Puede personalizar la apariencia de las métricas con la tarjeta Estadística de resumen.

  1. Después de configurar la tarjeta Estadísticas de resumen, haga clic en el menú Apariencia debajo de Configuración de estadísticas en el panel lateral.
  2. Si lo desea, escriba un Título para la estadística. Puede utilizar esta opción para definir claramente qué mide su estadística.
  3. Agregue texto al campo Texto final para proporcionar información adicional sobre la estadística, por ejemplo, detalles relevantes relacionados con su origen o configuración.
  4. Al ajustar Color de énfasis, solamente se cambia el color de la métrica. Elija un color que contraste claramente con el color de fondo de la fila.

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"
      }
    }
  ]
}