Jquery Hichart 쓰기

Highcharts-3.0.0.zip

Jquery chart 쓰기!!!

 

굳뜨!!!!!!!!!!

http://api.highcharts.com/highcharts ( 참고 ) API

 

 

<script  type="text/javaScript" > $(function() {   var chart02;            var options02 = {        chart: {         renderTo: 'div_graph_table02',         type: 'line',                  animation: {                      duration: 1500,                      easing: 'easeOutBounce'                  }              },              title: {                  text: '<strong>'+'설문 결과 종합 그래프'+'</strong>',              },              subtitle: {                  enabled: false              },              xAxis: [{                  lineWidth:10,                  categories: ['<strong>'+'물리환경'+'</strong>', '<strong>'+'직무요구'+'</strong>', '<strong>'+'직무자율'+'</strong>',                               '<strong>'+'관계갈등'+'</strong>', '<strong>'+'직무불안정'+'</strong>', '<strong>'+'조직체계'+'</strong>',                               '<strong>'+'보상부적절'+'</strong>','<strong>'+'직장문화'+'</strong>']              }],              yAxis: [{ // Primary yAxis               min: 0,                     max: 100,                     tickInterval: 20,                     lineWidth:0,                     minPadding: 0.5,                     maxPadding: 2.0,                                   labels: {                      format: '{value}',                      style: {                          color: '#89A54E'                      }                  },             title: {                   text: '평가 점수',                   style: {                       color: '#89A54E'                   }                }              }],                           tooltip: {                  shared: true              },              legend: {                  align: 'left',                  x: 60,                  verticalAlign: 'top',                  floating: true,                  backgroundColor: '#FFFFFF'              },              series: [                       {                        name: '개인',                           color: '#4572A7',                           type: 'column',                           tooltip: {                               valueSuffix: ''                           }                       },                                             {                        name: '회사',                              fontSize: '100px',                              color: '#910000',                              type: 'column',                              tooltip: {                                  valueSuffix: ''                              }                                              },                                             {                              name: '평균값',                              fontSize: '100px',                              color: '#89A54E',                              type: 'line',                              tooltip: {                                  valueSuffix: ''                              }                          }                   ]      };         var data02_1 = []; //개인         var data02_2 = []; //회사         var data02_3 = []; //한국인 평균                 /* 개인 */      data02_1[0] = parseFloat("${member_total_metabolic_view_p_entity.score_1}");      data02_1[1] = parseFloat("${member_total_metabolic_view_p_entity.score_2}");      data02_1[2] = parseFloat("${member_total_metabolic_view_p_entity.score_3}");      data02_1[3] = parseFloat("${member_total_metabolic_view_p_entity.score_4}");      data02_1[4] = parseFloat("${member_total_metabolic_view_p_entity.score_5}");      data02_1[5] = parseFloat("${member_total_metabolic_view_p_entity.score_6}");      data02_1[6] = parseFloat("${member_total_metabolic_view_p_entity.score_7}");      data02_1[7] = parseFloat("${member_total_metabolic_view_p_entity.score_8}");        /* 회사  */      data02_2[0] = parseFloat("${entity_dept.score_1}");      data02_2[1] = parseFloat("${entity_dept.score_2}");      data02_2[2] = parseFloat("${entity_dept.score_3}");      data02_2[3] = parseFloat("${entity_dept.score_4}");      data02_2[4] = parseFloat("${entity_dept.score_5}");      data02_2[5] = parseFloat("${entity_dept.score_6}");      data02_2[6] = parseFloat("${entity_dept.score_7}");      data02_2[7] = parseFloat("${entity_dept.score_8}");           /* 한국인 평균  */      <c:choose>          <c:when test="${member_total_metabolic_view_p_entity.gender eq 1}">              data02_3[0] = parseFloat(44.5);              data02_3[1] = parseFloat(50.1);              data02_3[2] = parseFloat(53.4);              data02_3[3] = parseFloat(33.4);              data02_3[4] = parseFloat(50.1);              data02_3[5] = parseFloat(52.4);              data02_3[6] = parseFloat(66.7);              data02_3[7] = parseFloat(41.7);          </c:when>       <c:otherwise>               data02_3[0] = parseFloat(44.5);               data02_3[1] = parseFloat(54.2);               data02_3[2] = parseFloat(60.1);               data02_3[3] = parseFloat(33.4);               data02_3[4] = parseFloat(50.1);               data02_3[5] = parseFloat(52.4);               data02_3[6] = parseFloat(66.7);               data02_3[7] = parseFloat(41.7);       </c:otherwise>           </c:choose>             options02.series[0].data   = data02_1;         options02.series[1].data   = data02_2;         options02.series[2].data   = data02_3;         chart02 = new Highcharts.Chart(options02);  }); </script>   <div id="table01">     <div id="div_graph_table02" style="width:680px; height:240px; margin: 0 auto; float:left;"></div> </div>

 

Sample 은 원래 data[45,56,46,] 이런식으로 넣어야 그래프가 표기가 되지만

내가 할일은 DB에 대한것을 전부다 chart 에 넣는 방식을 해야만한다. 나같은 경우는 DB가 1줄에 여러개의 컬럼들이

들어가 있기 때문에 저런식으로 나열함, List 형식이라면 JSTL을 사용해서 <c:foreach> 문을 이용해서 데이터를 넣는다

 

data[] 라는 곳에 Java 단에서 45, 46, 47, 이런식으로 문자열을 넣어 봤더니 Data 값이 이상하게 나온다. 그래서

택한방법은 저것.....ㅠㅠ 자바스크립트는 주소가 [0]번째부터가 첫번쨰 이기 때문에 0부터 시작 저렇게 모두 넣은후

하면 된다~

 

그리고 Sample.html을 가지고 실행을 하게 되면 function 안에 id가 chart가 있다고 가정하고 그안에다가

JSTL 태그를 써서 Data를 넣으려고 했으나 차트 오작동으로 이방법을 택했다.

 

내가 봤을때는 그안에 넣으면안되고 function 바깥쪽에 data를 불러오는

options02.series[0].data = data02_1;

이런식으로 var 를 선언 data02_1 = [] 해서 접근해서 넣으면 될듯 싶다!!!! ㅋ