Formato condicional mediante iconos en Power BI

Share on facebook
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp

Contenidos

Hoy dia Microsoft anunció que ahora admite conjuntos de iconos que se usarán para el formato condicional en Power BI. Esta característica ha estado disponible en Excel, como siempre, y es genial verla disponible ahora en Power BI.

Configurar el formato condicional mediante iconos

Tengo una serie de medidas en mi workbook de Power BI para demostrar los nuevos iconos como se muestra a continuación.

Total Sales = SUM(Sales[ExtendedAmount])
Total Sales Prior Year = CALCULATE([Total Sales], DATEADD(Calendar[Date], -1, YEAR))
Change vs Prior Year = [Total Sales] - [Total Sales Prior Year]
% Change vs Prior Year = DIVIDE([Change vs Prior Year], [Total Sales Prior Year])

La nueva función de icono está disponible en el menú de formato condicional. A continuación tengo una tabla que utiliza algunas de las medidas anteriores. Para agregar un conjunto de iconos de formato condicional:

  1. Encuentre la medida en la sección de valores del elemento visual (una tabla o matriz)
  2. Haga clic en el menú junto a la medida a la que desea aplicar formato condicional.
  3. Seleccionar formato condicional
  4. Seleccionar iconos

conditional-formatting-6345588

La configuración predeterminada es:

  1. Formatear por reglas
  2. Basado en el valor en la medida seleccionada
  3. Y se proporcionan 3 iconos divididos uniformemente en el rango de números devueltos por la medida.

icons-4222758

Con la configuración predeterminada, este es el aspecto visual de mi tabla

3-visual-3059234

Tenga en cuenta que los iconos de arriba tienen forma y color para que pueda diferenciarlos incluso si es daltónico. Ésta es la mejor práctica.

También puede cambiar el formato predeterminado para trabajar en la configuración de números codificados que especifique. En el siguiente ejemplo, he cambiado la configuración para trabajar con números absolutos en lugar de porcentajes (observe los cambios en los cuadros resaltados). También tenga en cuenta que he establecido los números mínimo y máximo que se muestran como 1 y 2. Para hacer esto, simplemente elimine el valor en estos cuadros. Gracias a Chris Webb por ayudarme finalmente entender como funciona esto.

4-visual-4189844

Así es como se ve la tabla con la configuración anterior.

5-table-1761745

Conjuntos de iconos

Existe una amplia (pero no ilimitada) gama de iconos estándar que se pueden seleccionar en el menú de iconos, como se muestra a continuación.

6-icons-1401133

Archivos de tema de icono

Si no está satisfecho con los iconos estándar, puede agregar sus propios conjuntos de iconos utilizando un archivo de tema. Aquí hay un archivo de tema de muestra que aumenta el tamaño de fuente predeterminado para imágenes a 15 puntos (quién no quiere eso). Deberá descomprimir el archivo y extraer el documento json. También agregué un código SVG de icono de muestra que obtuve de Microsoft a este archivo, y también un archivo gif estático que encontré en Internet. Después de cargar el archivo de tema, puede ver los 3 nuevos íconos que se han agregado (que se muestran a continuación). Si sabe cómo escribir estos íconos SVG y / o puede encontrar otros íconos en línea, puede modificar el archivo JSON para agregar nuevos íconos también.

7-themes-5797182

Escribí sobre los archivos de tema aquí si desea obtener más información.

Medidas del icono

La última forma (y puede ser la más emocionante) de agregar íconos es escribir una medida. Aquí hay una muestra que obtuve de Microsoft con algunos pequeños cambios que hice yo mismo.

8-measures-2855065

  • La línea 4 a la 6 es un código SVG que dibujará un gráfico vectorial como el icono
  • La línea 7 es una referencia con nombre a uno de los iconos estándar
  • La línea 8 es un archivo gif que encontré en Internet

Puede descargar el código fuente de esta medida aquí.

Una vez que tenga una medida como esta, puede cambiar el formato condicional de la siguiente manera

9-percent-2597233

icons-3283391

Si conoce algún conjunto de iconos gratuito y bueno que se pueda vincular en línea para este propósito, publique el vínculo en los comentarios a continuación.

Formato de código SVG

