rMate TreeMap 예시

Treemap은 nameField(타일 이름), weightField(타일 크기 기준값) 구조여야 하는데, 지금은 aaa, bbb, ccc가 컬럼으로 분리돼 있어서 그대로는 쓰기 어렵울 경우.

📌 현재 쿼리 구조

Xname | aaa  | bbb  | ccc
------|------|------|-----
test1 | 1000 | 500  | 700
test2 | 2000 | 1500 | 700
test3 | 800  | 300  | 200

➡️ 이건 행(Row) 기준이 아니라 열(Column) 기준이라서 Treemap에서 직접 쓰기 힘듭니다.

📌 Treemap 차트에 맞는 데이터 구조

Treemap은 항목 이름 + 값 형태가 기본이에요. 예를 들어:

Xname | category | value
------|----------|------
test1 | aaa      | 1000
test1 | bbb      | 500
test1 | ccc      | 700
test2 | aaa      | 2000
test2 | bbb      | 1500
test2 | ccc      | 700
test3 | aaa      | 800
test3 | bbb      | 300
test3 | ccc      | 200

이렇게 만들어야 nameField="category", weightField="value", groupField="Xname" 같은 식으로 사용할 수 있습니다.

📌 수정된 SQL 예시 (UNPIVOT 방식)

SELECT Xname, category, value
FROM (
    SELECT 'test1' as Xname, 1000 as aaa, 500 as bbb, 700 as ccc FROM dual
    UNION ALL
    SELECT 'test2', 2000, 1500, 700 FROM dual
    UNION ALL
    SELECT 'test3', 800, 300, 200 FROM dual
) t
UNPIVOT (
    value FOR category IN (aaa, bbb, ccc)
);

📌 rMate Treemap 예제 코드

<rMateChart>
    <Options>
        <Caption text="Treemap 예제"/>
        <Legend/>
    </Options>
    <TreeMapChart showDataTips="true">
        <series>
            <TreeMapSeriesnameField="category"
                weightField="value"
                groupField="Xname"
                displayName="Treemap"/>
        </series>
    </TreeMapChart>
</rMateChart>

✅ 정리

• 지금 쿼리처럼 aaa, bbb, ccc가 컬럼으로 나눠진 구조는 Treemap에 바로 적용 불가
• UNPIVOT 또는 UNION ALL로 행(row) 기반 데이터 구조로 변환 필요
• nameField=category, weightField=value, groupField=Xname 식으로 연결

📌 UNPIVOT 없는 버전 쿼리

SELECT 'test1' AS Xname, 'aaa' AS category, 1000 AS value FROM dual
UNION ALL
SELECT 'test1', 'bbb', 500 FROM dual
UNION ALL
SELECT 'test1', 'ccc', 700 FROM dual

UNION ALL
SELECT 'test2', 'aaa', 2000 FROM dual
UNION ALL
SELECT 'test2', 'bbb', 1500 FROM dual
UNION ALL
SELECT 'test2', 'ccc', 700 FROM dual

UNION ALL
SELECT 'test3', 'aaa', 800 FROM dual
UNION ALL
SELECT 'test3', 'bbb', 300 FROM dual
UNION ALL
SELECT 'test3', 'ccc', 200 FROM dual;

📊 결과 데이터

Xname  | category | value
-------|----------|------
test1  | aaa      | 1000
test1  | bbb      | 500
test1  | ccc      | 700
test2  | aaa      | 2000
test2  | bbb      | 1500
test2  | ccc      | 700
test3  | aaa      | 800
test3  | bbb      | 300
test3  | ccc      | 200

📌 rMate Treemap 매핑

<TreeMapChart showDataTips="true">
    <series>
        <TreeMapSeriesnameField="category"
            weightField="value"
            groupField="Xname"
            displayName="Treemap"/>
    </series>
</TreeMapChart>

✅ 이렇게 하면 test1, test2, test3 그룹별로 묶이고,

그 안에서 aaa/bbb/ccc가 사각형으로 표현되며, 값(value) 크기 비율로 타일 크기가 달라집니다.

총 test1,2,3별로 3개의 큰 treemap박스에 한 덩어리마다 aaa,bbb,ccc타일을 넣고 싶은 경우에, 아래와 같이 작성

이런 구조라면 rMate Treemap의 groupField 속성을 쓰면 됩니다.

말씀하신 건 크게 보면

• 그룹 : test1, test2, test3 (큰 박스)
• 타일 : aaa, bbb, ccc (작은 사각형)
• 크기 : value (숫자 값 기준으로 타일 면적이 달라짐)

📊 데이터 구조

앞서 만든 UNION ALL 버전이 그대로 적합합니다:

Xname  | category | value
-------|----------|------
test1  | aaa      | 1000
test1  | bbb      | 500
test1  | ccc      | 700
test2  | aaa      | 2000
test2  | bbb      | 1500
test2  | ccc      | 700
test3  | aaa      | 800
test3  | bbb      | 300
test3  | ccc      | 200

📌 rMate Treemap 예제 코드

<rMateChart>
    <Options>
        <Caption text="Treemap 예제"/>
        <Legend/>
    </Options>

    <TreeMapChart showDataTips="true">
        <series>
            <TreeMapSeriesgroupField="Xname"      <!-- 큰 그룹 -->
                nameField="category"    <!-- 작은 타일 이름 -->
                weightField="value"     <!-- 타일 크기 기준 -->
                displayName="Treemap"/>
        </series>
    </TreeMapChart>
</rMateChart>

✅ 이렇게 하면

• 화면에 3개의 큰 박스(test1, test2, test3) 가 생기고,
• 각 박스 안에 aaa, bbb, ccc 타일이 들어갑니다.
• 각 타일의 면적은 value 값에 따라 비율로 표시돼요.

👉 여기서 선택사항:

• labelField="category" 옵션을 주면 타일 안에 aaa/bbb/ccc 글자 표시 가능
• colorField 같은 속성을 추가하면 aaa/bbb/ccc 별로 색상 다르게 표현 가능