Angular 트리맵

    Ignite UI for Angular 차트는 계층적(트리 구조) 데이터를 중첩된 노드 집합으로 표시합니다. 트리의 각 가지에는 트리맵 노드가 제공되며, 이 노드는 하위 가지를 나타내는 더 작은 노드로 타일링됩니다. 각 노드의 직사각형에는 데이터의 지정된 차원에 비례하는 영역이 있습니다. 종종 노드는 데이터의 별도 차원을 표시하기 위해 색상이 지정됩니다.

    Angular Treemap Example

    다음 예에서 IgxTreemapComponent 전체 면적을 기준으로 세계에서 가장 큰 30개 국가를 보여줍니다.

    Treemap Recommendations

    Are Angular Treemaps right for your project?

    색상과 크기 차원이 어떤 방식으로든 트리 구조와 연관되어 있으면 다른 방식으로는 발견하기 어려운 패턴을 쉽게 볼 수 있습니다. 트리맵의 두 번째 장점은 구성을 통해 공간을 효율적으로 사용할 수 있다는 것입니다. 결과적으로 수천 개의 항목을 화면에 동시에 읽기 쉽게 표시할 수 있습니다.

    • 트리맵은 데이터 요소를 분류하고 값의 상대적인 차이를 제대로 전달하지 못하는 원형 차트나 기타 영역형 차트보다 더 효과적입니다.
    • 트리맵은 드릴다운 시나리오를 위해 설계되었습니다. 보다 효율적인 데이터 분석을 위해 더 작은 직사각형으로 표시되는 데이터 세트를 지속적으로 드릴다운할 수 있습니다.
    • 트리맵은 숫자 수량을 전달하도록 설계되지 않았습니다. 목적은 상대 순위를 표시하는 것입니다.

    다른 데이터 시각화와 마찬가지로 트리맵 차트 시각화는 특정 시나리오에서 사용해야 합니다. 바 차트 나 선형 차트와 같은 시각화와 동일한 문제는 해결되지 않습니다. 실제로는 더 복잡하고 풍부한 데이터 표시를 위한 것입니다.

    Treemap Use Cases

    트리맵을 선택하는 데는 몇 가지 일반적인 사용 사례가 있습니다. 때를:

    • 드릴다운 계층적 데이터(분기 및 하위 분기가 있는 트리로 구성된 데이터)가 있습니다.
    • 범주(분기)와 하위 범주(하위 분기) 간의 상대 가중치 및 비교 값의 계층 구조를 설명하려고 합니다.
    • 컴팩트하고 공간 효율적인 시각화가 필요한 대규모 데이터 세트를 표시하고 싶습니다.
    • 정확한 값 없이도 한눈에 보이는 빠른 데이터 분석을 제공하고 싶습니다. 직사각형의 상대적 크기는 패턴 및/또는 이상값을 매우 빠르게 식별하는 데 도움이 됩니다.
    • 공간을 효율적으로 활용하고 싶습니다. 트리맵은 수천 개의 항목을 화면에 동시에 읽기 쉽게 표시할 수 있습니다.

    When not to Use a Treemap

    • 정확한 값이 필요한 데이터 스토리를 전달하고 있습니다.
    • 음수 데이터 값이 있습니다.
    • 평면적이고 비계층적인 데이터가 있습니다.
    • 데이터 크기가 비슷합니다.

    Treemap Data Structure

    • 데이터 소스는 데이터 항목의 배열 또는 목록이어야 합니다.
    • 데이터 소스에는 데이터 항목이 하나 이상 포함되어야 합니다. 그렇지 않으면 지도가 노드를 렌더링하지 않습니다.
    • 모든 데이터 항목에는 labelMemberPath 속성에 매핑되어야 하는 데이터 열(예: 문자열)이 하나 이상 포함되어 있어야 합니다.
    • 모든 데이터 항목에는 valueMemberPath 속성을 사용하여 매핑되어야 하는 숫자 데이터 열이 하나 이상 포함되어야 합니다.
    • 데이터를 정리된 타일로 분류하려면 선택적으로 parentIdMemberPath 및 idMemberPath 사용할 수 있습니다.

    Angular Treemap Configuration

    다음 예에서 트리맵은 layoutType 및 layoutOrientation 속성을 수정하여 알고리즘 구조를 변경하는 기능을 보여줍니다.

    Layout Types

    트리맵 차트는 데이터의 상대적 가중치를 표시합니다. 다양한 알고리즘을 사용하여 데이터 항목의 레이아웃이 어떻게 발생해야 하는지 결정하는 데 도움을 줍니다.

    • SliceAndDiced- 레이아웃 알고리즘은 종횡비를 희생하여 초기 순서를 유지하는 것을 목표로 합니다.
    • Squarified- 레이아웃 타일링 알고리즘은 SliceAndDice 보다 종횡비가 더 좋고 Squarified보다 더 나은 순서를 유지합니다.
    • Stripped- 레이아웃 유형 알고리즘은 최상의 종횡비를 얻지만 개체는 크기별로 정렬됩니다.

    트리맵을 사용하면 요구 사항에 가장 적합한 알고리즘을 선택할 수 있으며 기본적으로 Squarified 방법을 사용합니다. 또한 다음 두 가지 메커니즘을 사용하여 노드에 색상을 지정할 수 있는 기능도 포함되어 있습니다.

    • 유사한 값으로 항목에 색상을 지정하는 그룹 기반 메커니즘
    • 해당 값을 기준으로 노드 색상을 매핑하는 맵 등치와 유사한 축척 기반 메커니즘입니다.

    Layout Orientation

    layoutOrientation 속성을 사용하면 사용자는 계층 구조의 노드가 확장되는 방향을 설정할 수 있습니다.

    ​layoutOrientation 속성은 레이아웃 유형 SliceAndDice 및 Strip에서 작동합니다.

    • Horizontal– 하위 노드가 수평으로 쌓이게 됩니다(SliceAndDice).
    • Vertical– 하위 노드가 수직으로 쌓이게 됩니다(SliceAndDice).

    Angular Treemap Styling

    다음 예에서 트리맵은 NodeStylingScript 이벤트를 통해 스타일을 지정하여 얻은 노드의 모양과 느낌을 변경하는 기능을 보여줍니다.

    Additional Resources

    다음 항목에서 관련 차트 유형에 대한 자세한 내용을 확인할 수 있습니다.

    API References

    다음은 위 섹션에서 언급된 API 멤버 목록입니다.