No pretendo entender profundamente el siguiente código, pero pude averiguar cómo escribir un ícono SVG usando el siguiente formato.

Este es el contenedor / contenedor. Simplemente reemplace el código SVG en la ubicación indicada

“Datos: imagen / svg + xml; utf8, COLOCA TU CÓDIGO SVG AQUÍ ”

Aquí hay un código SVG de muestra para un círculo amarillo con un borde verde. Inserte esto en el espacio indicado arriba.

Solo seguí el aprendizaje de aquí https://www.w3schools.com/graphics/svg_intro.asp y usó comillas simples en lugar de comillas dobles.

Nota: Algunas personas han informado problemas al usar el código SVG al publicar PBIX en línea. Parece que esto está relacionado con la forma en que algunos navegadores interpretan el símbolo # para el color. Debe reemplazar el símbolo # con% 23 en su código SVG para resolver esto, luego debería funcionar en línea.

Editor de SVG

Este fue el mejor editor de SVG en línea que pude encontrar https://editor.method.ac/

formato de código base64

También puede codificar una imagen en formato base64 e incrustarla directamente en la medida del icono. Aquí hay un ejemplo.

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAvCAIAAAAAUC8xAAAACXBIWX
MAAC4jAAAuIwF4pT92AAACaUlEQVR42u2YP0hbQRzHtYoFBa0WFRGx0k6SgpkkONgtLoEumTp2cn
PrVHBxiWOHOHTQIXMlu0RcS6Crb3KyGV2ef+qf9vPytZenxuT9ufeK0B/H4+5y3Od+f+9IT88/lP
XRoZPZ8d9zEzHb/tTowkB/d96P6bH4MNM4ehcq+mnp5edPp86hG0NOvm4dv1vsTj2aecmiq48fXE
vya3OjC1UqntW/u/bkcm21E1VI17Z0oiaE7ERNDolcFwuivh98nhLytPHzemVZiJauiSJFvXn7Wl
UiClLuoZ1Xv4VNG1poJIWC85JOrMdcIRR1DiMiz/f3CAcvKJruCWXeiEj0u1nKmjhMA4lgWC8clr
JSNw0kpV+xQCclpAkE/JoSUuFKw7zpGdbLkGIB86YXPmSIIuiispM4EobqDo6kDIFnBnVRmhPwEz
Nc9W1tHhFpCrS/mWzBzVrQNphDI9GM46vOoR/K6RXBvGfqYsEM/YeIiGR3L/FXltladeBh2qgYmd
bWx4GQuurg4bmLrS+P7WWsyhr8+tgbKhCSLeAB9kprMy7i3JqBkBwZkr5KjMSRUk7hEJMXqxT8Rz
5tZC6Xy2Qy+Xy+XC77h6VSiWG1Ws38Ffp2kNqrUqnQqdfrfGHXajXYUDVfa0qj0bCGZDvD5guGIW
CoQlo2rNRC6DiOY5CC6SvhV2tIOU8kg8SqmjSGtamlfzspjYWxKp2kDOtH3gtgefeJ5GX8wh3kKX
oHye2YHFLvtBZye3xYY67GsG/wIPp5T5nmJbg7OXKLfPGs130zZfHfrbYNxKv+vtbfBVAPFheS4+
1l5+/wUpY/NGyhoiw9IhYAAAAASUVORK5CYII="

El patrón a usar es obtener el código base64. Usé este sitio https://onlinepngtools.com/convert-png-to-base64 y seleccioné fragmentos de línea para crear múltiples líneas

Luego, prefijé el código con lo siguiente.

datos: imagen / png; base64,

y envuelto el lote entre comillas dobles.

Editar 24 de julio de 2019:

Reid Havens también tiene un blog sobre este tema. ¿Ves ese artículo? aquí.

¿Dónde puedo encontrar una lista de iconos de Power BI estándar?

Lea el artículo de mi blog aquí para encontrar una lista de nombres de iconos de Power BI.

!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version=’2.0′;
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window,document,’script’,
‘https://connect.facebook.net/en_US/fbevents.js’);
fbq(‘init’, ‘639916389503636’);
fbq(‘track’, ‘PageView’);

Suscribite a nuestro Newsletter

No te enviaremos correo SPAM. Lo odiamos tanto como tú.