EChart 차트 라이브러리. E-chart 정리

회사에서 구글 차트를 하는 도중 Echart라는 차트로 급히 변경.

Google Chart는 인터넷이 끊기면 챠트가 출력되지 않는 문제가 발생한다고 한다.

네이버는 Echart에 대한 내용은 별로 안나온다. Google은 그나마 많이나온다.

우리나라 사람이 정리해놓은 자료는 별로 없어서 챠트를 적용시키며 많이 고생했다.

그래서 정리.

Echart 사이트

http://ecomfe.github.io/echarts/doc/example-en.html

여러 예제들이 있으며 예제 이미지 클릭시 해당 차트에 대해 샘플을 보여준다.

왼쪽에는 코드를, 오른쪽에는 코드가 실행되어 해당 차트를 보여준다.

코드를 수정할 수 있으며 차트도 조작할 수 있다.

여기서 문제는

이곳에서 제공하는 샘플들은 다 데이터가 박혀(?) 있다는 점 !

나는 JSON 데이터를 뿌려줘야한다..

그거에 대한 정보는 아래 사이트 참조.

http://www.cnblogs.com/jerron/p/4520345.html

변수중에 var json_data 가 존재한다.

이곳에 JSON 서비스 url JSON 변환값을 호출하거나 작성한다.

예를들면 이런식으로 JSON을 넘겨준다.

---

---

소스를 보면 

  var chart_title =new Array(); //标题娄组
  var chart_data = new Array(); //值数组

부분이 존재한다.

이 변수의 데이터는 소스를 보면 for문을 돌려서 배열에 push해 주는 형식인데 예를들어 이런식으로 저장된다.

---

차트가 실행되면 

---

---

이런 결과물이 출력된다.

각각 영역마다 옵션을 설정하고 수정할 수 있다.

EChart 홈페이지에 API & Doc 메뉴에 두개의 매뉴가있는데 개인적으로 첫번째 문서가 더 알아보기가 쉬운것같다. API가 잘 정리되어있지만 영어를 잘 해석하셔야할듯... 구글 번역기에 돌리면 대충 의미는 나온다. 또한 위에말한 홈페이지에서 제공하는 예제 샘플 페이지에서 코드를 직접 변경해주는 형식으로 해당 속성이 어떠한 속성인지 파악하는것이 도움된다.

---

요약

- html 파일에 div 생성

- 차트 라이브러리 import (파일첨부)

echarts-all.js

- js코드에 

var myChart = echarts.init(document.getElementById('chartView'));

해당 영역에 차트를 그리겠다고 선언 한 뒤 데이터를 수기, 또는 JSON 형식으로 이용하기 위한 처리코드필요

setOption 메소르들 이용해 바로 챠트를 그린다.

(두번째로 제공한 사이트는 ... 적용이 잘 되지않아서 새로 찾아본 결과 이것이 잘된다.)

myChart.setOption({
		// 그리드 기본 속성 정의
         	grid:{
         		width: eWidth,
         		height: eHeight/2
         	},
            tooltip : {
                trigger: 'axis'
            },
            // 상단 차트종류 옵션 버튼
            toolbox: {
		        show : toolboxVal,
		        y: 'top',
		        feature : {
		            mark : {show: true},
		            dataView : {show: true, readOnly: false},
		            magicType : {
		            	show: true, 
		            	 title : {
				            bar : 'Bar',
				            line : 'Line',
				        },
				         type : ['bar','line']
		            },
		            restore : {
				        show : true,
				        title : 'restore'
				    },
		            saveAsImage : {show: true}
		        }
		    },
            // 상단 옵션 data
            legend: {
                data: col_data_name
            },
            // 가로
			xAxis : [
				{
					show: true,
					type : 'category',
					// 가로 데이터 타이틀
					data : chart_title,
				}
			],
			// 세로
			yAxis : [
			// TODO : ? 이걸 넣어줘야지만 columnLine이 실행됨.. 파악중
				{
					type : 'value',
					name : 'a',
					axisLabel : {}
				},
				{
					type : 'value',
					name : 'b',
					axisLabel : {}
				}
			],
			// 데이터
			series : chart_data
		});

위의 두개의 링크와 내가알려준 정보만 이용하면 Echart의 기본적인 차트는 생성할 수 있다.