Traducir el blog

Convierte imágenes en gráficos olímpicos

Posted on julio 03, 2024 by Excel Pedro Wave

🔝To translate this blog post to your language, select it in the top left Google box.


Olimpiadas de París 2024

Para conmemorar los Juegos de la XXXIII Olimpiada, que se celebrarán del 26 de julio al 11 de agosto de 2024 en París, estoy aprendiendo a dibujar la Torre Eiffel en un gráfico XY de dispersión en Excel.

Lo primero que hago es insertar la imagen SVG (Scalable Vector Graphics). A continuación convierto esa imagen en formas (shapes).

Luego he creado tres gráficos de dispersión:

  • El primero de coordenadas (el peor)
  • El segundo de rectángulos (no mejora)
  • El tercero de puntos de cada forma (el más parecido al original).

Intentaré hacer uno mejor antes de que empiecen las Olimpiadas...

En la imagen animada de la derecha muestro los tres gráficos de dispersión, junto con la imagen original de la Torre Eiffel.

La imagen original la he descargado de esta página:

Es de dominio público, respetando la siguiente licencia:

De todos modos, ninguno de los archivos que adjunto contienen dicha imagen de la Torre Eiffel.

Este artículo lo publicaré por entregas, para facilitar el aprendizaje.


Primera entrega: Insertar imagen SVG y convertirla en formas

El archivo adjunto permite insertar una imagen SVG y convertirla en formas (shapes).

INSTRUCCIONES: Ejecuta la macro para "Insertar imagen SVG" haciendo clic en el dibujo con el lápiz.

Se abre una ventana para seleccionar el archivo SVG previamente descargado de WIKIMEDIA COMMONS, llamado: Detailed_Eiffel_Tower_1.svg

Presionando la tecla Abrir, se carga la imagen SVG de la Torre Eiffel en la hoja 'SVG', con la llamada al método Application.GetOpenFilename

Si había alguna imagen anterior, la borra.

Inserta la imagen seleccionada con el método Shapes.AddPicture, ya que Pictures.Insert vincula la imagen con el archivo original, y el primer método tiene opciones para crear una copia independiente de la imagen.

Convertir a forma la imagen SVG es fácil con el menú contextual, pero no es posible usar la grabadora de macros, ¡pues no guarda nada!

El método alternativo es llamar al siguiente comando con el que se consigue Convertir a forma:

Application.CommandBars.ExecuteMso ("SVGEdit")

La macro que inserta el archivo SVG y lo convierte en formas es:

El resultado es la imagen de la Torre Eiffel como un grupo de formas (shapes) que, al seleccionar la imagen y seleccionar en la cinta de opciones: Formato de forma > Panel de selección, se muestran agrupadas con el nombre SVG.


Descarga de la primera entrega

Descarga la primera entrega de este conversor de imágenes SVG en gráficos, compatible con las versiones de escritorio desde Excel 2019 hasta Excel para Microsoft 365.

Las macros del archivo descargado están bloqueadas por defecto. Para desbloquear las macros debes modificar las Propiedades del archivo siguiendo estas instrucciones:

Las macros de Internet están bloqueadas de forma predeterminada en Office - Deploy Office | Microsoft Learn

Abre el archivo y presiona el botón: Habilitar edición cuando aparezca el aviso de VISTA PROTEGIDA.

Presiona el botón: Habilitar contenido cuando aparezca la ADVERTENCIA DE SEGURIDAD Las macros se han deshabilitado o se deshabilitó parte del contenido activo.


Segunda entrega: Gráfico de coordenadas XY

Si ya tenemos la imagen SVG convertida en formas (shapes), lo siguiente es crear un gráfico con la información de las formas.

INSTRUCCIONES: Haz clic en el icono del gráfico de puntos del MENU: 2) Crear gráfico 1

Este paso ejecuta la macro: CrearGráfico1, con la que guarda los datos de las formas (Left y Top) en la tabla TablaFormas1 de la hoja 'Datos', siendo las columnas X e Y el origen de datos del gráfico XY de dispersión, en el que se representan los puntos de las coordenadas de las formas (shapes).

La macro realiza las siguientes acciones:

1) Borra los datos de la tabla de la hoja 'Datos'.

2) Cuenta las formas vectoriales de la imagen SVG.

3) Redimensiona la tabla con la cuenta anterior como número de filas.

4) Redimensiona un array al número de filas de la tabla.

5) Recorre todas las formas de la imagen SVG y guarda los datos vectoriales Left y Top en el array, además del Name, Width, Height y color RGB.

6) Copia el array en la tabla en una única instrucción, lo que mejora tremendamente el rendimiento al guardar los datos en la tabla. Sería muy lento si se guardaran los datos en la tabla mientras se recorren cada una de las formas.

7) Cambia la escala del eje X del gráfico de dispersión.

La macro que crea los datos origen del gráfico es:

Estos son los datos vectoriales de la hoja 'Datos':

Cada forma tiene un nombre, unas coordenadas X e Y, un ancho y un alto y su color, por lo que las formas son rectángulos, pero eso lo veremos en la tercera entrega...

El origen de datos del gráfico XY de dispersión de la hoja 'SVG' es el rango de datos: =Datos!$B$1:$C$4474, por lo que el gráfico incluye 4.473 puntos XY.

