wijmo javascript api (차트)

라인 차트를 그릴일이 있어서 조사하다가 jqplot말고 좋은게 있는것 같아서 정리해 둔다. 

난 마크업 개발자가 아니지만.. 개발자에게 애당초 그런 분류는 없다 ㅎ 필요하면 하는 것임 

http://wijmo.com/wiki/index.php/Main_Page 에 접속하면 line chart 말고도 여러가지를 제공한다. 

그중에 line chart를 고르면 ... 

http://wijmo.com/wiki/index.php/Linechart

여기로 오는데 자세한 설명들이 있다. 

코드도 간단하다. 아래같이 view를 그려줄 div element를 하나 만든다. 

<div id="wijlinechart" class="ui-widget ui-widget-content ui-corner-all" style="width: 500px; height: 400px;"></div>

그리고 아래와 같이 javascript로 원하는 data를 넣어주면 간단히 그릴 수 있다. 

<script id="scriptInit" type="text/javascript">     $(document).ready(function () {         var xArray = [100, 200, 400, 800, 1000];         var yArray = [-20, 0, 30, -50, 100];         $("#wijlinechart").wijlinechart({             axis: {                 y: {                     origin: 0                 }             },             showChartLabels: false,             header: {                              text: "My Stocks"                          },             hint: {                 content: function () {                     return this.data.lineSeries.label + '\n' +                         this.x + '\n' + this.y + '';                 },                 contentStyle: {                     "font-size": 10                 },                 offsetY: -10             },             legend: {                 visible: false             },             seriesList: [                     {                         label: "My Stocks",                         legendEntry: true,                         data: {                             x: xArray,                             y: yArray                         },                         markers: {                             visible: true,                             type: "circle"                         }                     }                 ]         });     }); </script>

결과 화면 

페이지에서 api 라는 메뉴를 누르면 각 option에 대한 설명을 볼 수 있다. 

나는 간단히 위의 예제 정도의 그래프가 필요했기 때문에 필요한 option만 정리해 봐야겠다. 

그리고 정리된 내용을 바탕으로 json rpc를 만들어서 호출 -> view로 바꿔볼 예정이다. 

옵션 설명 시작 (http://wijmo.com/wiki/index.php/Linechart)

1. header : 그래프 맨 위의 제목이락 생각하면 된다. 위 예제의 My Stocks
1. visible : 보이게 할 것이냐 말 것이냐 
2. compass : header의 위치, 네가지 'north', 'south', 'east' and 'west'.
3. style : header의 style 지정 스타일에 대해선 Style Options  여기를 참고
4. text : text 내용 
5. textStyle : text의 style지정 
2. showChartLabels : chart의 label을 보여줄 것이냐 말 것이냐. label은 
3. seriesList : 화면에 표시될 data와 관련 정보 Array 
1. data : chart를 그리기 위한 data
1. x : x 축 값 array 
2. y : y 축 값 array 
3. 형식 
   
   data: {
                               x: [100, 200, 400, 800, 1000],
                               y: [-20, 0, 30, -50, 100]
                           }

2. marker : data 마커 타입. 즉, data위 위치에 그려지는 모양
   

   markers: {
                               visible: true,
                               type: "circle"
                           }
3. legendEntry : legend를 보여줄 것이냐 말것이냐  
4. label : chrat에 대한 정보를 알려 주는 label (어디에 쓰이는지 아직 모르겠음;; ) 
4. hint : chart위에 mouse를 올리면 보여줄 tooltip에 들어갈 내용.

아무튼 오늘은 이정도까지만