Bloques de Gráfico

Crea gráficos de barras, líneas o circulares para mostrar los datos de tus visitantes en un formato atractivo.

Última actualización: 23 de agosto de 2024

Usa un Bloque de gráfico para crear visualizaciones de datos en tu sitio. Los gráficos son fabulosos para explicar las relaciones entre las diferentes series de datos de manera convincente. Puedes crear y cambiar el estilo de Gráficos de barras, Gráficos de líneas y Gráficos de torta.

Los bloques de gráficos son una buena alternativa a la inserción de imágenes estáticas de gráficos creados en programas fuera de Squarespace. Los gráficos se redimensionan para garantizar que se vean bien en varios tamaños de pantalla, y puedes actualizar los datos en cualquier momento.

Consejo

En esta guía, se explica cómo agregar gráficos a tu sitio. Para añadir una tabla con columnas y filas, puedes agregar código personalizado. Para obtener más información, visita esta publicación en el Squarespace Forum.

Ten en cuenta que las modificaciones al código personalizado están fuera del alcance de nuestro soporte técnico. Esto significa que no podemos ayudarte a configurar ni resolver problemas de las soluciones basadas en código.

Antes de comenzar

Recomendamos preparar los datos en un archivo .csv en un programa de hojas de cálculo, como Hojas de cálculo de Google o Excel. Verifica que las columnas y filas tengan encabezados para que se traduzcan en encabezados en el bloque.

Añade un Bloque de gráfico

Para añadir un Bloque de gráfico:

  1. Edita una página o publicación, haz clic en Agregar bloque o un punto de inserción y, a continuación, haz clic en Gráfico. Para obtener ayuda, visita Agregar contenido con bloques.
  2. Abre el editor de bloques presionando el ícono del lápiz en el bloque.
  3. Selecciona Gráfico de barras, Gráfico de líneas o Gráfico de tortas. Se abre el editor de gráficos y aparece una vista previa del gráfico con contenido del marcador de posición.
Opciones del Bloque de gráfico en el menú de bloques.
  1. Usa las pestañas Datos o Importar/Exportar para añadir datos.
  2. Utiliza la pestaña Diseño para diseñar el gráfico. Si tu sitio está en la versión 7.0, haz clic en Aplicar para publicar los cambios.

Si necesitas pasos más detallados, visita las secciones que siguen.

Diseños del Bloque de gráfico

Estos son algunos ejemplos de cada diseño del bloque de gráfico. Puedes cambiar el diseño en la pestaña de datos del bloque de gráfico. Cuando selecciones un diseño, verás su vista previa en la página. Tal vez sea necesario que cambies el formato de tus datos para que se adapten mejor al nuevo diseño.

Los gráficos de barras se utilizan, generalmente, para comparar valores o para controlar los cambios a lo largo del tiempo. Este bloque de gráfico de barras muestra las ventas de entradas por ubicación durante tres meses. Cada color de barra representa un año distinto.Ejemplo de un Bloque de gráfico de barras.

Los gráficos de líneas, generalmente, se usan para mostrar los cambios a lo largo del tiempo. Con múltiples líneas, puedes comparar los cambios entre distintos temas. Este Bloque de gráfico de líneas muestra las inscripciones durante seis meses. Cada línea representa a un año distinto.

Ejemplo de un Bloque de gráfico de líneas.

Los gráficos de torta se utilizan, generalmente, para comparar cifras de encuestas, preferencias o porcentajes con los datos representados como "porciones" de la torta. Este Bloque de gráfico de torta muestra las tortas favoritas según los resultados de una encuesta.

Ejemplo de un Bloque de gráfico de torta.

Añadir datos

Después de elegir el tipo de gráfico, puedes utilizar la pestaña Importar/Exportar para importar datos desde un .csv o la pestaña Datos para agregar datos manualmente.

Nota

Puedes agregar hasta 25 filas y 25 columnas. Introduce solo números. El editor convierte todos los signos de dólar (USD) en 0.

Option 1 - Copy data from a .csv

Si tienes una hoja de cálculo de datos, puedes copiarlos y pegarlos desde un archivo .csv con texto plano. Recomendamos este método, especialmente si tienes muchos datos y estás familiarizado con la creación de hojas de cálculo en Excel o en Google Sheets.

