[javaScript/highCharts] 자바스크립트 HIGH CHARTS로 그래프그리기

회사에서 운영하는 페이지 코드를 공부하다가 그래프를 나타내는 코드를 발견하였다.

이 그래프는 highCharts 라이브러리를 사용하여 나타낸 것이었다.

코드를 분석하려보니 그림과 코드가 매칭이 안되는 것 같아 reference를 보아도 이해하기 힘들었다 ㅜㅜ

그래서 다음날 블로그에 정리해서 올리자 하는 생각으로 각을 잡고 공부하였다 ㅎㅎ

회사에서 그려낸 그래프로 글을 쓰기엔 조금 겁이나서(보안적으로) 

www.jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/backgroundcolor-color/

이 페이지에서 코드를 적용해가며 공부하였다.

 

주로 사용되는 것들(회사에서 운영하는 페이지에 적용된 요소들)만 공부하였다.

 

일단 highCharts를 선언할 땐 div안에 선언을 해서 크기를 조절할 수 있다.

위의 사진은 margin-left, margin-top을 사용하여 크기를 조절한 것이다.

 

<script>안에서 highCharts를 정의하는 방법은

<script>
	Highcharts.chart('id',{
    	title:{
        	text : '주제목'
        },
        subtitle:{
        	text : '부제목'
        },
        scrollbar: {
	            enabled: false
        },
        navigator: {
        	enabled: false
        },
        exporting: {
        	enabled: false
        }
        });
           
</script>

 

 

이렇게 선언을 해주면 된다. 이제 세부적으로 다루어볼 차례다.

 

1. 차트에 나올 그래프 type

Highcharts.chart('container', {
  chart: {
    type: 'column'
  }
  });

type으로 여러가지가 있는 데 몇개만 보여주자면

 

1-1. column

type : column

 

1-2. line

type : line

 

1-3. spline

type : spline

 

1-4. area

type : area

 

1-5. areaspline

type : areaspline

 

 

2. credits

그래프 밑에 출처의 유무를 나타내는 것이다. boolean타입으로 적어주면 된다.

위의 그림들은 credits이 true로 되어있는 것이고 false로 하면 아래처럼 된다.

credits : false

 

 

3. legend

범례라고 하는데 위치는 위의 요소를 정리한 그림을 참고하면 된다.

이 범례의 스타일을 정의해주는 방법은

legend: {
    layout: 'vertical',
    floating: true,
    align: 'left', //정렬
    x: 100,
    verticalAlign: 'top',//정렬
    y: 70,
    itemStyle: {color: "red"} //글자스타일
  }

노란박스가 legend

 

 

4. plotOptions

공부하는 첫 날 이해하기 제일 어려웠던 부분

위치는 어딨는지 알겠으나 설정할 수 있는 것들이 너무 많아 reference로 보면서 더 힘들었던 것 같다.

4-1. series

이 series는 데이터 배열을 뜻하는 것이다.

series가 하나이면 한종류의 데이터만 , 두개이면 두종류의 데이터를 보여준다.

나는 현재 두개의 series를 사용하고 있는 것이다.

plotOptions: {
     series:{
       colorByPoint : false,
      dataLabels:{
        enabled : true, //각각의 데이터 값을 나타낼 것인지
        color:'black' // 데이터 값을 나타낼 때 색
      }
    },
    connectNulls : true //null인 지점에 연결할 것인지
    
  }

dataLabels는 enabled를 true로 설정해야 나머지 설정값(color)들이 반영된다.

colorByPoint를 true로 설정하면 각 지점들의 색이 변한다.

 

 

5. xAxis(x축)

xAxis: {
	title:{
    	text : '이거 x축'
        }
    }
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    labels:{ //x축이 어떻게 보일것인지 설정
    	style: {color:'red' //글자색}
    }
  }

 

 

6. yAxis(y축)

yAxis: {
     title:{
       text: 'TEST',
      style:{color:'red'},
         rotation : 0, //회전각도
      y:-170,
      x:0//x,y는 x축,y축으로 얼마나 이동시킬 것인지
    },
    max:300,
    min:0
  }

y는 0일때 이유는 모르겠지만 그래프의 중간에 위치한다.

위의 y축기준으로 보면 150부근이 0이다. y가 얼만큼 이동할지는 코드로 설정한y축 단위 기준으로 이동한다.

max랑 min은 y축의 범위를 설정한다.

 

 

7. series

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  },
  {
     name: 'test',
    data: [150.9, 171.5, 206.4, 29.2, 44.0, 76.0, 35.6, 48.5, 16.4, 94.1, 195.6, 154.4]
  }]

나타낼 데이터를 배열형식으로 적어주면 된다.

name은 plotOptions에서 보여질 series의 이름을 설정할 수 있다.

 

reference의 반의 반도 못끝냈지만...회사의 코드는 이해할 수 있으니 다행이다 ㅠ

출처:www.api.highcharts.com/highcharts/