이번에는 기본 도형 그리기를 실습해 보도록 하겠습니다
extjs 포 에서는
새로워진 드로잉 패키지 를 제공해서
복잡한 그래픽도 브라우저 상에서 표현할 수가 있습니다
새로운 차트도 이러한 패키지 를 활용해서 렌더링이 가능합니다
간단한 도형 그리기를 통해 새로운 패키지 의 사용법을 알아보도록
하겠습니다
우선 패키지를 구성하고 있는 클래스에 대해 살펴보고 어떤 방식으로 서로
조화를 이루며 동작하는 스에 알아보도록 하겠습니다
보조적인 설명 도쿄를 보시면서
이해 하도록 하겠습니다 먼저 ext 드로 써피스 입니다
서피스 클래스 는 기본적인 드로잉 기술로
추상화 인터페이스를 제공 해서 각 브라우저에서 지원하는 드로잉 기술로
전환합니다
그 배분은 ex 3d 로 스프라이트 로 구성되고 있습니다
스프라이트 는 드로잉 표면에 그려지는
ntt 가 되겠습니다 드로잉 패 키스 관점에서 보면 원과 직사각 염
정사각형 텍스트 패스 등이 모두 엔티티 라고 말해 할 수가 있겠습니다
ext 드로우 컴퍼넌트 입니다
드로잉 패키지 에서는 컴퍼넌트 클래스가
ext 드로우 서피스 인스턴스 를 참조하고 있습니다
스트라이트 는 일반적으로 컴퍼넌트를 컨테이너 2 추가 하듯이
이렇게 써피스 객체 추가를 할 수가 있게 됩니다
간단한 설명을 마치고 실습을 진행하도록 하겠습니다
원과 직사각형으로 이루어진 지도 이치 아이콘을 만들어 보도록 하겠습니다
ext 드로우 컴퍼넌트 클래스 객체를 생성하면서 예제를 시작하도록
하겠습니다
이름은 맵 이내로 주도록 하고
ext 점 들어오지 점 컴퍼넌트 객체를 사용합니다
렌더 특 옛 바디와 가로 세로의 길이를 주도록 합니다
그 다음 옵션 은 뷰 박스 펄스 옵션입니다
뷰 박스 는 컴퍼넌트 크기만큼 스프라이트를 확장하는 옵션입니다
예제와 같이 빛 박스를 펄스 로 설정하면
도형은 설정 옵션에 따라서 크기가 결정되지만 트로 로 설정하면
부모 컴포넌트 영역을 모두 채울 때 까지 확장할 수가 있게 됩니다
지도 위치 아이콘의 머리 부분을 만들어 보도록 하겠습니다
써 클로 지정한 타입 숙성과 함께
d 본적인 크기 서식 설정 을 통해 스프라이트를 정의한 후 컴퍼넌트 에
아이템 집합체로 추가합니다
먼저 아이템을 명시합니다
이대 부의 타입은 써클
x y 좌표의 위치를 주도록 하고
원의 크기를 10으로 주도록 합니다
그다음 채워넣을 색깔을 명시합니다
이렇게 하시면 원을 스프라이트 안에
배치 할 수가 있습니다
다음에 핀 부분을 추가해 보도록 하겠습니다
피는 직사각형 스프라이트 로 만들 수 있으며
원 아랫부분에 위치하게 됩니다
즉사 각형 을 먼저 추가 해야 나중에 추가하는 원이 그 위에 나타나기
때문에
직사각형을 원 보다 먼저 만들도록 합니다
여기에 타입은 즉사 각형 그리고 x y 좌표
즉사 가 경 이기 때문에 너비와 높이를 줄 수 있습니다
약간 굵은 선 처럼 보이는 직사각형이 되겠습니다
여기에 색상을 주도록 합니다
그 다음 단계는 직사각형 스프라이트 에 약간의 회전 효과를 주어서 핀 의
모양을 좀 더 자연스럽게 합니다
이때 사용하는 옵션 은 로 테이트 가 되겠습니다
로 테이트 옵션의 d 그리 필드로 각도를 주게 되면
기울어진 모양으로 나타나게 됩니다
간단한 설명을 드리도록 하겠습니다
맵 핀 변수가 참조하는
드로우 컴퍼넌트 객체는 컴퍼넌트 에 추가하는 ex dd 로 스프라이트
기체 정보를 브라우저의 표현합니다
스프라이트 설정에서 타입 옥션은
스프라이트의 모양을 나타냅니다
타입은 종류에 따라 옵션이 조금씩 다릅니다
모든 타입의 공통으로 있는 xy 옵션 은 객체의 좌표를 나타냅니다
ex td 로 컴포넌트에서 스프라이트 의 위치가 결정되면
필 적성은 문자로 나타내는 채우기 속성값이 되겠습니다
직사각형 타입 의 객체는 위드
카이트 로 크기를 나타냅니다
원 스프라이트 는 래디어스 설정 옵션을 사용해
x y 에 해당하는 중심에서 원의 반지름 크기를 설정할 수가 있습니다
그리고 로 테이트 에 각도 7을 주는 것은
7도 회전하도록 설정한 것을 의미합니다
결과를 확인해 보도록 하겠습니다
이렇게 원과 막대가 나타난 모양을 보실수가 있습니다
간단한 기본 도형 그리기를 실습해 보았읍니다
간단한 도형 그리기 실습을 한 가지 터 해보도록 하겠습니다
exid 로잉 패키지는
기본적인 도영 뿐 아니라 텍스트도 그릴 수 있으며
텍스트는 여타 스프라이트 와 마찬가지 방법으로
설정하거나 조작이 가능합니다
텍스트 스프라이트를 정리하고 설정 하는 방법을 실습해 보겠습니다 먼저
텍스트 컴퍼넌트를 만듭니다
여기에 기본적인 옵션
이 컴퍼넌트의 크기와 6박스 펄스 설정을
주도록 합니다 그 아래 아이템을 배치합니다 타입은 텍스트를 사용하고
좌표값을 마찬가지로 주도록 합니다
그다음 글자의 색깔을
뒤로 옵션으로 주도록 합니다
그다음 폰트 스타일을 폰트 라는 필드를 통해 결정합니다
앞에 의미하는 것은 폰트 크기이며
뒤에 의미하는 것은 폰트 타입이 되겠습니다
2 3 텍스트의 내용을 명시합니다
텍스트 필드로 사용하시면 되겠습니다
이렇게 간단하게 텍스트 객체를 만드실 수가 있습니다
결과를 한번 확인해볼까요
여러분께서 정하신 텍스트 객체가 나타난 것을 확인하실 수가 있습니다
이번에는 그라데이션 적용을 해 보도록 하겠습니다
그라데이션은 그림을 더욱 사실적으로 표현하는
마지막 단계에 디자인 작업이라 할 수 있습니다
ext 드루 패키지로 생성한 스프라이트 는 이러한 효과를 손쉽게 적용할
수가 있습니다
앞선 예제의 지도 이치 아이콘의
그라데이션을 적용하고 스프라이트를 더 현실감 있게 표현해 보도록
하겠습니다
첫번째 예제에서 구현은 지도 이치 아이콘 을 불러와서 코드를 시작하도록
하겠습니다
이렇게 드로 컴퍼넌트를 선언하고
아이템이 첫번째 3 사각형과
두번째 원 으로 이루어져 있습니다
각각은 기본적인 색깔로 구성되어 있습니다
이렇게 구성되어 있는 코드를 사용 하도록 하겠습니다
결과를 잠깐 보면 기존의 수용했던 그림을 확인할 수가 있습니다
이제 핀 부분에 그라데이션을 먼저 적용해 보도록 하겠습니다
핀이 금속으로 이루어진 느낌을 받으려면 선형적으로 변하는 그라데이션으로
핀을 감싸야 합니다
이런 설정은 ex-d 드로우 컴퍼넌트 에
그라디언트 집합체 에서 기술하도록 합니다
그 라디안 드 집합체를 구성 해 보도록 하겠습니다
하단의 그라디언트를 추가합니다
id 를 먼저 줄수가 있는데 아이디는 문자열로 주도록 합니다
그라디언트 타입을 선형으로 진행하기 위해서
린 이 옵션은 주도록 합니다 그리고
각도를 주도록 합니다 각도는
사각형이 - 7도 기울어져 있으므로 그에 따라 -7 돌을 줍니다
그다음 컬러에 변화를 주기 위해서 이렇게 영과 100 을 사용해서
스 탑스 옵션으로 컬러 변화를 주도록 합니다
드 라 데 이전 적용은
이 휠을 속성 해서 스프라이트 id 를 참조해서 가능합니다
이 필에 채워서 있던 색깔을
아래에서 사용한 url
핑크 라디언트 즉 이 id 값을 사용해서 수정하시면
그라디언트 옵션으로 색이 채워지게 됩니다
이제 방사형 그라데이션을 적용해서
지도 핀 의 머리부분의 2차원적인 원 모양에서
더욱 입체적인 구체 로 나타내 보도록 하겠습니다
드 라디언트 배열의 두번째 아이템으로 설 정부 를 추가합니다
이렇게 핀트 라디언트 를 준 다음에
아이템으로 추가하시면 되겠습니다
이렇게 그라디언트를 주시고
id 를 주도록 합니다 타입은
레디얼 타입으로 당 사양입니다
센터 옥션과 포커로 옵션을 지도록 하는 데
각각 x 와 y 의 값으로 주도록 합니다
그리고 반 질에 맥 값을 주도록 합니다
마지막으로 위에서 했던 것처럼 3개의 색깔 변화를 주어서
스 탑스 옵션으로 구성합니다
지금까지 코드를 간략히 설명 드리도록 하겠습니다
그전에
휠로 주었던 색상을
그라디언트 로 바꿔주는 것을 잊지 마시기 바랍니다
아래서 생성한 헤드 그라디언트 값입니다
드라 데이 션은 클래스의 그라디언트
설정 옵션에서 정의합니다
스프라이트 에 적용하는 모든 그라데이션의 정의는 이곳에서 이루어져야
합니다
드라 데이 션에 타입에는
선염 과 방사형 이 존재할 수가 있습니다
두가지 타입 모두 아이디와 타이
그리고 스 탑스 객체 리터럴 을 전달 받을 수 있습니다
스 탑스 객체는 그라데이션이 특정 지점에 도착할 때
갖는 색상을 정해 합니다 이러한 설정은 퍼센트 즈를 의미하는 숫자 를
사용해
개별적인 도달 지점을 지정할 수가 있습니다
예제에서는 선형 타입의 그라데이션 에서
시작점 색상을
e 색상으로 정하고 국으로 끝마쳤습니다
필요한 만큼 스 탑스 옵션을 추가해서 원하는 그라데이션 스타일을 만들
수가 있습니다
그라데이션은 필 유 아래 를 사용한 구문으로
id 를 참조 에 원한 스프라이트 에 적용합니다
선형 타입의 그라데이션은 앵글 옵션을 추가로 선택할 수 있는데
적용된 모습을 지도 핀 부분에서 볼수가 있습니다
앵글 옵션 은 그라데이션이 진행되는 방 양각 을 정해 합니다
결과를 확인해 보도록 하겠습니다
이전에 구성했던 그림입니다
코드를 적용해 봤더니 이렇게 색깔이 좀 더 입체적으로 쾌한 되는 것을
보실 수가 있습니다
이번에는 패스 그리기 실습을 진행하도록 하겠습니다
ext 들어오 패키지는
페스타 입에 스프라이트 로 간단한 기하학적 정보를 표현할 뿐만 아니라
원하는 모양의 객체로 도 만들 수가 있습니다
svg 와 같은 비슷한 영역으로 정의 1
페 스 정보를 전달하면 이러한 스프라이트 가 만들어집니다
우선 직선으로 이루어진 간단한 모양의 스프라이트를
만들어보고 커버 패스 를 사용해 좀 더 복잡한 도형을 생성해 보도록
하겠습니다
단순한 수준으로 먼저 초원이 집을 그려보도록 하겠습니다
ext 드로우 컴퍼넌트를 생성해서
앞으로 정의하는 스프라이트를 추가합니다
이름은 하우스 가 되겠습니다
ex t 점수로 컴퍼넌트를 사용합니다
기본적으로 사용했던 옵션 4가지
화면에 뿌려주는 옵션과
가로세로 크기 6박스 펄스 옵션을 기본으로 추가합니다
여기에 아이템 쓰 를 구성하시면 나물이 가 되겠습니다
아이템의 2개의 직사각형을 추가합니다
타악기 푸른색과 초록색을 적용해
하멜 과 초안을 표현하는 바탕색이 되도록 하겠습니다
먼저 첫번째 직사각형 입니다
좌표는 x 배경이고
가로세로 크기는 500과 202 되겠습니다
2번 3 사각형 입니다
두번째 사각형 도 마찬가지로
그리도록 하고 좌표를 y 를 200 같은 크기로 주도록 하겠습니다
색상도 채워 넣는 것을 잊지 마시기 바랍니다
이제 3탄 결과를 확인해 보도록 하겠습니다
2개의 직사각형이 이렇게
판넬 색과 연도 색으로 표현되는 것을 보실 수가 있습니다
이 위치에 다가 이제 집을 그려보도록 하겠습니다
즙을 그리기 위해 패스 타입의
스프라이트를 추가합니다 파 입은 패스 그리고
패스 를 세워 널 색깔을 주도록 합니다
패스를 모두 구성한 후 내부를 세워놓는 색상이 되겠습니다
그다음 실제 패스는 검은색으로 주도록 하겠습니다
패스의 굵기를 지정하기 위해 스트로크 위스 옵션을 줍니다
이때 앞뒤 쌍 따옴표 를 주는 것을 주의하시기 바랍니다
이제 패스 를 구성합니다 테스는 배열로 구성하며
끝에 조인 메소드로 마무리를 하도록 합니다
내부를 문자열 스페이스 로 마무리를 하시면 되겠습니다
이제 패스 를 구성합니다
내부 패스 를 애무로
싹 점 을 구성합니다 그리고 x y 좌표가 순서대로 나오는 형태입니다
두번째 패스 를 지정하고
타입은 l 로 설정하겠습니다
소 문자의 립니다 나머지 패스 를 이렇게 지정 해 놓도록 하겠습니다
중간에 소문자 에도 타입이 존재하는 것을 확인하실 수가 있습니다
팬이 이 좌표를 따라
스트록을 그리면서 진행하는 형태가 되겠습니다
페 스 스프라이트 는 패스 설정 옵션을 제외하고
여타 스프라이트 와 사용방법이 유사합니다
테스 설정은 각기다른 패스 그리기 명령을 문자열로 전달 받습니다
이런 방식이 있고 선이 그려지는 방법과 방향이 결정됩니다
em etc 않은 내용은 대문자로 지시하며
그리기 기능을 사용하지 않은 상태에서
x 와 의자 표 와 대응하는 지정 위치로 그리기 펜 을 이동하는 명령
입니다
팬에 위치는 아래의 처럼 변경되게 됩니다
이때 소문자 m 도 존재합니다
소문자 m 은 현재 위치에서 명시한 만큼 팬을 이동시킵니다
팬을 43 형으로 지시하며
x 43 와 이엉 만큼 진행하며
흐리기 동작은 진행되지 않습니다
나머지 엘로 수정한 좌표 들은
그리기 동작이 진행되면서 패스가 그려지게 되겠습니다
결과를 한번 확인해보도록 하겠습니다
이렇게 집 모양을 보실수가 있습니다
팬이 이전부터 진행됐으며 이 방향으로
좌표를 변경하며 그려진 것입니다
이번에는 곡선으로 패스 스프라이트를 사용해서 표현해 보도록 하겠습니다
베지어 곡선을 사용해 달 모양의 스프라이트를 만들어보겠습니다
먼저 청색 의 직사각형 스프라이트 로
ext 트로 컴퍼넌트를 생성하면서
예제를 시작하도록 하겠습니다 이렇게 문이라는
ext 트로 컴퍼넌트를 생성합니다
여기에 즉사 가경 하나를
배치합니다 바탕색을 표현하는
식사 각형 이 되겠습니다
결과를 한번 보면 이렇게
남 세계의 바탕화면이 그려집니다
그다음 패스 스프라이트를 추가하고
싹 점 을 명시합니다 패스 스프라이트를
이렇게 추가하시고
주인을 잊지 않습니다
그리고 마무리를 합니다
시작점이 명시가 되었습니다
첫번째 베지어 곡선을 사용해
달 모양 안쪽에 를 나타내 보도록 하겠습니다
베지어 곡선 은 눈에 보이지 않는 제어 점 을 서 내에 종료 점 의
추가에
동작합니다 국선 의정부와 방향은
제어 점 에 영향을 받습니다
c 명령어를 사용하시면 되겠습니다
c 명령어로 3개의
좌표를 주도록 합니다
첫번째 xy 는
짝 점 을 의미합니다 2번 clx 와인은
종료 지점 을 의미합니다
마지막은 선이 종료되는 지점을 식별합니다
두번째 호도 마찬가지로 c 루
명세 합니다 마치 c 처럼 생긴 곡선을
2개 그리는 동작의 되겠습니다
결과를 진행해 보도록 하겠습니다
이렇게 두개의
첫 번째 후 바깥쪽 두번째 호 가 완성되면서
내 역모를 채워 넘는 동작의 수행되었습니다
이번에는 스프라이트 에 전환과
상어 적용을 실습해 보도록 하겠습니다
경우에 따라서 데이터나 드림의 내부 숙성과 영계의 그려진 그림을 변형
해야 합니다
이유가 무엇이든 간에 드로잉 패키지는 이렇게 변경해야 하는 스크 라이트의
특성을
즉시 또는 순차적으로 천 쉽게 재정이 할 수가 있습니다
간단하게 즉사 각형 을 만들어 보고
속성을 변경하면서 학습을 시작해보도록 하겠습니다
첫번째로 알아보는 메소드는 ext 드로우 스프라이트 클래스 에 3
어트리뷰트 의 메소드 이며 그 다음은 애니메이트 메소드를 살펴보도록
하겠습니다
먼저 사각형을 컴퍼넌트 안에 스프라이트 로
적용해 보도록 하겠습니다 사각형 을 정의하는 방법 입니다
ext 드로우 스프라이트 객체를 사용하며
기존에 배웠던 것처럼 8 꽈 x y 좌표 그리고 크기 색상을 채워 넣도록
합니다
이제 이 객체를 표현해 줄 수 있는 컴퍼넌트를 명시합니다
컴퍼넌트를 ext 드로우 컴퍼넌트 그리고 4개의 기본 설정과 아이템을
위에서 설정한 스프라이트 로 수정하면 간단히 구성이 되겠습니다
여기까지의 결과를 확인해 보도록 하겠습니다
사각 겸 하나가 화면에 보이는 것을 확인하실 수 있습니다
속성 값을 변경해 보도록 하겠습니다
이렇게 색상 값을 먼저
수정 하시고 다시 한 번 결과를 보면 약간의 곤색 으로 된 사각형을 보실
수가 있는데 이 상태로 시작해보도록 하겠습니다
첫번째로 설정 객 3 식사 각형 스프라이트를 참고해서
직사각형 면적을 최대로 확대 해 보도록 하겠습니다
셀 어트리뷰트 메소드는 높이와 너비를
3배로 확대 할 수가 있습니다
이렇게 추가하시면
스케일 필드 를 사용해서 x y 값을 주시면 3배로 확대가 됩니다
결과를 확인해 볼까요
사각형이 커즌 것을 확인하실 수가 있습니다
이번에 적용할 속성은 스프라이트 의 회전과 색상변경 입니다
3 어트리뷰트 옵션으로
로 테이트 를 사용합니다
이때 d 그리 30 을 주면
스프라이트를 30도 회전 함과 동시에 아래의 휠 옵션을 통해
색상을 바꿔 넣습니다
결과를 확인해 보겠습니다
이렇게 색깔이 초록색으로 바뀌었으며
30도 기울어진 형태로 사각형이 나타납니다
그 다음에 스프라이트 에 위치 속성을 변경하도록 하겠습니다
트와이스 레이트 라는 옵션을 사용합니다
x 250 을 주면 이 픽셀 만큼 스프라이트를 이동합니다
결과를 확인해 보도록 하겠습니다
지정한 좌표 대로 결과가
사각형이 이동한 것을 보실 수가 있습니다
이러한 각각의 변화는
ext 유틸을 애니메이트 클래스 에 포함된 기능을 사용해서
하나의 애니메이션 동작 으로 만들 수가 있습니다
설정 객 3 에서 간단하게 애니메이트 메소드 를 전달하면
사용이 가능합니다 애니메이션 옵션 을 진행해 보도록 하겠습니다
이렇게 애니메이트 라는 메소드를 사용하고
먼저 색깔을 채워넣는 옵션을 줍니다
색깔을 다른 색으로 바꾸게 되죠
그 다음에 애니메이션이 동작할 밀리 세컨드 단위의 시간을 줍니다
2초 동안 애니메이션이 동작합니다
콜백을 통해 애니메이션이 진행된 후에 동작을 명시할 수 있습니다
여기에 사각 경을 60도 회전 했으며 그 동작이 마무리되는 것을 확인할
수 있습니다
직사각형 은 초록색 에서 빨간색으로 서서히 변하는
60도 회전하는 동작을 수행하도록 설계가 됩니다
결과를 확인해 보도록 하겠습니다
다시한번 확인해 보도록 하겠습니다
먼저 색깔이 애니메이션 되요 변화되는 것을 보실 수가 있으며
마지막에 애니메이션이 끝난 후
도형이 60도 더 회전하는 것을 보실 수가 있습니다
이처럼 스프라이트 는 다양한 이벤트로 사용자와 상호 작용하면서 생성한
모든 객체가 반응할 수 있습니다
다음 예제를 통해서 마우스를 스프라이트 위에 올려놓거나 클릭할 때 각기
색상을 변경하고 크기를 두 배로 변경 않은
애니메이션을 설정해 보도록 하겠습니다
새로운 파일을 열고
내용을 설계하도록 하겠습니다 먼저 사각형을 만듭니다
이전에 사용했던 것과 동일하게 사각형을
만들도록 하겠습니다 여길 있은 옵션을 추가합니다
그럼 여러분이 원하시는 이벤트를 설정 하실 수가 있습니다
첫 번째 마우스 오버 입니다 마우스 오버 는
마우스 가 도형 위로 올려 질 때 수행하는 액션을 취하도록 되어 있습니다
마우스 가 위로 올라가면
색상을 이 색상으로 바꾸도록 설계합니다
두번째는 마우스 아웃 옵션입니다
마우스 아웃은 마우스가 위에 있다가 그 도형을 떠날 때 수행되는 액션이
되겠습니다
이때는 다시 색상을 원래 색상으로 변경 합니다
마지막으로 마우스 업 입니다
마우스 업은 도형 위에서 마우스를
왼쪽 그리 카누 떼는 순간에
수행되는 액션이 되겠습니다
여기에 애니메이션 효과를 주도록 하겠습니다
누르고 떼는 순간 도형에
크기가 바뀌며 그 애니메이션은 2초 동안 수행 되겠습니다
이렇게 간단하게 3가지 액션을 리스너 로 구성해 보았습니다
그다음 컴퍼넌트를 배치해서
이 스프라이트를 뿌려줍니다
이렇게 만든 결과를 확인해 보도록 하겠습니다
작은 도형이 위치합니다 여기에 마우스를 먼저
올려놓도록 하겠습니다 그러면 색깔이 바뀌는 것을 확인하실 수가 있습니다
마우스를 떠나 보겠습니다 다시
색깔이 돌아오는 것을 확인하실 수가 있습니다
이렇게 마우스 오버 와 아웃을 구현하는 결과입니다
이제 클릭을 해 보겠습니다 클릭을 하면 여러분이 지정한 대로 애니메이션이
수행되며
애니메이션의 동작은 가로와 세로 크기를 늘려주는 동작의 되겠습니다
다시한번 결과를 확인해 보도록 하겠습니다
클릭하면 이렇게 커지는 애니메이션을 보실수가 있습니다
이번에는 외부 데이터를 사용해
낙 때 차트를 만들어 보는 실습을 진행하도록 하겠습니다
막대 차트 는 양축 에 데이터 정보를 나타낼 때 매우 유용한 방법이
되겠습니다
예제를 통해서 막대 차트를 만드는 방법을 알아보고
싹 와 로부터 비동기로 데이터를 가져와서 차트를 만들어 보도록 하겠습니다
차트를 가져올 수 있는 웹 서버가 필요합니다
그리고 제이슨 파일로 이렇게 데이터를 미리 구성합니다
네임과 벨류 로 설정된 데이터 입니다
쓰 이 데이터를 막대 차트 로 뿌려 보겠습니다
로딩 데이터를 정의하는 모델을 먼저 명시합니다
모델의 이름은 차트가 되겠고
박자는 ext 데이터 모델을 확장합니다
이 여기에 두 개의 필드 네임 필드와 벨류 필드를 사용하는
모델을 먼저 만듭니다
제공된 제이슨 파일의 네임 필드와 벨류 필드에 타입 과 일치합니다
아작 쓰 프록시로 스토어 를 생성합니다
스 트 워 데이터로 이렇게
데이터 스토어를 만들고
모델은 위에서 생성한 차트 모델을 사용합니다
이제 프록시 옵션을 주도록 합니다
아자 스 타입이며 유아 렐은 제공된 3이 스타일입니다
리더 옵션 은 타입은 제이슨 으로 명세 하며
루트는 데이터 필드가 되겠습니다 제이슨 타일의 루트 필드를 참고하시면
되겠습니다
이렇게 프록 쇼를 간단하게 생성 하실 수가 있습니다
그리고 자동 로드를 투로 설정 하시면 마무리가 됩니다
이제 픽 레이아웃으로 패널을 하나 생성해서 눈썹의 바디로 렌더링합니다
이렇게 픽 레이아웃을 구성합니다
아이템을 채워 넣도록 하겠습니다
패널의 아이템 집합체로 기본적인 차트를 추가합니다
차트는 두 번째 단계에서 수행한 스 트 워 데이터와
연결되어야 합니다 차트의 구성 요소로는
늄 l x 축과 카테고리 추 다 가 필요합니다
가로 세로의 눈금 과 실제 막대 차트를 구성한 낙 때 가 되겠습니다
아이템 스를 이렇게 구성합니다
2개의 축과 하나의 막대로 되어 있습니다
그리고
마무리를 하시면 되겠습니다
예제에서는 바로 축가 세로 축을 생성해 차트 간 경계를 9분했습니다
차트는 4가지 타입의 축 설정 이 가능하며
숫자 나 범주 시간 게이지 타입으로 나타낼 수 있습니다
여기선 늄 에릭과 범 줄 카테고리 를 사용했습니다
시리즈는 차트에서 나타내는 데이터 포인트의 렌더링 과 관련이 있습니다
예제에서는 ex-d 차트 시리즈 알파
클래스를 사용해 막대 차트 를 생성했습니다
그리고 각각 이 필드에는 실제로 나타내
데이터를 필드와 제목으로 표현한 것을 보실 수가 있습니다
이렇게 만든 막대 차트를 이제
화면으로 확인해 보도록 하겠습니다
막대 차트 가 나타났습니다
새로 축은 네임 필드가 5가지 표현된 것을 보실 수가 있으며
아래는 밸류 로 실제 데이터 값을
축으로 표현한 것을 보실 수가 있습니다
그리고 실제 데이터는 이렇게
막대 차트 로 구성이 된 것을 보실 수가 있습니다
여러분이 받아본 제이슨 데이터를 좀더 보기 쉽게 표현할 수가 있습니다
이번에는 로컬 데이터 로
파이 차트를 만들어 보는 실세 벨 진행해 보도록 하겠습니다
파이트 쇼트는 일반적으로 사용하는 차트 분류 중 하나이며
데이터 비중을 나타내는 데 있어서 매우 효과적입니다
각 슬라이스는 전체 데이터 집합의
합계 에서 차지하고 있는 비율에 따라 자신의 크기를 나타냅니다
이번 예제에서는
저장소에 있는 프로그래밍 언어 분포도를 파일 차트로 나타내는 방법을
알아보도록 하겠습니다
데이터 연결을 위해
ext 데이터 모델을 먼저 싸 칵 이전에 만들도록 하겠습니다
이름은 프로그래밍 냉기 수입니다
데이터는 ext 데이터 모델을 사용하도록 합니다
데이터는 2개의 필드로 이루어져 있습니다
언어와 그 언어가 차 세안은
퍼센트 에이즈 의 비율입니다
이제 차트에서 나타내야 하는 데이터를 정리하도록 하겠습니다
데이터에 종류는
합쳐서 100이 되도록 퍼센트 값을 구성하도록 합니다
이렇게 여러가지 의 데이터를 미리 준비 하여 각각의 랭 기즈 이름과
해당하는 퍼센트 에이즈를
정수로 수정 하도록 합니다
2 3 데이터가 준비가 되었습니다
ext 데이터 스토어 를 생성해서
데이터 집합을 로드 하도록 하겠습니다
차트에서는 이렇게 가져온 스토어 를 사용하도록 합니다
이렇게 렌게 이지스 투어 라는 데이터 스토어를 만들어 줍니다
모델은 위에서 생성한 프로그래밍 은행 기지 모델 를 사용하고
데이터는 즉 전에 만든 랭귀지 에 데이터를 사용합니다
2 3 패널을 만들도록 하겠습니다
패널 아이템으로 ext 차트에
설정 객체가 포함된 ext 패널을 정의합니다
기본적인 패널 정보를 수정합니다
가로세로 각각 6배 꽈 400 쓰리 며
패널의 제목을 지점 하여 줍니다
레이아웃은 핏 레이아웃을 사용합니다
여기에 아이템을 사트 로 한 가지 아이템으로 배치를 합니다
그다음
랜더 득 옛 바디로 마무리를 하시면 되겠습니다
이제 세번째 구현 단계에서 생성한 차트를
스토어 와 연결합니다
차트 아이템의 스토어 를 추가해줍니다
그리고 위에서 생성한
맹기 지스트 워 데이터를
수정합니다 다음 과정으로
ext 차트 시리즈 파일 객체를 생성해서 데이터를 파이 차트로 나타내
보도록 하겠습니다
파이 차트 에서 각 슬라이스가 차세 하는 면적은 스토어에 퍼센트 에이즈
필드 값을 기준으로 계산 되도록 지정합니다
추가해서 시리즈 를 선언합니다
타입은 파이 로 지정하고
비중을 나타내는 값을 퍼센트 g 로 수정합니다
2 3 파이 스타트를
렌더링 하게 됩니다 하지만 기본적으로
차트에는 아무 레이블도 없으므로
슬라이스가 나타내는 데이터가 무엇인지 알 수가 없습니다
레이블 속성을 사용해서
닭 슬라이스의 레이블을 추가할 수 있는데 몇 가지 다른 속성을 포함해서
다음과 같이 추가 합니다
먼저 레이블 필드를 만듭니다
디스플레이와 컨트롤 에스트 그리고 필드
옵션을 갖추도록 하겠습니다
디스플레이 속성 에서 로 테이트 값은
레이블이 슬라이스 에 펼쳐진 영역을 따라 나타남 을 의미합니다
콘트라스트를 속성은 트루 로 설정되어 슬라이스의 배경색이 따라 레이블을
읽기 쉽도록 색상을 적절히 바꿔줍니다
그리고 표 일대는 레이블에 이 나타날 문자를 지정합니다
이렇게 해서 생성된 결과를 확인해 보도록 하겠습니다
파일 쇼트 1 를 여러분이 눈으로 확인할 수가 있습니다
그리고 차트에 이렇게
렝 깅 스 이름이 레이블로 다테 나 있는 것을 보실 수가 있습니다
각각의 면적은 퍼센트 레즈 값에 따라 파이 차트로 표현된 것을 보실 수가
있습니다
레이블도 여러분이 지정한 대로
파이 차트 의 방향에 따라 맞춰서 구성이 돼 있으며
색깔도 각각 서로를 9분할 수 있도록 다르게
수정된 것을 확인하실 수가 있습니다
이제 몇 가지 더 옵션을
실습해 보도록 하겠습니다
마우스가 가리키는 슬라이스를
강조해 보는 하이라이트 효과 입니다
슬라이스의 마우스를 올려 놓았을때
스타일 효과가 발생하는 기능은
하이라이트 설정 옵션으로 손쉽게 구현할 수가 있습니다
설정 부안으로 적용할 스타일이 있는 세그먼트 객체를
l 롤로 전달합니다 이렇게
하이라이트 옵션을 줄 수가 있습니다
맞은 40 을 적용해서
마우스가 위치한 슬라이스가 개별적으로 떨어져 나와
부각되어 나타내게 할 수가 있습니다
하이라이트 결과를 확인해 보도록 하겠습니다
기본적인 외모는 같습니다
하지만 여기에 마우스를 갖다대면 이렇게 확대가 되는 것을 확인하실 수가
있습니다
두번째는 슬라이스 크기에 따른 길이 조정 입니다
파이 차트 는 모델 필드의 값에 따라 슬라이스 길이를 조절할 수 있는
기능이 있습니다
예제에서는 퍼센트 지 필드를 사용 했지만 다른 필드를 선택해 설정할 수도
있습니다
랭스 필드 라는 옵션으로
퍼센트 지를 지정 해 보도록 하겠습니다
이렇게 하면 퍼센트 에이즈 값에 따라 8 차트 의 길이를 다르게 표현 해
줄 수가 있습니다
결과를 확인해 보도록 하겠습니다
이렇게 파이 차트 가 가진 속성이 파이 차트 에 차세 하는
비율과 파일 차트에 길이 두 가지로 나타낼 수 있습니다
닭 슬라이스를 과장되게 표현함으로써 강조 효과를 줌과 동시에
랭스 필드 에서 다른 필드를 사용하면 하나의 그래프 로써
이렇게 두가지의 데이터 값을 혼합해서 나타낼 수가 있습니다
이번에는 연속으로 갱신되는 데이터로
선형 차트를 만들어 보는 세습을 진행하도록 하겠습니다
선영 차트는 가장 많이 사용하는 그래프 중 하나이며
실시간으로 갱신이 이루어 지는
데이터 변동 추이를 쉽게 알아볼수가 있습니다
1초마다 서버에서
레코드를 가져온 후에 그래프에서 새로운 포인트를 나타내도록 선형 차트 를
생성해 보도록 하겠습니다
랜덤한 값을 발생시켜 이를 모니터링 한다고 가정하고
차트에서 나타내 보도록 하겠습니다
extjs 코드는 php 스크립트로 만들어진 데이터를 가져와서
탁 레코드를 처리할 수가 있습니다
먼저 스크립트를 사전 생성 합니다
커런트 카운트 라는 단일 매개 변수를 전달받아서
랜덤 베 이유 필드 값이 다음에 오는 값으로 올바르게 채워지는 즈
확인합니다
실제 데이터 소스를 조회 않은 경우라면 확인 과정은 생략 됩니다
이렇게 두가지 값으로 구성된
pa gp 데이터를 생성할 수 있도록 준비 합니다
이제 랜덤 벨류 데이터 객체를 나타내 목적으로
ext 데이터 모델을 생성합니다
이름은 랜덤 레이트 입니다
모델을 확장하고
필드를 두 가지로 추정합니다
하나는 퀀트 카운트 이며 하나는 랜덤 밸류 입니다
php 파일에서 생성한
두가지의 데이터와 일치하도록 이름을 맞춰주시면 되겠습니다
차트와 연결 하려면 우선 ext 데이터 스토어 를 생성해야 합니다
스토어에서는 준비 과정에서 언급한 php 파일을 참조하도록 설정하고
b poor 로드 이벤트 에 반응하는
핸들러 함수를 추가하는 동작을 수행 해 주어야 합니다
함수 동작으로 커런트 카운트 변수가 증가하고
아작 쓰 요청에 매개변수로 덧붙혀 쓰게 됩니다
커런트 캄 트와 디스플레이 카운트에 최대값을 나타내는 두 가지 변수를
먼저 생성합니다
그다음 스토어 를 생성합니다
모델은 위에서 생성한 렌덤 레이트를 지정합니다
그다음 프록시 정보를 지정합니다
일반 적인 아작 스타 입에 프록시 를 지정하는 방식과 동일합니다
유아 레 대해서는 기존의 만든 php 파일을 수정합니다
리더 낸 3 있음과 루트는 데이터를 추천하여
데이터의 위치를 지정합니다
오토 노드의 값은 트루 로 수정하여 자동 로딩 될 수 있도록 합니다
잊을 리스너를 추가해 보도록 하겠습니다
첫 번째는 비프 올로드 라는 리스너 입니다
b poor 로드 이벤트에 커런트 카운트 변수를 증가하고
아작 쓰 요청에 매개변수로 덧붙여지는 동작이 보이게 됩니다
블로드 리스너를 추가합니다
차트는 계속해서 전달받는 데이터에서
마지막 20개의 값을 나타내기 위해
x 축의 최소 깝권 와 최대값을
매순간 행신 합니다
이 갱신 과정을 코드로 구현해 보도록 하겠습니다
먼저 차트에서 커런트 카운트 값을 받아오는
부분을 작성합니다
그다음 커런트 카운트에 최대 값을 다시 구하는 부분이 되겠습니다
그 다음엔 커런트 카운트에
최소값을 구하는 분이 되겠습니다
마지막으로 차트를 다시 그려주는
함수를 우리 들어 5로 추가하시면 되겠습니다
이렇게 하면 차트가 그려지는 최소 깝권 최대값이 매 순간마다 바뀌면서
사태가 이동하는 것처럼 보이도록 구현됩니다
다음 과정은 ext 패널의 생성이 되겠습니다
패널 내부의 ext 차트 인스턴스는
위에서 생성한 수 투어와 연결되어야 합니다
패널의 기본적인 정보를 생성합니다
그리고 레이아웃은 핏 레이아웃을 지정합니다
이제 아이템을 교체합니다
아이템은 파트로 구성되어 있으며
위에서 생성한 랜덤 레이트 스토어 를 수정합니다
이제 시리즈 를 구성합니다
쓰리 즈 에서 라인 타입으로 차트를 정의합니다
그리고 x 필드와 이 필드를 갖기
수정한 2개의 필드로 구성합니다
이렇게 시리즈 옵션을 구성하시면 되겠습니다
여기까지 구현 했으면 차트 의 축이 숫자와 함께
눈금선 으로 나타나게 됩니다
y 축은 랜덤 벨류 축과 패드와 연결되서
왼편에 위치하고 커런트 카운트 필드는 아래 축에 나타나도록 축 을
지정합니다
먼저 랜덤 벨류 축을 구성하는 코드 가 되겠습니다
포지션을 왼쪽으로 수정하며 필드를 지정하는 분과
축에 제목을 지정하는 부분들을
보실수가 있습니다
그 다음은 아래쪽에 커런트 카운트 필드를 나타내는
특설 정 부분이 되겠습니다
이렇게 하여 아이템을 배치를 마치고
패널을 마무리합니다
마지막 단계로 3 인터벌 함수를 사용해서
반복적으로 동작하는
기능을 구현합니다 3 인터벌 함수는
스토어 l 로드 메소드로 호출한 값을
마지막에 로드한 레코드 다음으로
덧붙이는 또 다른 함수를 전달 받습니다
이렇게 스투 억압과
에드 레코드 옵션을 통해
수정하시면 되겠습니다
제 1부 편적 인 방식으로 선형 차트를 만들어 봤읍니다
두 개의 축은 랜덤 벨리 5에 모델에서
정수영 필드와 연결되어 채 트에 시리스 라인 클래스 로 표현됩니다
기능이 동작하기 까지 대부분 작업은 스토어에
1 로드 핸들러를 통해서 처리가 됩니다
스토어에서 로드가 이루어질 때마다 새로운 레코드 값이 추가가 되면서
x 축에 둔 금선 숫자를 왼쪽으로 한칸 씩 이동하게 됩니다
차트는 옆으로 이동한 효과가 나타납니다
이런 효과는 ext 차트에 클래스 2x ics 속성을 통해서
x 측 인스턴스 를 참조해서
가능하게 됩니다
그 후 차트가 다시 그려지면 미니멈 값과 맥시멈 값을 갱신 하게 됩니다
핵심적인 내용 중 하나는
로드 메소드로 전달되는 에드의 레코드의 트루 설정 부가 되겠습니다
이 부분으로 레코드는 데이터 집합의 추가 가 되겠습니다
기본 옵션으로 설정하면
이미 존재하는 데이터 집합을 새로운 값으로 교체하게 됩니다
이렇게 생성한 차트를 확인해보도록 하겠습니다
x 와 y 축이 나타나게 됩니다
그리고 값들이 나타나게 됩니다
에러를 먼저 잡아 보도록 하겠습니다
모델을 있으나 안으로 구성 하셔야 합니다
이렇게 1초마다
랜덤 밸러 값이 생성되어
차트에 선형으로 그려지는 것을 보실 수가 있습니다
이때 값이 꽉 샀을때
다음으로 넘어가는 즈 확인해 보도록 하겠습니다
이렇게
x 측이 갱신이 되면서
선형 사트 가 옆으로 이동하는 것처럼
효과가 나타난 것을 보실 수가 있습니다
이렇게 연속적인 값을
선형 차트로 밝기나 셀 수가 있습니다
이번에는 레이블 색상 측 서식 등을
사용자정의 해보는 실습을 진행하도록 하겠습니다
차트에서는 몇 가지 간단한 설정만으로
더 멋진 차트를 만들 수가 있습니다
다양한 테마와 색상 그리드 를 적용해서
막 100 차트 를 더욱 알아보기 쉽게
나타내 보도록 하겠습니다 먼저 웹 서버가 있어야 예 3 에서 필요한
3승 파일을 로드 할 수가 있습니다
파일은 기존에 사용했던 파 차트 제이슨 파일이 되겠습니다
이 데이터를 가져오려는 목적으로
모델을 먼저 정의합니다
ext 데이터 모델을 사용합니다
그리고 네임 필드와 벨류어 필드를
가져올 수 있도록 데이터 모델을 정의합니다
아작 쓰 프록시 설정 으로
스토어 를 생성합니다 모델은 위에서 생성한 차트 모델을 사용하고
프록시는
기존에 있던 바 차트 제이슨 파일을 url 로 지정하여
아작 쓰 로 로딩할 수 있도록 합니다
그리고 자동 로딩 옵션을 트루 로 설정합니다
이제 차트 를 생성해서 스토어 를 연결한 후
문서의 바디로 렌더링합니다
이렇게 위에서 생성한 스토어 파일을
연결하고 애니메이션을 틀어 로 설정합니다
ext 겟 바디로 마무리하여
차트 생성 을 마칩니다
여기까지 진행한 코드에서 이 3 테마를 추가하겠습니다
테마는 붉은색을 나타내는
기존 생성된 레드 라는 테마를 사용합니다
그다음 백그라운드를 지정합니다
백그라운드 는 그라데이션 효과를 주는 것으로
이렇게 30도의 각도를 가지고 두가지의 색 흰색에서 붉은색으로 변하는
그라데이션 효과를 주도록 하겠습니다
이 단계에서는
채 트에 테마 속성을 변경하는 방법을 설명하고 있습니다
테마 설정 옵션 은 변경을 원하는 색상을 문자열로 전달 받습니다
전체 테마에 종류는 ext2 점 차트 점 채 틀을 설명하는 문서 있어
확인이 가능합니다
기본 테마는 베이스로 설정이 되어 있지만
사용자 정의 에 사용할 수도 있습니다
배경화면은 백그라운드 설정 옵션을 사용해서 그라데이션을 적용합니다
그라데이션은 ex t 점수로 점
컴퍼넌트 로 생성할 수가 있습니다
냉 그 속성으로 왼쪽 상단에서 오른쪽 하단으로
그라데이션을 적용할 수가 있는데
속성 값은 그라데이션이 변화는
방향의 각도를 나타냅니다
스 탑스 객체는 색상 스타일의 정보를 갖고 있습니다
예제에서는 흰색으로 시작해서
분홍색으로 서서 에 변화가 이루어 지게 되겠습니다
이제 채 트 x 시스
즉 설정이 필요합니다 다음과 같이 뉴 메일이 카테고리 측 옵션을 추가
하게 되겠습니다
이렇게 두 축을 위한
x 옵션을 추가합니다
첫 번째는 바닥에 위치 10
벨 6가 밸류 필드를 나타내는 축이 되겠습니다
두번째는 왼쪽에 카테고리를 나타내 축이 되겠습니다
가로축은 숫자 값이 나타나도록 설정하고
맥시멈 35 와 미니멈 에 값을 갖게 정의합니다
메이저 tx 스텝과
- tx 스텝 옵션 은 3 형사에게 나타내는 눈금선 을 정의하는데
예제에서는 주 등 끔 섬마다 5개 쓰게
보조 둔 금선 이 나타나도록 합니다
기타 설정은 ext 차트 xs 점 x 시스 클래스 에서 사용이 가능합니다
막대 차트 가 나타나도록 시리즈 설정에서 타입을 추가하도록 하겠습니다
시리즈는 바타입 으로 설정하시면 되겠습니다
예제에서는 ext 체스트 l 레이블 클래스의 필드 속성을
벨류 로 설정해 각 막대 차트 가 갖고 있는 컬럼 값을 나타내도록 이렇게
설정하였습니다
생성한 차트를 확인해 보도록 하겠습니다
이렇게 차트가 생성된 것을 확인 하실 수 가 있습니다
먼저 차트에 스타일을 보시면 붉은색 계열로 수정이 되었습니다
테마 에서 측정한 값이 되겠습니다
바탕색을 보겠습니다 인 색부터 분홍색으로 변하는 그라데이션 바탕색이
수정되어 있습니다
그리고 지정 안축 때로
차트가 나타낸 것을
배 유와 내인 필드로 확인하실 수가 있습니다
테마를 제거 해 보도록 하겠습니다
이렇게 레드 테마 가 아니라 기본 테마를 사용하면
베이스 테마가 적용 되어
막대에 색깔이 기본 색으로 바뀌는 것을 확인하실 수가 있습니다
이번에는 레이블 색상 축 서식 사용자 정의에서
테마를 사용자정의 로 생성하여 적용하는 방법에 대해 실습해 보도록
하겠습니다
만들어져 있는 차트인 경우
레드 테마 가 적용되어 붉은색 계열로 나타난 것을 확인하실 수가 있습니다
이것은 기존의
선언되어 있는 레드 라는 테마를 사용하였기 때문에 가능한 일입니다
이러한 테마를 사용 제가 직접 생성해서
적용할 수도 있습니다 테마를 만들어 보도록 하겠습니다
첫줄에 다가 차트 테마에 마이 테마로
선언하도록 하겠습니다
이마이 테마는 ext 차트 테마에
베이스를 상소 카도 록 합니다
그다음 컨스트럭터 를 이렇게 생성합니다
내부에는 색상을 지정할 수 있도록 정보 돌을 집어 넣습니다
축에 대한 색상 축에
채워넣는 색 선 회색 그 다음에
여러가지 색깔들을 배열로 써
여러분이 구성 하실수가 있습니다
이 코드 일부는 완성된 테마 코드 아니지만
맞춤 테마 를 생성하는 방법을 설명하고 있습니다
이렇게 만들어진 마이 테마를 이제 적용 해 보도록 하겠습니다
간단하게 아래에서 사용한
레드 라는 테마 대신에 마이 테마를 지정 하시면 되겠습니다
이렇게 지점 안 테마를 확인해 보도록 하겠습니다
붉은색 계열로 나타나던 테마입니다
이것이 사용자정의 테마 를 적용했을 때
차트입니다 여러분이
마이 테마를 빡이 나시고
알맞은 속성 값들을 원하는 색상으로 시청하시면 사용자 정의의 여러가지
테마들을 만들어서 적용 하실 수가 있습니다
이번에는 차트 컴퍼넌트 에 이벤트를 생성하는 실습을 진행하도록 하겠습니다
차트와 이벤트 리스너를 결합하면
채 틀을 표현하는 데이터와 상호 작용이 가능합니다
차트 속성 을 마우스 클릭하거나
그래프 특정 영역에 마우스를 위치시키는 동작이
이러한 상호작용의 포함됩니다
사용자의 여러가지 동작의 반응 함으로써
사용자 경험을 향상 하고 필요에 따라서 자세한 정보를 제공할 수가
있습니다
이번 예제에서는 켈리 기나 마우스 오버 같은 마우스로 할 수 있는 다양한
동작을 감지하는 방법을 알아보도록 하겠습니다
웹서버가 준비된 후 예제에서 필요한
제이슨 파일을 로드 하도록 하겠습니다
기존에 사용했던
다 차트 점 제이슨 파일을 사용하도록 하겠습니다
차트 데이터를 로드하는 목적으로
사용자 모델을 정의합니다
두개의 필드를 사용하도록 네임과 벨르 필드를 지정합니다
아작 쓰 프록시로 스토어 를 생성합니다
오토 로드 트롤 설정을 함으로써
데이터를 자동으로 불러옵니다
이렇게 다 차트 점 제이슨 파일을 지정하고
오토 로드 옥션을 줌으로써 스토어 파일을 생성 하시면 되겠습니다
이제 기본적인 막대 차트를 생성하고
늄 에릭과 카테고리 설정 값을
부여 하도록 하겠습니다
기본적인 차트 생성 구조입니다
스토어는 위에서 생성한 스토어 구조체를 가지고 오시면 되겠습니다
축 썰 정부 뿐입니다 축은 두가지
싸자 죽과
카테고리 축이 되겠습니다 미치는 각각 아래와 왼쪽으로 나타나고
필드는 위에서 불러온 밸리 필드와 네임 필드를 지정하도록 구성하시면
되겠습니다
이제 시리즈 설정을 합니다
시리즈는 바 타입으로 차트 를 구성해 있어
막대 차트를 구성하도록 합니다
그리고 x 와 y 필드를 네임과 벨리 필드로 각자 지정 하시면 되겠습니다
이제 여기에 아이템 마우스 업 이벤트 를 감지하는
리스너를 추가하도록 하겠습니다
리스너를 이렇게 추가하시고
아이템 마우스 업 이라는
리스너를 추가합니다
마우스를 클릭할 경우 발생되는 이벤트 가 되겠습니다
여기에 아이템의 캅스
밸류 아내 임 값을 각각 추출해서
화면에 찍어주는 콘솔 로그 부분을
입력합니다
그래서 해당 필드에서 받아오는 값이 제대로
축출 가능한 지를 확인합니다
이렇게 구성한 후 렌더 특 앱 바디로 마무리 하시면 되겠습니다
아이템 마우스 없
리스너 동작을 생성된 차트를 통해 확인해보도록 하겠습니다
이렇게 바 차트가 구성된 것을 확인하실 수가 있습니다
첫 번스 윤희원
막대에 클릭을 해 보도록 하겠습니다
아래 콘솔 창을 보시면
컬럼 베이와 컬럼 4 이미
스킨은 것을 확인하실 수가 있습니다
2번 쓰일 니트를 클릭해 보겠습니다
역시 닦아 게 막대에 값과 네임이
스킨은 것을 확인하실 수가 있습니다
2 3 여러가지 마우스 동작을
검출하기 위해서 아이템 마우스 업을 지우고
세포 적인 동작을 추가해 보도록 하겠습니다 먼저 아이템 마우스 다음부터
추가해서
마우스로 할 수 있는 4가지 옵션 의 리스너 에 추가합니다
마우스 다운 은
마우스를 왼쪽 클릭하였을때 8 동안은
핸들러가 되겠습니다 다음 마우스 버튼을 다시 떼는 순간
아이템 마우스 업이 인식 되겠습니다
해당 된 공간으로
마우스 포인터가 빠져 나가는 경우를
아이템 마우스 아웃으로 검출할 수 있고 반대로 그 공간으로
마우스 포인터가 들어오는 경우에 아이템 마우스 오버 를 검출할 수 가
있습니다
각각의 액션에 콘솔 로그 옵션을 줌으로써
액션을 확인해 보도록 하겠습니다
먼저 마우스 오버를 해 보도록 하겠습니다
유니 3 의 막대 에 마우스를 가져다 되면
마우스 오버 가 나타납니다 다시 마우스 포인터를 닦으러 이스 키면
마우스 아우 씨 특히 는 것을 보실 수가 있습니다
이제 클릭을 해 보도록 하겠습니다
마우스 프레스드 가 스킨 것을 확인하실 수가 있습니다
클릭한 상태로 계속 머물고 있다가
클릭 버튼을 떼는 순간 마우스 없 이 스킨은 것을 확인하실 수가 있습니다
이렇게 여러가지 동작을
여러분이 원하는대로
이벤트 리스너를 통해서 바기나 질수가 있습니다
이번에는 그리드 변 집으로
차트를 갱신하는 실습을 진행하도록 하겠습니다
ext 3 2 s4 에 세트 애니메이션은
그 자체로도 기능이 충분하지만
사용자의 데이터 조작의 따라서
차트를 갱신하는 방식도 매우 유용하게 쓰일 수가 있습니다
이제부터는 편집이 가능한 그리드 차트와 연결하는 방법을 알아보도록
하겠습니다
사용자가 그리드에서 데이터를 변경하면 그 즉시 수정된 내용이 파이 차트
에 반영이 됩니다
차트와 그리드 해서 데이터를 로드하기 위한 모델을 정의합니다
파일 차트 만들기 실습을 토대로
예제를 진행하시면 되겠습니다
이렇게 두개의 값을 가진 모델을 생성합니다
프로그래밍 은행 기지 이름과 차세 하는 비율을 퍼센트 페이지로 나타내는
데이터 모델이 되겠습니다
차트와 그리드에서 사용하는 데이터 집합을 정의합니다
데이터 집합은 냉기 수야 퍼센트 g 로 이루어져 있으며 이렇게 여러가지
데이터를
사전에 구성하여 사용합니다
이제 스토어 를 생성해서 데이터 집합을 로드합니다
스트 원은 데이트와 그리드 데이터와 차트를 연결하는 목적으로
각각 사용이 되겠습니다
이렇게 스 투어 를 생성합니다
위에서 생성한 랭 기지에 데이터 모델을 사용하시면 되겠습니다
이제 파이 시리즈 로 기본적인 차트를 생성한 후
차트 변수에 할당 하도록 하겠습니다
이렇게 차트 라는 변수를 통해
렝 깃이 스토어에 있는 데이터를 가져와서 차트 를 구성합니다
시리즈는 타입은 파이 차트로 구성하며
기존의 구성했던 파이 차트 와 동일하게 퍼센트에 즉 앞 쓰
파이의 넓이로 구성하는 차트 를 생성합니다
나머지 옵션 은 기존 파이 차트 만들기 예제를 참고 하시기 바랍니다
이제 쎄 쎄 쎄 쎄 쎄 쎄 쎄 쎄 쎄 쎄 쎄 쎄 쎄 쎄 모델과 셀에 dd
플러그인으로
그리드 패널을 생성합니다
이렇게 그리드 배너를 먼저 기본적인 정보를 통해 생성합니다
스토어는 위에서 생성한 랭크 c 스토어 모델을 동일하게 사용하시면
되겠습니다
그리드의 컬럼 값을 수정합니다
랭귀지 야 퍼센트 디스 값이 되겠습니다
퍼센트 에즈 컬럼은
넘버 패드를 추가로 구성 했기 때문에
편집이 가능한 형태로 생성됩니다
이렇게 생성한 그리드를 그레이드 변수에 할당합니다
이제 플러그인을 추가합니다
셀 타입 은 셀 모델 그리고
두가지의 클러 그 인중 sld 팅 플러그인을 추가하여 생성합니다
이렇게 해서 그리드를 마무리합니다
마지막 단계로 h 박스 레이아웃으로 패널을 생성하고
문서의 렌더링합니다 패널의 아이템 집합체 는 위에서 생성한 그리드와
차트가 되겠습니다
이렇게 패널을 생성합니다
아이템은 첫 번째 그리드를 먼저 붙이고
옆에 차트를 붙이는 식으로 구성하도록 하겠습니다
그리드와 차트는 모두 맹기 스토어 라는 동일한 스토어 연결되어 있습니다
그리드에서 값 씁 변경될 때
스토어는 새로운 값을 반영에 갱신이 이루어 집니다
이와 동시에 파이 차트에서는 갱신된 데이터에 따라 다시 차트를 글입니다
이 동작을 결과를 통해 확인해보도록 하겠습니다
왼편에 그리드를 확인하실 수가 있습니다
렝 기지와 퍼센트 즉 값을 각각 표로 나열해 줍니다
오른편에는
이 데이터를 통해 구성된 파이 차트를 확인하실 수가 있습니다
3 값을 한 번 변경해 보도록 하겠습니다
퍼센트 g 를 클릭하면 값을 변경할 수 있도록 이렇게 속성이 지정되어
있습니다
아덜 sa 12 값을
10 만큼 감소하고 그 옆에 쉘 캅스
심 만큼 증가 해보도록 하겠습니다
그러면 이렇게 변경안 값이 차트에 바로 반영되는 것을 여러분이 확인하실
수가 있습니다
여기에 값도 심 만큼 들려보고
파이썬의 값을 0으로
측정해 보도록 하겠습니다 이렇게 여러분이 원하는대로
데이터 값을 조정 하실수가 있습니다
이렇게 실시간으로 데이터 조작을 통해
파이 차트를 보여주는 간단한 어플리케이션 수준의
차트를 만드실 수가 있습니다
