널리

저희 널리에서 제공하고 있는 소스들은 MIT 라이선스를 적용하였기 때문에 Third-Party에서 상용적인 목적으로 자유롭게 수정 및 배포가 가능합니다.

Nwagon 라이브러리는 은 클라이언트 스크립트를 통해 렌더링 되기 때문에 오프라인 환경에서도 사용이 가능합니다.

Nwagon 라이브러리는 이미지 및 엑셀 데이터 연동 기능을 지원하고 있지 않습니다. 차후 Nwagon 업데이트 시 참고하도록 하겠습니다.

Nwagon 라이브러리는 IE8.0 이하에서도 VML 형식으로 지원이 되고 있으며, 차트 사용시 Nwaong_no_vml.js 가 아닌 Nwagon.js 파일을 참조해야 됩니다. 또한 최신 업데이트 버전의 Nwagon 을 사용하고 있는지도 확인하시기 바랍니다.

차트 명도대비를 통한 웹 접근성은 가능은 하지만, 줄무늬 패턴 또는 배경 이미지 옵션을 따로 지원하고 있지는 않습니다.
차후 Nwagon 업데이트 시 참고하도록 하겠습니다.

Nwagon 라이브러리는 반응형을 지원하지 않습니다. 그러나 화면 리사이즈 시 width, height를 조절하여 렌더링 한다면, 모바일에서도 잘리지 않고 차트를 그릴 수 있습니다.

Nwagon 라이브러리는 애니메이션 효과를 지원하지 않습니다. 차후 Nwagon 업데이트 시 참고하도록 하겠습니다.

Nwagon 라이브러리는 API 문서를 별도로 지원하지 않습니다.

Nwagon 라이브러리는 세로형 차트를 지원하지 않습니다. 그러나 SVG Element를 rotate 하거나 Nwagon 내부 수정을 통해 직접 컨트롤 하시는 것은 가능합니다.

Nwagon 라이브러리는 legend 및 좌표 label 등의 font color 변경은 지원하지 않습니다. 개별 스크립트를 통하거나 css 를 이용하여 스타일 조절을 하시면 가능합니다.

svg 의 기본 style overflow 속성값이 hidden으로 걸려있기 때문에 svg 영역에서 벗어나면 노출이 안됩니다. 해결방법으로는 css 스타일로 해당 svg의 overflow 속성을 visible 로 변경하고 혹시 차트가 document 왼쪽에 붙어있을경우에는 margin-left 값도 주시면 됩니다.
(예: svg {overflow:visible; margin-left:20px;})

Nwagon 에서 fields 위치 지정하는 옵션은 따로 없으며 변경을 원할시에는 Nwagon 렌더링 이후 별도의 스크립트로 fields 클래스 안에 있는 rect 엘리멘트와 text 엘리멘트 x 속성 값과 y 속성 값을 아래와 같은 예로 변경해주시면 됩니다.
var chart = document.getElementById("chart18"); // 차트를 덮고 있는 div 의 id
var field = chart.getElementsByClassName("fields"); // 차트의 fields 객체
var fields = field[0].child Nodes; // fields 의 children 객체
fields[0].setAttribute("x","500") // fields 0번째 child x좌표 위치를 500으로 변경
fields[0].setAttribute("y","-190") // fields 0번째 child y좌표 위치를 -190으로 변경

bootstrap 의 tooltip 이라는 class 와 충돌되고 있어서 노출이 안되고 있습니다. bootstrap의 css 에서 tooltip 에 " filter:alpha(opacity=0);opacity:0; " 를 제거하시거나 Nwagon.css 에 아래 스타일 선언을 추가해주시면 됩니다. tooltip {filter:alpha(opacity=1) !important;opacity:1 !important;}

차트에서 범례를 제거하시려면 차트 렌더링 이후 별도로 아래와 remove 시켜주시거나 css 를 통해 fields 클래스를 display:none 처리하셔도 됩니다.
var chartSvg = document.getElementById('차트아이디').getElementsByTagName('svg')[0];
var fields = chartSvg.getElementsByClassName('fields')[0];
chartSvg .removeChild(fields);

레이더차트는 퍼센트 수치로 나타내기 때문에 기본 0 에서 100 안의 값으로만 조정이 가능하며 max 와 min 데이타 값 설정은 지원을 안하고 있습니다.

column 차트에서 x 좌표 legend 는 기본으로 기울기가 적용되어있습니다. 기울기를 빼고 싶으실 경우 Nwagon.js 의 644번째줄 drawLabels 에서 transform 속성을 지워주시면 됩니다.
var attributes = {'x':x, 'y':y, 'text-anchor':'end'}; 로 변경
또는 랜더링 이후 스크립트로 labels 의 text 태그의 transform 속성을 없애도록 선언하시면 됩니다. 감사합니다.

접근성 준수를 위해 데이터 정보를 스크린리더로 읽어드릴 수 있도록 css로 블라인드 처리된 내용이 생성됩니다. dataset의 title은 해당 정보의 제목으로 표시되고 있습니다.

svg의 경우 text 태그 안에 레이블명이 들어가며 text 태그 안에서 들여 쓰기를 할 경우 tspan 객체를 추가하여 줄바꿈 처리를 하실 수 있습니다. 렌더링 이후 별도의 커스텀을 통해서만 가능하며 각 tspan의 dy 속성의 좌표값으로 지정해야 합니다.

접근성 준수를 위해 차트의 데이터 정보들을 ul 리스트 형태로 생성이 되고 있습니다.
( ul class='accessibility' ) 해당 영역에 퍼센트 데이터를 제공해주고 있어 스타일 혹은 스크립트를 통해 활용하시면 됩니다.

따로 렌더링 이후 svg 내부의 circles로 class 명 지정된 g 객체를 제거해주시면 됩니다.
예) var lineChart = document.getElementById("차트아이디");
var chartFg = lineChart.getElementsByClassName("foreground")[0];
var chartCircle = chartFg.getElementsByClassName("circles")[0];
chartFg.removeChild(chartCircle);

차트 창 크기에 따라 유동 변경은 차트 렌더링 이후 window의 width 값을 받아와서 이에 상응하는 값을 svg의 width, height, viewBox 속성을 통해서 변경하시면 됩니다.

IE 구 버전에서는 SVG 지원이 안되어 VML로 차트가 그려지도록 크로스 브라우징 처리를 해주고 있습니다.
VML 지원 브라우저에 대한 처리를 하는 만큼 파일 코드량이 2배 가까이 들어가 있어 모던 브라우저만 지원하는 프로젝트에서는 VML 처리를 뺀 가벼운 Nwagon_no_vml.js를 제공하고 있습니다.