El gráfico XY de dispersión con la imagen de la Torre Eiffel se muestra a la derecha, como un conjunto de puntos de las coordenadas XY de las formas de la imagen de la izquierda, convertidas a partir de la imagen SVG original.

Resulta una imagen muy pobre de la Torre Eiffel, lo que habrá que mejorar en las siguientes entregas, pero ya hemos conseguido crear un gráfico XY de dispersión, con las coordenadas vectoriales de las formas de la imagen SVG original.

Inserta una imagen SVG diferente y verifica el gráfico resultante...


Descarga de la segunda entrega

Descarga la segunda entrega de este conversor de imágenes SVG en gráficos, compatible con las versiones de escritorio desde Excel 2019 hasta Excel para Microsoft 365.


Tercera entrega: Gráfico con rectángulos

Las formas (shapes) de la imagen SVG proporcionan información de su posición y su tamaño, con lo que podemos crear los rectángulos de las formas.

INSTRUCCIONES: Haz clic en el icono del gráfico de puntos del MENU: 3) Crear gráfico 2

Este paso ejecuta la macro: CrearGráfico2, con la que guarda los datos de las formas (Left y Top) en la tabla TablaFormas1 de la hoja 'Datos'. Las columnas X e Y son el origen de datos del gráfico XY de dispersión, en el que se representan los rectángulos de cada forma (shape) mediante 5 puntos unidos por líneas rectas. Para separar un rectángulo del siguiente se añade un punto sin datos.

La macro que crea los datos origen del gráfico es:

El gráfico XY de dispersión con la imagen de la Torre Eiffel se muestra a la derecha, como un conjunto de rectángulos de las formas de la imagen SVG de la izquierda.

Resulta una imagen curiosa de la Torre Eiffel hecha con rectángulos, pero sigue sin parecerse al original.


Descarga de la tercera entrega

Descarga la tercera entrega de este conversor de imágenes SVG en gráficos, compatible con las versiones de escritorio desde Excel 2019 hasta Excel para Microsoft 365.


Cuarta entrega: Gráfico con los puntos de las formas

El gráfico más parecido a la imagen SVG original se consigue con los puntos de los nodos de las formas (shapes).

INSTRUCCIONES: Haz clic en el icono del gráfico de puntos del MENU: 4) Crear gráfico 3

Este paso ejecuta la macro: CrearGráfico3, con la que guarda los puntos XY de los nodos de las formas en la tabla TablaFormas1 de la hoja 'Datos'. Las columnas X e Y son el origen de datos del gráfico XY de dispersión, en el que se representan las formas (shapes) mediante sus puntos unidos por líneas suavizadas. Para separar una forma de la siguiente se añade un punto sin datos.

La macro que crea los datos origen del gráfico es:

El gráfico XY de dispersión con la imagen de la Torre Eiffel se muestra a la derecha, con las mismas formas creadas a partir de la imagen SVG de la izquierda.

Este gráfico es el más parecido a la imagen SVG de la Torre Eiffel que he conseguido, aunque tarda en generarse unos 32 segundos en mi PC, cuando los dos gráficos anteriores tardaban menos de medio segundo, y eso que he usado matrices para cargar el origen de datos del gráfico XY de dispersión, en lugar de escribir los 161.845 puntos uno a uno en la tabla de puntos XY, lo que llevaría varios minutos.

La técnica que he empleado está descrita aquí:


Si sabes cómo crear un gráfico más realista, ¡sería interesante que lo compartieras con nosotros!

En esta cuarta entrega he añadido una macro para que se vea completamente la Torre Eiffel haciendo zoom automático al rango del gráfico.


Descarga de la cuarta entrega

Descarga la cuarta entrega de este conversor de imágenes SVG en gráficos, compatible con las versiones de escritorio desde Excel 2019 hasta Excel para Microsoft 365.


Vídeo con los gráficos de la Torre Eiffel

En este vídeo explico cómo convertir imágenes en formato SVG en gráficos de Excel, sobre todo para quienes no tengan las versiones compatibles de Excel necesarias para usar las plantillas de las 4 descargas anteriores.

En el próximo artículo verás este último gráfico ¡¡¡animado!!!, con la construcción de la Torre Eiffel, los aros olímpicos y la antorcha controlando la animación.

Continuará...

2 Response to "Convierte imágenes en gráficos olímpicos"

.
gravatar
audeser Says....

uhmmm! por un apuro, hace 2 años desarrollé un lector de SVG (por lo que recuerdo, en algo me ayudé de una LLM). También depende de la estructura del SVG: mi implementación consistía en leer el SVG como txt, buscar cada "path", leer la coordenada inicial y luego ir recalculando la próxima coordenada, incluso apañaba los acuerdos con splines. Ni fruta idea de dónde lo he guardado... como siempre.

.
gravatar
Excel Pedro Wave Says....

Enrique de Audeser, lo tuyo es de traca. ¿Cómo puedes leer un SVG como txt y no guardar esa proeza?
Como ves, yo me valgo de la conversión de SVG a forma que viene implementada en las nuevas versiones de Excel, aunque estoy pensando en hacer una versión compatible con todas las versiones de Excel...

Leave A Reply

Indícame las erratas que encuentres y qué es lo que te gustaría ver en los próximos artículos.

Mi lista de blogs