ExtJS 기초강좌 28 - 3D 세로형 막대 그래프 출력시켜보자
이번에는 ExtJS 5.1 에서 추가된 훌륭하고 스펙타클(?) 한 기능인 3D 차트 중 하나인 3D 세로형 막대그래프를 한번 출력해보도록 하겠습니다.
3d 그래프의 경우 내부적인 요소는 기존에 출력되는 그래프의 요소와 동일하고 type에 대한 설정부분만 변경해주면 되는것 같습니다.
이전 강좌인 코드에서 type 부분만을 변경하고 동일한 화면과 기능을 이용하겠습니다.
기본 3D 세로형 막대그래프
이전 코드에서 다루었던 첫번째 코드를 보겠습니다. ▼
코드가 작성 되었는데, 상단 코드에서 딱! 3가지만 변경을 하면 아름다운 3D 그래프를 출력할 수 있습니다.
그게 무엇이나하면.....
axes 내에 정의되어있는 type config 와 series 내에 정의되어있는 type config 입니다.
변경은 아래와 같습니다. ▼
axes → type : 'numeric' ▶ type : 'numeric3d'
axes → type : 'category' ▶ type : 'category3d'
series → type : 'bar' ▶ type : 'bar3d'
변경되는것이 각각의 value값뒤에 추가로 3d 라는 값이 추가를 해주었습니다.
결과를 한번 확인해 보도록 하겟습니다. ▼
적용된 결과 이전 2D(?) 그래프에서 3D 막대그래프로 이상없이 출력되는군요.
그럼 동일하게 Stacked 와 Group 막대그래프 역시 동일하게 type만 변경되면 이전 기능을 동일하게 구현이 가능합니다. ▼
27장 강의와 동일한 코드이므로 기존 코드를 보유하고 계신분들은 상단에 네모친 부분만 변경해서 확인해보시면 되실겁니다.
새로 작성하시는 분들의 경우 27장 강의를 보시고 진행하시거나 Github에서 chapter 27장 코드를 참고하세요.
그럼 실행결과를 보고 이번장을 마무리 하도록 하겠습니다. ▼
