홈
도움말
데이터 갱신
데이터 감소
좌우 회전

씨투아이 3D 표준차트 컴포넌트

동일한 성격의 데이터를 비교하기 좋으며, 시각적으로 3D 기술을 제공하여 화려함을 제공합니다.

데모 따라하기

0.모든 곳에서 더블-클릭시 항목 값별 차트정렬
예: 예산금액 기준으로 내림차순 -> 오름차순 -> 초기순서
1.차트 유형별로 클릭
유형 변경시 설정된 애니메이션 시간과 이징(easing) 함수 적용
2.데이터 갱신 버튼 클릭
각 차트별 데이터 랜덤 변경
3.데이터 감소 버튼 클릭
차트 수 감소
4.도형 자동변경 버튼 클릭
5초(옵션 설정) 단위로 차트 유형 자동 변경
5.옵션 창: h 키로 토글 뷰 처리
옵션 임의로 변경해 보기
*.패턴 타입인 경우
패턴 적용창을 활용하여 위치 지정 가능.(사용법: 클릭 후 마우스 이동시 해당 영역토글 설정, 최종 클릭시 영역설정 종료)

차트 타입

차트 유형 주요 내용 설정 옵션
누적 막대(StackBar) 동일 시리즈 데이터를 누적하여 막대차트 렌더링 yDim: { cluster: 'stackbar' }
누적 막대 100%(StackBar100) 동일 시리즈 데이터의 누적데이터에 대한 백분율 막대차트 렌더링 yDim: { cluster: 'stackbar100' }
그룹바(GroupBar) 동일 시리즈 데이터를 인접하여 막대차트 렌더링 yDim: { cluster: 'groupbar' }
누적 영역바(StackArea) 동일 시리즈 데이터를 누적하여 영역차트 렌더링 yDim: { cluster: 'stackarea' }
누적바 100%(StackArea100) 동일 시리즈 데이터의 누적데이터에 대한 백분율 영역차트 렌더링 yDim: { cluster: 'stackarea100' }
누적바(StackStream) 동일 시리즈 데이터를 누적하여 연속 흐름처럼 레더링 yDim: { cluster: 'stackstream' }

도형 타입

도형 타입 주요 내용 설정 옵션
커브 개별 차트를 상하로 커브를 그리며 시각화하며, 제공 및 설정된 옵션에 따라 수 겹으로 레더링 geometry: { type: 'curve' }
패턴 개별 차트를 문자등의 패턴으로 그리며 시각화. 패턴의 갯수에 따라 자연스러움은 차이 발생 geometry: { type: 'pattern' }
테이블 개별 차트를 테이블 형태로 그리며 시각화하며, 열(컬럼)수에 따라 행은 자동 설정 geometry: { type: 'table' }
구형 개별 차트를 구형으로 그리며 시각화하며, 제공 및 설정된 옵션에 따라 수 겹으로 레더링 geometry: { type: 'sphere' }
나선 개별 차트를 원기둥형의 패턴으로 그리며 시각화. 패턴의 갯수에 따라 자연스러움은 차이 발생 geometry: { type: 'helix' }
그리드 개별 차트를 n차원의 그리드 형태로 그리며 시각화하며, 열(컬럼) & 행의 수에 따라 면은 자동 설정 geometry: { type: 'grid' }

데이터 구조: csv, tsv , dsv 등의 화일타입 구분은 의미 없음

0.csv

sido,gu,1stYear,2ndYear,3rdYear,4thYear,5thYear
서울,서울본청,320465,319375,318383,323515,329571
서울,서울종로구,4628,4663,4166,3754,3525
서울,서울중구,4259,3979,3953,3837,3990
서울,서울용산구,4112,4241,4317,4433,4535
1.json

[
    {
        "coName": "비투아이랩",
        "children": [
            { "year": "2008", "amt_1": 10, "amt_2": 0, "amt_n": 540 },
            { "year": "2009", "amt_1": 20, "amt_2": 30, "amt_n": 440 },
            { "year": "2010", "amt_1": 30, "amt_2": 0, "amt_n": 550 }
        ]},
    {
        "name": "소프트다임",
        "children": [
            { "year": "2008", "amt_1": 0, "amt_2": 0, "amt_n": 30 },
            { "year": "2009", "amt_1": 0, "amt_2": 0, "amt_n": 220 },
            { "year": "2010", "amt_1": 0, "amt_2": 20, "amt_n": 0 }
        ]
    }
]

개발자 코딩 제공 부분

홈, 도움말, 데이터 갱신 및 감소, 좌우회전, 도형 자동변경은 개발자가 씨투아이 API등을 활용하여 임의로 코딩하여 제공한 UI 입니다.

X

판매본부

1,200