Consejo

In your spreadsheet program, use column and row headers to create labels for the chart. You’ll then open the .csv in a plain text editor since the block can’t import cells from a spreadsheet.

  1. Mantén abierto el editor de Bloque de gráfico.
  2. In your spreadsheet program, save your data as a .csv file.
  3. Open the file in a plain text editor like Notepad or TextEdit.
  4. Resalta todo y copia el texto.
  5. En el editor de bloques, haz clic en Importar/Exportar.
  6. Elimina los datos de marcador de posición en el campo Datos del gráfico.
  7. Paste the text you copied from the .csv.
  8. Presiona Actualizar y, a continuación, Confirmar en el mensaje que aparece.
  9. The chart preview will refresh with new data.

Los datos de la pestaña importar/exportar deben lucir aproximadamente así:

Ejemplo de formato de datos importados en el editor de bloques.

Option 2 - Enter or edit data manually

Puedes crear el gráfico desde cero ingresando las filas de a una en el editor de bloques. Usa esta opción si no tienes datos existentes o si el gráfico será relativamente simple. También puedes seguir estos pasos para editar los datos después de importarlos.

  1. En la pestaña Datos del editor de bloques, elimina las filas de marcadores de posición arrastrándolas y soltándolas en la papelera que aparece.
  2. Presiona el icono + cerca de la parte superior derecha para agregar nuevas columnas y encabezados de columnas. Los Bloques de gráfico de torta solo pueden tener dos columnas.
  3. Haz clic en el icono + cerca de la parte inferior izquierda para añadir nuevas filas y nuevos encabezados.
  4. Haz clic en una celda para ingresar datos nuevos o reemplazar datos de marcadores de posición. Completa todas las celdas. A medida que ingreses los datos, se actualizará la vista previa del gráfico.

Consejo

Navigate between cells and rows with the Tab key, just like in any spreadsheet program.

  1. Marca Cambiar los ejes X e Y para modificar la manera en la que se analizan los datos. No recomendamos hacerlo para los Bloques de gráfico de torta.

Consejos de formato

El formato que puedes darles a tus datos podría depender del tipo de Bloque de gráfico que uses. Para informarte mejor sobre el formato de cada gráfico, sigue estos consejos.

Cada fila de los Bloques del gráfico de barra representa una barra o tema en el eje X del gráfico. Por lo general, esto se reserva para los principales temas que estás comparando.

En los Bloques de gráfico de barras, cada fila representa un tema en el eje X.

Cada columna nueva representa la medición que estás comparando entre los temas. Cada columna nueva crea una sección vertical nueva en el gráfico.

Si deseas hacer una comparación simple entre los temas, añade una columna para crear una barra para cada uno. Si quieres entablar varias comparaciones entre los temas, agrega varias columnas.

Con múltiples columnas, los Bloques de gráfico de barra pueden entablar varias comparaciones entre los temas.

Otros consejos

  • No es posible crear un gráfico de barras apiladas en este momento.
  • No se puede cambiar la posición del título, la leyenda y el epígrafe dentro del bloque.
  • Los números del eje Y podrían redondearse automáticamente. No es posible editarlo.
  • Para cambiar el tamaño de los Bloques de gráfico de barras, consulta Cambiar el tamaño de los bloques.
  • En tu sitio activo, los consejos de las herramientas aparecen cuando posicionas el cursor para mostrar los detalles del punto de datos.

El eje X (creado por las filas) de los Bloques de gráfico de líneas se usa, generalmente, para los intervalos. Cada fila de tus datos crea un intervalo nuevo en el gráfico.

Los bloques de gráfico de líneas usan el eje X para los intervalos.

El eje Y (creado por las columnas), por lo general, se reserva para el valor que estás controlando en el transcurso del tiempo (por ejemplo, ventas, facturación o población). Cada columna de tus datos crea una línea nueva en el gráfico.

Si estás comparando varias líneas, añade varias columnas.

Con múltiples columnas, los Bloques de gráfico de línea pueden entablar varias comparaciones entre los temas.

