Bullet Chart Sparkline SVG no se muestra en la tabla

Hola,

Estoy trabajando para agregar Minigráficos de viñetas a una tabla que he creado. Estoy siguiendo el siguiente artículo:

https://www.csgpro.com/blog/2018/08/bullet-chart-sparklines-in-power-bi

Los gráficos de viñetas no se mostrarán en la tabla. Solo obtengo un icono de «Imagen» en la tabla. El DAX es el mismo que en el ejemplo y estoy usando Power BI Desktop de septiembre de 2018.

No parece que pueda cargar el archivo ya que es mi primera publicación.

Aquí está el DAX:

Gráfico de viñetas =
VAR vBaseText =
«datos:imagen/svg+xml;utf8, _svg ancho=»»100″» altura=»»100″» versión=»»1.1″» xmlns=»»http://www.w3.org/2000/svg «» estilo=»»fondo: %23ffffff»»_
_rect x=»»0″» y=»»25″» rx=»»2″» ry=»»2″» width=»»100″» height=»»50″» style=»»fill:% 23f2f2f2;ancho de trazo:0;opacidad de relleno:1″» /_
_rect x=»»0″» y=»»45″» rx=»»2″» ry=»»2″» width=»»#Actual»» height=»»10″» style=»»fill: %23333333;ancho de trazo:0;opacidad de relleno:1″» /_
_rect x=»»#Objetivo»» y=»»30″» rx=»»2″» ry=»»2″» width=»»6″» height=»»40″» style=»»fill: %23888888;trazo:negro;ancho de trazo:0;opacidad de relleno:1;opacidad de trazo:1″» /_
_/svg_»

VAR vObjects = TODOS( Ventas[Location], Ventas[City],Ventas[Country],Ventas[State/Province] )

VAR vMaxActual = MAXX( vObjects, [Total Sales] )
VAR vMaxObjetivo = MAXX( vObjetos, [Total Goal] )

VAR vXAxisRangeBase = MAX( vMaxActual, vMaxGoal )

VAR vReal = INT( DIVIDIR( [Total Sales], vXAxisRangeBase ) * 90 )
VAR vObjetivo = INT( DIVIDIR( [Total Goal], vXAxisRangeBase ) * 90 )

