트리맵

wijmo.chart.hierarchical.TreeMap 컨트롤을 사용하여 트리 맵을 만들 수 있습니다. 이 항목은 트리 맵 관련 기능이 포함되어 있으며 데이터 레이블, 내보내기, 팔레트 및 스타일링과 같은 일반적인 기능에 대해서는 차트 모듈의 다른 항목을 참조할 수 있습니다.

Wijmo TreeMap 시작하기

다음은 JavaScript 애플리케이션에서 TreeMap 컨트롤을 시작하는 단계입니다.

  1. Wijmo에 참조 추가하기.
  2. Wijmo 컨트롤의 host 역할을 할 마크업 추가.
  3. JavaScript 통해 TreeMap 컨트롤 초기화.

HTML 예제:

<div id="myChart"></div>

JavaScript 예제:

import * as hierarchical from '@grapecity/wijmo.chart.hierarchical';


var myChart = new hierarchical.TreeMap('#myChart', {
    binding: 'sales',
    bindingName: ['category', 'subCategory'],
    itemsSource: getData(),
    dataLabel: {
        position: 'Center',
        content: '{name}'
    }
});

TreeMap 데이터 바인딩

TreeMap의 데이터 바인딩은 FlexChart보다는 FlexPie와 더 유사합니다.

바인딩 속성은 다른 노드 값을 비교하여 노드의 크기를 계산하는 데 사용됩니다. 해당 속성에는 숫자 데이터가 포함되어야 합니다.

bindingName 속성은 노드의 이름을 표시하는 데 사용되며 이는 배열 또는 문자열이어야 합니다.

Using Grouped Data Sources

그룹화된 CollectionView 데이터 소스과 함께 TreeMap 차트를 사용할 수 있습니다. 예를 들어, CollectionView에 "Category"와 "subCategory"라는 두 개의 그룹 설명자가 있는 경우, 이 설명자는 bindingName에 대한 배열을 사용하여 TreeMap에 바인딩될 수 있습니다.

myChart.bindingName = ['category', 'subCategory'];

Horizontal and Vertical TreeMaps

type 속성은 TreeMap 컨트롤의 유형(사각형, 수평 또는 수직)을 지정합니다.

예제:

import * as hierarchical from '@grapecity/wijmo.chart.hierarchical';


var typeChart = new hierarchical.TreeMap('#typeChart', {
    binding: 'sales',
    bindingName: ['category', 'subCategory'],
    type: 'Vertical',
    itemsSource: getData(),
    dataLabel: {
        position: 'Center',
        content: '{name}'
    }
});

계층적 TreeMaps

childItemsPath 속성을 사용하여 계층 데이터에서 하위 항목을 생성하는 데 사용되는 속성(또는 속성들)의 이름을 설정합니다. 항목이 서로 다른 수준의 하위 항목(예: ['accounts', 'checks', 'earnings'])인 경우 각 수준에서 하위 항목이 포함된 속성의 이름을 포함하는 배열로 이 속성을 설정합니다.

maxDepth 속성은 현재 보기에 표시할 최대 노드 수준 수를 지정합니다. 아래 예제에서는 maxDepth가 '3'으로 설정되어 있으므로, 이것은 TreeMap이 처음 3단계(즉, 음악 > 국가 > 클래식 국가)만 시각화함을 의미합니다. '2'로 설정하면 트리 맵은 두 가지 수준(즉, 음악 > 국가)만 시각화됩니다.

예제:

import * as hierarchical from '@grapecity/wijmo.chart.hierarchical';


var myChart = new hierarchical.TreeMap('myChart', {
        binding: 'sales',
        bindingName: 'type',
        childItemsPath: 'items',
        maxDepth: 2,
        itemsSource: getHierarchicalData(),
        dataLabel: {
            position: 'Center',
            content: '{name}'
        }
});


function getHiearchicalData() {
    var data = [
        {
            type: 'Music', items: [
                {
                    type: 'Country', items: [
                        { type: 'Classic Country', sales: 50 },
                        { type: 'Cowboy Country', sales: 50 },
                        { type: 'Outlaw Country', sales: 50 }
                    ]
                },
                {
                    type: 'Rock', items: [
                        { type: 'Hard Rock', sales: 50 },
                        { type: 'Blues Rock', sales: 50 }
                    ]
                },
                {
                    type: 'Classical', items: [
                        { type: 'Symphonies', sales: 50 },
                        { type: 'Chamber Music', sales: 50 }
                    ]
                }
            ]
        },
        {
            type: 'Video', items: [
                {
                    type: 'Movie', items: [
                        { type: 'Comedy', sales: 50 },
                        { type: 'Drama', sales: 50 },
                        { type: 'Romance', sales: 50 }
                    ]
                },
                {
                    type: 'TV', items: [
                        { type: 'Science Fiction', sales: 50 },
                        { type: 'Documentary', sales: 50 },
                        { type: 'Fantasy', sales: 50 },
                        { type: 'Horror', sales: 50 }
                    ]
                }
            ]
        }
    ];
    return data;
}

TreeMap Color 팔레트

팔레트 속성은 차트에 사용된 색상을 결정합니다. 배열에는 CSS 색상을 나타내는 문자열이 포함되어 있습니다.

예제:

// use colors specified by name
myChart.palette = ['red', 'green', 'blue'];


// or use colors specified as rgba-values
myChart.palette = [
  'rgba(255,0,0,1)', 
  'rgba(255,0,0,0.8)', 
  'rgba(255,0,0,0.6)',
  'rgba(255,0,0,0.4)'];
The TreeMap control supports a color range for each group. This allows each group to remain themed to a single color group.


myChart.palette = [
    { titleColor: '#00277d', maxColor: 'rgba(0,39,125,0.7)', minColor: 'rgba(168,187,230,0.7)' },
    { titleColor: '#7d1f00', maxColor: 'rgba(125,21,0,0.7)', minColor: 'rgba(230,183,168,0.7)' },
    { titleColor: '#007d27', maxColor: 'rgba(0,125,39,0.7)', minColor: 'rgba(168,230,188,0.7)' },
    { titleColor: '#7d003c', maxColor: 'rgba(125,0,60,0.7)', minColor: 'rgba(230,168,198,0.7)' },
    { titleColor: '#7d4300', maxColor: 'rgba(125,67,0,0.7)', minColor: 'rgba(230,201,168,0.7)' },
    { titleColor: '#51007d', maxColor: 'rgba(81,0,125,0.7)', minColor: 'rgba(209,170,230,0.7)' },
    { titleColor: '#7d7400', maxColor: 'rgba(125,116,0,0.7)', minColor: 'rgba(230,226,168,0.7)' },
    { titleColor: '#970000', maxColor: 'rgba(151,0,0,0.7)', minColor: 'rgba(230,169,169,0.7)' }
    ]
Previous
여러 원형 차트
Next
그룹화된 트리맵