Otros consejos

  • No es posible añadir incertidumbres ni proyecciones (líneas grises o de puntos que anticipan las tendencias).
  • No se puede cambiar la posición del título, la leyenda y el epígrafe dentro del bloque.
  • Los números del eje Y podrían redondearse automáticamente. No es posible editarlo.
  • Para cambiar el tamaño de los Bloques de gráfico de líneas, consulta Cambiar el tamaño de los bloques.
  • En tu sitio activo, los consejos de las herramientas aparecen cuando posicionas el cursor para mostrar los detalles del punto de datos.

Los Bloques de gráfico de torta han sido diseñados para comparar hasta cinco elementos. Cada paleta de colores incluye cinco colores antes de empezar a repetirlos.

Los datos solo deben contener dos columnas: la primera columna, que tiene un rótulo, y la segunda columna, que incluye el valor numérico que representa dicho rótulo. En el ejemplo que sigue, la primera columna abarca la lista de tortas y la segunda columna comprende la cantidad de personas a quienes les gusta esa torta.

La pestaña Datos de un Bloque de gráfico de torta.

Otros consejos

  • No recomendamos cambiar los ejes X e Y.
  • No se puede cambiar la posición del título, la leyenda y el epígrafe dentro del bloque.
  • La etiqueta de cada elemento está diseñada para un máximo de dos o tres palabras. Si deseas agregar nombres más largos o información adicional a cada elemento, usa un Bloque de texto debajo del gráfico para explicar las etiquetas con más detalle.
  • Cualquier otro texto o caracteres que se agreguen a los valores numéricos en la segunda columna, como símbolos de porcentaje, no aparecerán en tu sitio activo.
  • Para cambiar el tamaño de los Bloques de gráfico de torta, consulta Cambiar el tamaño de los bloques.
  • En tu sitio activo, los detalles de cada "porción" del gráfico solo aparecen al desplazar el mouse.

Diseña el gráfico

En la pestaña Diseño, puedes agregar texto personalizado, mostrar una leyenda y elegir una paleta de colores. Para obtener más información acerca de estas opciones de diseño, revisa esta tabla:

Opción del diseño Usa estas opciones con los siguientes fines
Título del gráfico Agrega un título al gráfico. Recomendamos que sea breve, como "Venta de entradas en 2019".

Leyenda

Añade una leyenda que aparecerá debajo del gráfico. Esta leyenda es útil para citar las fuentes, fechas, explicaciones detalladas o cláusulas de exención de responsabilidad.
Mostrar leyenda Mostrar los rótulos de los datos en una leyenda.

Paleta de colores

Selecciona una paleta de colores para el gráfico de una de nuestras numerosas opciones preconfiguradas, que te permitirán crear un aspecto uniforme. Cada opción tiene cinco colores. No es posible personalizar los colores específicos para los puntos de datos ni los ejes del gráfico en este momento.

Modifica el estilo del texto

Usa Estilos del sitio para cambiar la fuente y el color del texto del bloque. El estilo del texto depende de en qué versión de Squarespace está tu sitio.

En todos los gráficos:

  • Fuente del título: sigue a Encabezados
  • Color del título: sigue Encabezado (Grande)
  • Tamaño del título: sigue Encabezado 2
  • Fuente de leyenda: sigue Párrafos
  • Color de leyenda: sigue Párrafo (Medio)
  • Tamaño de la leyenda: sigue Párrafo 2
  • Fuente de leyenda: sigue Párrafos y siempre está en cursiva
  • Color de leyenda: sigue Párrafo (Medio)
  • Tamaño de leyenda: sigue Párrafo 2

Todo el texto del gráfico sigue los ajustes de Encabezado y Texto. Las opciones exactas varían según la plantilla.

Exportar los datos del gráfico

Para hacer una copia de seguridad de tus datos en un archivo .csv fuera de Squarespace:

  1. Abre el panel Páginas.
  2. Presiona Editar en la página o en la publicación donde aparece el Bloque de gráfico.
  3. Haz doble clic en el bloque de gráficos.
  4. Haz clic en Importar/Exportar.
  5. Copia los datos en el campo Datos del gráfico.
  6. Paste the data into a plain text editor.
  7. Save the file as a .csv. This converts the file into a spreadsheet.
Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.