Infografía visual - muchos colores en un solo icono

[Anonymous]

Hola a todos,

Quiero usar el visual Infográfico (o algo similar), pero en lugar de tener un icono separado para cada categoría, rellenado hasta cierto punto, me gustaría tener un solo icono, que se colorea de acuerdo con un valor %. Por ejemplo:

A	10%
B	20%
C	70%

Perdón por el horrible dibujo 😉

¿Tienen alguna idea sobre cómo lograrlo? 🙂

[Greg_Deckler]

@aleksaste Bueno, tomaría algo de trabajo, pero definitivamente podría hacerlo con un objeto visual SVG o un visual R o Python. Acabo de pasar por crear un modelo para un icono de corazón en SVG. Podría *probablemente* modificarlo para que las cosas se coloreen como desee. Tendría que buscar objetos visuales personalizados que pudieran hacer esto.

@dm-p eres bueno con imágenes personalizadas, ¿verdad? ¿Alguna idea?

[dm-p]

No hay ningún objeto visual personalizado que pueda hacer esto directamente - como @Greg_Deckler ha señalado, podría administrarlo con SVG.

El mayor desafío con una forma como esta es su curviness - corazones se construyen típicamente con un elemento de ruta. Aunque podría administrar la proporción de la forma que debe rellenarse en función de algunos cálculos DAX con respecto a su altura y el cuadro de vista SVG, tendría que averiguar cómo dibujar las curvas para dondequiera que las formas comiencen y terminen.

Esperemos que lo siguiente ilustre mejor - Rápidamente construí esto con el objeto visual personalizado de contenido HTML y estoy usando elementos rect para "rellenar" detrás del corazón:

(Acabo de agarrar un corazón SVG de stock, por lo que todavía hay algo de trabajo para obtener la altura correcta, ya que los valores abarcan toda la imagen)

Necesitaría alguna manera de "cortar" la inversa de la forma del corazón y colocarlo por encima de las rects para crear el efecto de espacio negativo y dar la impresión de que el corazón está solo lleno internamente para cada medida.

Voy a compartir mi prototipo, en caso de que alguien quiera ver si puede evolucionarlo - Estoy un poco demasiado atado con compromisos en este momento para trabajar en una solución completa. Disculpas por el terrible modelado y DAX, ya que estoy usando columnas en lugar de medidas para los datos de prueba y estaba interesado en tratar de llegar al componente de visualización.

Tabla (nombre - Ejemplo):

Medir para generar lo anterior:

Filled Heart = 
    // Physical Sizing
        VAR SvgElementHeight = 200 
        VAR SvgElementWidth = 200
    // Grabbed out of SVG to calculate scaling based on physical size
        VAR SvgViewboxHeight = 471.701
        VAR SvgViewboxWidth = 471.701
    // Get all values
        VAR Results = SUMMARIZECOLUMNS(
            'Sample'[Value],
            'Sample',
            "Colour", MIN('Sample'[Colour]),
            "Percent", SUM('Sample'[Amount]),
            // Starting percent allows us to calculate where y coords should start for this rect
            "StartingPercent", SUMX(
                FILTER(
                    ALLSELECTED('Sample'),
                    'Sample'[Index] < MAX('Sample'[Index])
                ), 
                'Sample'[Amount]
            )
        )
    // SVG Heart Template (placeholder for rect elements, which we'll fill-in shortly)
        VAR SvgHeart = "<svg style=""height:" & SvgElementHeight & "; width=""" & SvgElementWidth & ";"" viewBox=""0 0 471.701 471.701"">
                <g>
                    $rects$
                    <path d=""M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1
                        c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3
                        l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4
                        C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3
                        s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4
                        c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3
                        C444.801,187.101,434.001,213.101,414.401,232.701z""/>
                </g>
            </svg>"
    // Build some rect elements based on summarized data above
        VAR FilledSvg = SUBSTITUTE(
            SvgHeart, "$rects", 
            CONCATENATEX(
                Results, 
                "<rect width=""" 
                    & SvgViewboxWidth 
                    & """ height=""" 
                    & SvgViewboxHeight * [Percent] 
                    & """ y=""" 
                    & SvgViewboxHeight * [StartingPercent] 
                    & """ fill=""" 
                    & [Colour] 
                    & """ stroke=""black""/>"
                )
            )
    RETURN FilledSvg

saludos

Daniel

[Anonymous]

¡Hola! Esto realmente salvaría mi problema, porque el corazón era sólo como un ejemplo, pero estoy planeando trabajar en una forma más rectángulo, y también está bien si el relleno no representa el tamaño exacto de la superficie! ¡Fantástico! Sin embargo, he intentado volver a crear la medida en mi Power BI y no se muestra. He copiado la tabla tal como está, y no veo ningún error, pero la imagen está vacía. ¿Tienes idea de lo que podría estar yendo mal? Nunca he usado este tipo de código antes... Gracias 🙂

[Greg_Deckler]

@dm-p ¡Qué bien! Me alegra tener una escuela para visuales personalizados / cosas como este !!

[amitchandak]

@aleksaste , Icono único con el color diferente dudo a menos que pueda superponerse uno sobre otro y hacerlo.