VAR vReturn = SUSTITUIR( SUSTITUIR( vBaseText, «#Actual», vActual ), «#Objetivo», vObjetivo )

DEVOLVER SI( [Total Sales], vRetorno, EN BLANCO() )

Aquí están los resultados que obtengo en la tabla.

@Anónimo

Terminé optando por un gráfico de viñetas, pero el patrón era similar. Aquí hay una captura de pantalla de la tabla final y el DAX para el Bullet Chart en la tabla.

BH vs AH = 
// Static column color - use %23 instead of # for Firefox compatibility
VAR vBackground = "%23ffffff"
//Set Bar Color based on AH vs BH
VAR vBarColor = Switch(True(),
                [AH] <= [BH], "%2339a964",
                [BH] = 0, "%23ffa160",
                [AH] > [BH], "%23cd1319")

VAR vActBarColor = "%23333333"
VAR vTargetBarColor = "%23888888"

// Base Text for drawing SVG Bullet Chart
VAR vBaseText = 
"data&colon;image/svg+xml;utf8, <svg width="100" height="100" version='1.1' xmlns="http://www.w3.org/2000/svg" style="background: " & vBackground & "">
  <rect  x='0'       y='25'   rx='2' ry='2'   width="100"       height="50"   style="fill:" & vBarColor & ";stroke-width:0;fill-opacity:1" /> 
  <rect  x='0'       y='45'   rx='2' ry='2'   width=""#Actual"" height="10"   style="fill:" & vActBarColor & ";stroke-width:0;fill-opacity:1" />
  <rect  x=""#Budget"" y='30'   rx='2' ry='2'   width="6"         height="40"   style="fill:" & vTargetBarColor & ";stroke:black;stroke-width:0;fill-opacity:1;stroke-opacity:1" />
</svg>"

//Define the X Axis Range 
//List All Cost Codes
VAR vObjects = All(Hours[Cost Code])

//Find Max AH & BH Across Cost Codes
VAR vMaxActual = MAXX( vObjects, [AH] )
VAR vMaxBudget = MAXX( vObjects, [BH] )

VAR vXAxisRangeBase = MAX( vMaxActual, vMaxBudget )

//Define Distance Across X Axis as Percentage.  Multiplying by 90 to Add Padding
VAR vActual = INT( DIVIDE( [AH], vXAxisRangeBase ) * 90 )
VAR vBudget   = INT( DIVIDE( [BH],  vXAxisRangeBase ) * 90 )

//Replace varibles with values in SVG Text
VAR vReturn = SUBSTITUTE( SUBSTITUTE( vBaseText, "#Actual", vActual ), "#Budget", vBudget )

//Check to see if there were some Actual Hours
RETURN IF( [AH], vReturn, BLANK() )

¡¡¡Espero que esto ayude!!!

Anónimo

mismo problema (¿Ha encontrado la solución?!

@Anónimo

Terminé optando por un gráfico de viñetas, pero el patrón era similar. Aquí hay una captura de pantalla de la tabla final y el DAX para el Bullet Chart en la tabla.

BH vs AH = 
// Static column color - use %23 instead of # for Firefox compatibility
VAR vBackground = "%23ffffff"
//Set Bar Color based on AH vs BH
VAR vBarColor = Switch(True(),
                [AH] <= [BH], "%2339a964",
                [BH] = 0, "%23ffa160",
                [AH] > [BH], "%23cd1319")

VAR vActBarColor = "%23333333"
VAR vTargetBarColor = "%23888888"

// Base Text for drawing SVG Bullet Chart
VAR vBaseText = 
"data&colon;image/svg+xml;utf8, <svg width="100" height="100" version='1.1' xmlns="http://www.w3.org/2000/svg" style="background: " & vBackground & "">
  <rect  x='0'       y='25'   rx='2' ry='2'   width="100"       height="50"   style="fill:" & vBarColor & ";stroke-width:0;fill-opacity:1" /> 
  <rect  x='0'       y='45'   rx='2' ry='2'   width=""#Actual"" height="10"   style="fill:" & vActBarColor & ";stroke-width:0;fill-opacity:1" />
  <rect  x=""#Budget"" y='30'   rx='2' ry='2'   width="6"         height="40"   style="fill:" & vTargetBarColor & ";stroke:black;stroke-width:0;fill-opacity:1;stroke-opacity:1" />
</svg>"

//Define the X Axis Range 
//List All Cost Codes
VAR vObjects = All(Hours[Cost Code])

//Find Max AH & BH Across Cost Codes
VAR vMaxActual = MAXX( vObjects, [AH] )
VAR vMaxBudget = MAXX( vObjects, [BH] )

VAR vXAxisRangeBase = MAX( vMaxActual, vMaxBudget )

//Define Distance Across X Axis as Percentage.  Multiplying by 90 to Add Padding
VAR vActual = INT( DIVIDE( [AH], vXAxisRangeBase ) * 90 )
VAR vBudget   = INT( DIVIDE( [BH],  vXAxisRangeBase ) * 90 )

//Replace varibles with values in SVG Text
VAR vReturn = SUBSTITUTE( SUBSTITUTE( vBaseText, "#Actual", vActual ), "#Budget", vBudget )

//Check to see if there were some Actual Hours
RETURN IF( [AH], vReturn, BLANK() )

¡¡¡Espero que esto ayude!!!

Anónimo

muchas gracias por una respuesta rapida!!!

¿podría ayudarme un poco más? Todavía no puedo entender la lógica aquí.

entonces estoy abriendo

<svg

justo después de esta parte»data:image/svg+xml;utf8,» y ciérralo al final, ¿verdad? ¿Por qué tenemos

" & vBackground & "'>

? ¿Qué estamos cerrando aquí?

@Anónimo

No estoy 100% seguro de esto… Creo que estos son los parámetros iniciales para el SVG. Necesita saber cuál es el color de fondo, así que estoy pasando una variable «vBackground» y luego cerrando el corchete de apertura. Aquí hay un fragmento de esa sección en VS Code que puede aclararlo.

Anónimo

muchas gracias de verdad me ayudaste!!!!!! Creo que debe aceptar su respuesta como la solución aceptada aquí para ayudar a otros.

Hola,

Estoy trabajando para agregar un gráfico de viñetas a mi tabla y no se está procesando. Todo lo que veo es un ícono de «Imagen» en la tabla:

Aquí está el DAX que estoy usando para el gráfico de viñetas:

Gráfico de viñetas =
VAR vBaseText =
«datos:imagen/svg+xml;utf8, _svg ancho=»»100″» altura=»»100″» versión=»»1.1″» xmlns=»»http://www.w3.org/2000/svg «» estilo=»»fondo: %23ffffff»»_
_rect x=»»0″» y=»»25″» rx=»»2″» ry=»»2″» width=»»100″» height=»»50″» style=»»fill:% 23f2f2f2;ancho de trazo:0;opacidad de relleno:1″» /_
_rect x=»»0″» y=»»45″» rx=»»2″» ry=»»2″» width=»»#Actual»» height=»»10″» style=»»fill: %23333333;ancho de trazo:0;opacidad de relleno:1″» /_
_rect x=»»#Objetivo»» y=»»30″» rx=»»2″» ry=»»2″» width=»»6″» height=»»40″» style=»»fill: %23888888;trazo:negro;ancho de trazo:0;opacidad de relleno:1;opacidad de trazo:1″» /_
_/svg_»

VAR vObjects = TODOS( Ventas[Location], Ventas[City],Ventas[Country],Ventas[State/Province] )

VAR vMaxActual = MAXX( vObjects, [Total Sales] )
VAR vMaxObjetivo = MAXX( vObjetos, [Total Goal] )

VAR vXAxisRangeBase = MAX( vMaxActual, vMaxGoal )

VAR vReal = INT( DIVIDIR( [Total Sales], vXAxisRangeBase ) * 90 )
VAR vObjetivo = INT( DIVIDIR( [Total Goal], vXAxisRangeBase ) * 90 )

VAR vReturn = SUSTITUIR( SUSTITUIR( vBaseText, «#Actual», vActual ), «#Objetivo», vObjetivo )

DEVOLVER SI( [Total Sales], vRetorno, EN BLANCO() )

Además, estoy en la versión de septiembre de 2018 de PBI Desktop.

¡¡¡Gracias por tu ayuda!!!

Entradas relacionadas

Deja un comentario Cancelar respuesta