Web Components Mapa de rectángulos

    El gráfico de Ignite UI for Web Components gráfico de rectángulos 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 árboles, que luego se coloca en 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 se colorean para mostrar una dimensión separada de los datos.

    Web Components Treemap Example

    En el siguiente ejemplo, seIgcTreemapComponent muestran los 30 países más grandes del mundo por superficie total.

    Treemap Recommendations

    Are Web Components 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 lalabelMemberPath propiedad.
    • Todos los elementos de datos deben contener al menos una columna numérica de datos que debe mapearse usando lavalueMemberPath propiedad.
    • Para categorizar los datos en mosaicos organizados puedes usar opcionalmenteparentIdMemberPath yidMemberPath.

    Web Components Treemap Configuration

    En el siguiente ejemplo, el treemap demuestra la capacidad de cambiar su estructura algorítmica modificando laslayoutType propiedades ylayoutOrientation de .

    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 busca preservar el orden inicial a costa de la relación de aspecto.
    • Squarified- el algoritmo de mosaico de layout tiene una mejor relación de aspecto que elSliceAndDice y mantiene un mejor orden que el Squarified.
    • Stripped- El algoritmo de tipo de layout 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

    layoutOrientationPermite al usuario establecer la dirección en la que se expandirán los nodos de la jerarquía.

    Ten en cuenta que lalayoutOrientation propiedad funciona con los tipos de diseño SliceAndDice y Strip.

    • Horizontal– los nodos hijos se apilarán horizontalmente (SliceAndDice).
    • Vertical– los nodos hijos se apilarán verticalmente (SliceAndDice).

    Web Components Treemap Styling

    En el siguiente ejemplo, el treemap demuestra la capacidad de cambiar el aspecto y la sensación de los nodos logrados mediante el estilizado a través delNodeStylingScript evento.

    Web Components Treemap Highlighting

    En el siguiente ejemplo, el mapa de árbol demuestra la capacidad de resaltar nodos. Hay dos opciones para esta función. Cada nodo puede iluminarse individualmente, disminuyendo su opacidad, o hacer que todos los demás nodos desencadenan el mismo efecto. Para activar esta función, configurahighlightingMode en Iluminar o DesvanecerOtros.

    Web Components Treemap Percent based highlighting

    • highlightedDataSource: Especifica la fuente de datos desde la cual leer los valores resaltados. Si es nulo, entonces los valores resaltados se leen desde la propiedad ItemsSource.
    • highlightedValueMemberPath: Especifica el nombre de la propiedad en la fuente de datos donde se leen los valores resaltados.
    • highlightedValueOpacity: Controla la opacidad del valor normal detrás del valor resaltado.
    • highlightedValuesDisplayMode: Activa o desactiva 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: