javascript9 AmChart 4 트리맵 기능 소개 AmChart 4는 데이터 시각화를 위한 강력한 도구입니다. 특히 트리맵 기능은 계층적 데이터를 직관적으로 표현할 수 있게 해줍니다. 기본 개념 트리맵은 계층적 데이터를 직사각형으로 나타내며, 이 직사각형의 크기는 그들의 계층 내에서의 값에 비례합니다. 각 직사각형은 더 작은 하위 항목으로 나눌 수 있으며, 이는 데이터의 구조를 명확하게 보여줍니다. 기능 및 사용법 AmChart 4의 트리맵은 드릴다운 형식과 다중 레벨 동시 표시 기능을 제공합니다. 이러한 기능을 통해 복잡한 데이터 구조를 쉽게 이해할 수 있습니다. 예제 및 튜토리얼 AmChart 웹사이트에는 트리맵 구현 방법을 배울 수 있는 다양한 튜토리얼과 데모가 있습니다. 실제 사용 사례 데이터 시각화에 트리맵을 사용하는 다양한 산업.. 2023. 11. 25. [jqGrid cookbook] 1. jqGrid jqGrid를 시작하며 jqGrid 는 jQuery 기반의 그리드 플러그인입니다. 보통 테이블 기반의 데이터를 웹상에 표시하는 것보다 편집, 페이징, 검색, 정렬등의 부가적인 기능을 하는데 번거로울 수 있는데 jqGrid 를 이용하면 이를 좀 더 쉽게 구현할 수 있습니다. 물론 jqGrid를 사용하기 위해서는 사용법을 잘 지켜야 합니다. 사용법을 익히기 전에 먼저 jqGrid 예제를 하나 보겠습니다. 아래의 그리드는 테이블 형식의 데이터를 출력하는 것은 물론이고 각 컬럼에 대한 정렬, 검색, 새로고침, 페이징 등을 구현한 화면입니다. 코드량은 얼마나 될까요? HTML 단 2줄, 스크립트는 25줄이면 그리드를 표현하고 검색, 정렬, 페이징 등의 다양한 기능을 구현할 수 있습니다. 물론 데이터는 서버에 요청.. 2014. 1. 15. [PhantomJS] SSL handshake failed PhantomJS 를 이용하여 화면을 캡쳐하는 도중 유독 tumblr.com 만 SSL handshake failed 라는 에러메세지를 출력하는 것이다. 아래의 코드는 tumblr.com 에 대한 에러를 체크하기 위해 하단의 사이트에서 가져온 phantomjs 코드이다. var page = require('webpage').create(); page.onResourceError = function(resourceError) { page.reason = resourceError.errorString; page.reason_url = resourceError.url;}; page.open( "http://tumblr.com/", function (status) { if ( status !== 'success.. 2013. 12. 4. [Thymeleaf] contextPath in Javascript Thymeleaf 는 HTML 의 속성값을 이용하여 파싱을 한다. 결국 TAG에 적용된 값들을 토대로 파싱을 하는데 자바스크립트에서의 파싱도 지원을 한다. 자세한 내용은 문서를 참고하기 바란다. 자바스크립트에서 contextPath 의 값을 가져오기 위해서는 다음 값들을 사용할 수 있다. 그 외 다양한 방법들 관련해서도 마찬가지로 문서를 참고하기 바란다. 단지 기록차원에서 블로그에 글을 남겨둔다. 참고 : Tutorial: Using Thymeleaf (http://www.thymeleaf.org/doc/html/Using-Thymeleaf.html#script-inlining-javascript-and-dart) 2013. 11. 7. [jqGrid] getRowData 를 이용시 \r\n 값이 사라지는 현상 in IE8 jqGrid 를 사용하면서 또한가지 이슈가 발견되었다. 뭐 이슈라기 보다 지금까지 여러 프로젝트에 jqGrid 를 사용하였지만 아직 발견되지 않았던 것이라고 하는게 맞겠다. 해당 이슈를 공유하고자 한다. 물론 더 좋은 방법이 있으면 이곳에서 공유했으면 하는것이 필자의 바람이기도 하다. 화면 리스트와 편집을 동시에 하는 화면을 구현하였다. 이때 리스트를 그리드로 구현하고 편집 화면은 폼(input, select, textarea 등으로 구성된)으로 구성하였다. 리스트에서는 화면에 보이지 않는 , 즉 편집(폼)을 위한 데이터까지 Grid 에서 가지고 있다가(hidden:true 이용) 선택시(onSelectRow 이벤트) 폼화면을 Grid 의 getRowData 함수를 이용하여 채우려는데 있다. 현상 FF,.. 2013. 10. 30. [jQuery] form data binding 보호되어 있는 글 입니다. 2013. 8. 27. 이전 1 2 다음
