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

데모 따라하기

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

도형 타입

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

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

0.csv

geumNo,gubunCd,gubunNm,positionCd,positionNm,geumNm,geumType,geumTypeNm,processCd,processNm,gradeCd,gradeNm,isCheck1,isCheckClean,isCheck,isClean,carType,prodCd,prodNm,custNm,accCnt,checkValue,cleanValue,vsCheck,csClean,checkRestCnt,cleanRestCnt
83509-HB520,0,보관장,A01,A-01,DAMPER-A REST HINGY,M01,인젝션금형,2,양산,A,A 등급,NN,NN,N,N,HB,83509-HB520,DAMPER-A REST HINGY,,0,70000,50000,0,0,70000,50000
18431-RP800,0,보관장,A02,A-02,SOCKET-RECL,M01,인젝션금형,2,양산,A,A 등급,NN,NN,N,N,8Series,18431-RP800,SOCKET-RECL,국림피엔텍(주),50,50000,40000,50,50,49950,39950
88111-HM800,0,보관장,A03,A-03,HOUSING,M01,인젝션금형,2,양산,A,A 등급,NN,NN,N,N,8Series,88111-HM800,HOUSING,국림피엔텍(주),0,50000,40000,0,0,50000,40000
                        

개발자 코딩 제공 부분

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

X

판매본부

1,200