Mapa de árvore Web Components

    O gráfico Treemap Ignite UI for Web Components exibe dados hierárquicos (estruturados em árvore) como um conjunto de nós aninhados. Cada ramo da árvore recebe um nó treemap, que é então ladrilhado com nós menores representando sub-ramos. O retângulo de cada nó tem uma área proporcional a uma dimensão especificada nos dados. Frequentemente, os nós são coloridos para mostrar uma dimensão separada dos dados.

    Web Components Treemap Example

    No exemplo a seguir, demonstramIgcTreemapComponent os 30 maiores países do mundo em área total.

    Treemap Recommendations

    Are Web Components Treemaps right for your project?

    Quando as dimensões de cor e tamanho são correlacionadas de alguma forma com a estrutura da árvore, pode-se frequentemente ver facilmente padrões que seriam difíceis de detectar de outras formas. Uma segunda vantagem dos mapas de árvore é que, por construção, eles fazem uso eficiente do espaço. Como resultado, eles podem exibir legivelmente milhares de itens na tela simultaneamente.

    • Mapas de árvore são mais eficazes do que gráficos de pizza e outras formas de gráficos de área que geralmente fazem um trabalho ruim de classificar pontos de dados e comunicar as diferenças relativas de seus valores.
    • Treemaps são projetados para cenários de drill down. Você pode fazer drill down continuamente no conjunto de dados que é representado por retângulos menores para uma análise de dados mais eficiente.
    • Os mapas de árvores não são projetados para transmitir quantidades numéricas; a intenção é mostrar classificações relativas.

    Como qualquer outra visualização de dados, uma visualização de gráfico Treemap deve ser usada em cenários específicos. Ela não resolve o mesmo problema que uma visualização como um Gráfico de Barras ou um Gráfico de Linhas resolveria. Ela é realmente destinada a uma exibição de dados mais complexa e rica.

    Treemap Use Cases

    Há vários casos de uso comuns para escolher um Treemap. Quando você:

    • Tenha dados hierárquicos detalhados (dados organizados como uma árvore, com ramificações e subramificações).
    • Deseja ilustrar hierarquias de peso relativo e valores comparativos entre categorias (ramificações) e subcategorias (sub-ramificações).
    • Deseja exibir grandes conjuntos de dados que precisam de uma visualização compacta e com economia de espaço.
    • Quer entregar uma análise de dados rápida e de relance, sem valores precisos. O tamanho relativo dos retângulos ajuda a identificar padrões e/ou outliers muito rapidamente.
    • Quer fazer uso eficiente do espaço. Treemaps podem exibir legivelmente milhares de itens na tela simultaneamente.

    When not to Use a Treemap

    • Você está contando uma história de dados que requer valores precisos
    • Você tem valores de dados negativos
    • Você tem dados planos e não hierárquicos
    • Seus dados são semelhantes em tamanho

    Treemap Data Structure

    • A fonte de dados deve ser uma matriz ou uma lista de itens de dados
    • A fonte de dados deve conter pelo menos um item de dados, caso contrário o mapa não renderizará nenhum nó.
    • Todos os itens de dados devem conter pelo menos uma coluna de dados (por exemplo, string) que deve ser mapeada para alabelMemberPath propriedade.
    • Todos os itens de dados devem conter pelo menos uma coluna numérica de dados, que deve ser mapeada usando avalueMemberPath propriedade.
    • Para categorizar dados em tiles organizados, você pode opcionalmente usarparentIdMemberPath eidMemberPath.

    Web Components Treemap Configuration

    No exemplo a seguir, o treemap demonstra a capacidade de alterar sua estrutura algorítmica modificando aslayoutType propriedades e.layoutOrientation​

    Layout Types

    O gráfico Treemap exibe o peso relativo dos dados. Ele usa uma variedade de algoritmos para ajudar a determinar como o layout de seus itens de dados deve ocorrer:

    • SliceAndDiced- O algoritmo de layout visa preservar a ordem inicial em detrimento da proporção de aspecto.
    • Squarified- o algoritmo de mosaico de layout tem uma proporção de aspecto melhor que oSliceAndDice e mantém uma ordem melhor que o Squarified.
    • Stripped- o algoritmo de tipo de layout obtém a melhor proporção de aspecto, mas os objetos são organizados por tamanho.

    O Treemap permite que você escolha o algoritmo que é melhor para suas necessidades, usando como padrão o método Squarified. Ele também inclui a capacidade de permitir que você colorize nós usando dois mecanismos:

    • Um mecanismo baseado em grupos que colore itens com valores semelhantes
    • Um mecanismo baseado em escala semelhante a um mapa coroplético, que mapeia as cores dos nós com base em seus valores.

    Layout Orientation

    layoutOrientationA propriedade permite ao usuário definir a direção na qual os nós da hierarquia serão expandidos.

    Note que alayoutOrientation propriedade funciona com os tipos de layout SliceAndDice e Strip.

    • Horizontal– os nós filhos vão ser empilhados horizontalmente (SliceAndDice).
    • Vertical– os nós filhos vão ser empilhados verticalmente (SliceAndDice).

    Web Components Treemap Styling

    No exemplo a seguir, o treemap demonstra a capacidade de mudar a aparência e a sensação dos nós alcançados ao fazer styling através doNodeStylingScript evento.

    Web Components Treemap Highlighting

    No exemplo a seguir, o mapa de árvore demonstra a capacidade de realçar nós. Existem duas opções para esse recurso. Cada nó pode clarear individualmente, diminuindo sua opacidade, ou fazer com que todos os outros nós disparem o mesmo efeito. Para ativar esse recurso, definahighlightingMode para Iluminar ou DesaparecerOutros.

    Web Components Treemap Percent based highlighting

    • highlightedDataSource: Especifica a fonte de dados para ler valores destacados. Se for nulo, então os valores destacados são lidos da propriedade ItemsSource.
    • highlightedValueMemberPath: Especifica o nome da propriedade na fonte de dados onde os valores destacados são lidos.
    • highlightedValueOpacity: Controla a opacidade do valor normal atrás do valor destacado.
    • highlightedValuesDisplayMode: Ativa ou desativa valores destacados.
      • Automático: O mapa de árvore decide qual modo usar.
      • Sobreposição: o mapa de árvore exibe valores destacados sobre o valor normal com uma leve opacidade aplicada ao valor normal.
      • Oculto: O mapa de árvore não mostra valores destacados.

    Additional Resources

    Você pode encontrar mais informações sobre os tipos de gráficos relacionados nestes tópicos:

    API References

    A seguir está uma lista de membros da API mencionados nas seções acima: