Mapa de árbol Blazor

    El gráfico Ignite UI for Blazor Treemap muestra datos jerárquicos (estructurados en árbol) como un conjunto de nodos anidados. A cada rama del árbol se le asigna un nodo de mapa de árbol, que luego se mosaico con nodos más pequeños que representan subramas. El rectángulo de cada nodo tiene un área proporcional a una dimensión especificada en los datos. A menudo, los nodos están coloreados para mostrar una dimensión separada de los datos.

    Blazor Treemap Example

    En el siguiente ejemplo, IgbTreemap muestra los 30 países más grandes del mundo por área total.

    Treemap Recommendations

    Are Blazor Treemaps right for your project?

    Cuando las dimensiones de color y tamaño se correlacionan de alguna manera con la estructura del árbol, a menudo se pueden ver fácilmente patrones que serían difíciles de detectar de otra manera. Una segunda ventaja de los mapas de árboles es que, por construcción, hacen un uso eficiente del espacio. Como resultado, pueden mostrar de forma legible miles de elementos en la pantalla simultáneamente.

    • Los mapas de árbol son más efectivos que los gráficos circulares y otras formas de gráficos de áreas que a menudo no logran clasificar puntos de datos y comunicar las diferencias relativas de sus valores.
    • Los mapas de árbol están diseñados para escenarios detallados. Puede profundizar continuamente en el conjunto de datos representado por rectángulos más pequeños para un análisis de datos más eficiente.
    • Los mapas de árbol no están diseñados para transmitir cantidades numéricas; la intención es mostrar clasificaciones relativas.

    Como cualquier otra visualización de datos, una visualización de gráfico Treemap debe usarse en escenarios específicos. No resuelve el mismo problema que resolvería una visualización como un Gráfico de barras o un Gráfico de líneas. En realidad, está pensado para una visualización de datos más compleja y rica.

    Treemap Use Cases

    Existen varios casos de uso comunes para elegir un Treemap. Cuando usted:

    • Tener datos jerárquicos desglosados (datos organizados en forma de árbol, con ramas y subramas).
    • Quiere ilustrar jerarquías de peso relativo y valores comparativos entre categorías (ramas) y subcategorías (subramas).
    • Quiere mostrar grandes conjuntos de datos que necesitan una visualización compacta y que ocupe poco espacio.
    • Quiere ofrecer un análisis de datos rápido y de un vistazo sin valores precisos. El tamaño relativo de los rectángulos ayuda a identificar patrones y/o valores atípicos muy rápidamente.
    • Quiere hacer un uso eficiente del espacio. Los mapas de árbol pueden mostrar de forma legible miles de elementos en la pantalla simultáneamente.

    When not to Use a Treemap

    • Estás contando una historia de datos que requiere valores precisos.
    • Tienes valores de datos negativos.
    • Tienes datos planos y no jerárquicos.
    • Tus datos son similares en tamaño

    Treemap Data Structure

    • La fuente de datos debe ser una matriz o una lista de elementos de datos.
    • La fuente de datos debe contener al menos un elemento de datos; de lo contrario, el mapa no mostrará ningún nodo.
    • Todos los elementos de datos deben contener al menos una columna de datos (por ejemplo, una cadena) que debe asignarse a la propiedad LabelMemberPath.
    • Todos los elementos de datos deben contener al menos una columna de datos numéricos que se debe asignar mediante la propiedad ValueMemberPath.
    • Para categorizar datos en mosaicos organizados, opcionalmente puede usar ParentIdMemberPath e IdMemberPath.

    Blazor Treemap Configuration

    En el siguiente ejemplo, el mapa de árbol demuestra la capacidad de cambiar su estructura algorítmica modificando las propiedades LayoutType y LayoutOrientation.

    Layout Types

    El gráfico Treemap muestra el peso relativo de los datos. Utiliza una variedad de algoritmos para ayudarlo a determinar cómo debe ocurrir el diseño de sus elementos de datos:

    • SliceAndDiced: el algoritmo de diseño tiene como objetivo preservar el orden inicial a expensas de la relación de aspecto.
    • Squarified: el algoritmo de mosaico de diseño tiene una mejor relación de aspecto que SliceAndDice y mantiene un mejor orden que Squarified.
    • Stripped: el algoritmo de tipo de diseño obtiene la mejor relación de aspecto pero los objetos están organizados por tamaño.

    El Treemap le permite elegir el algoritmo que mejor se adapte a sus necesidades, y de forma predeterminada utiliza el método Squarified. También incluye la capacidad de permitirle colorear nodos utilizando dos mecanismos:

    • Un mecanismo basado en grupos que colorea elementos con valores similares
    • Un mecanismo basado en escala similar a una coropleta de mapa, que asigna los colores de los nodos en función de su valor.

    Layout Orientation

    La propiedad LayoutOrientation permite al usuario establecer la dirección en la que se expandirán los nodos de la jerarquía.

    Tenga en cuenta que la propiedad LayoutOrientation funciona con los tipos de diseño SliceAndDice y Strip.

    • Horizontal: los nodos secundarios se apilarán horizontalmente (SliceAndDice).
    • Vertical: los nodos secundarios se apilarán verticalmente (SliceAndDice).

    Blazor Treemap Styling

    En el siguiente ejemplo, el mapa de árbol demuestra la capacidad de cambiar la apariencia de los nodos logrados al aplicar estilo a través del evento NodeStylingScript.

    Blazor Treemap Highlighting

    En el ejemplo siguiente, el diagrama de rectángulos muestra la capacidad de resaltado de nodos. Hay dos opciones para esta función. Cada nodo puede iluminarse individualmente, disminuyendo su opacidad, o hacer que todos los demás nodos desencadenen el mismo efecto. Para habilitar esta función, configúrela HighlightingMode en Iluminar o Desvanecer Otros.

    Blazor Treemap Percent based highlighting

    • HighlightedDataSource: Especifica la fuente de datos de la que se leerán los valores resaltados. Si es null, los valores resaltados se leen de la propiedad ItemsSource.
    • HighlightedValueMemberPath: Especifica el nombre de la propiedad de la fuente de datos en la que se leen los valores resaltados.
    • HighlightedValueOpacity: Controla la opacidad del valor normal detrás del valor resaltado.
    • HighlightedValuesDisplayMode: Habilita o deshabilita los valores resaltados.
      • Automático: El diagrama de rectángulos decide qué modo utilizar.
      • Superposición: El diagrama de rectángulos muestra los valores resaltados por encima del valor normal con una ligera opacidad aplicada al valor normal.
      • Oculto: El gráfico de rectángulos no muestra los valores resaltados.

    Additional Resources

    Puede encontrar más información sobre tipos de gráficos relacionados en estos temas:

    API References

    La siguiente es una lista de miembros de API mencionados en las secciones anteriores: