Highcharts 하이차트 사용해보기

최고고·2024년 4월 16일

하이차트란?

자바스크립트로 작성된 차트 구현 라이브러리
모바일 포함 모든 웹브라우저 사용가능
CDN을 통해 모듈 설치하거나 파일을 다운받아 사용
하이차트 비동기 처리를 위해서 제이쿼리 모듈 선언..

필수모듈
<script src="https://code.highcharts.com/highcharts.js"/>
부가모듈
series name값 선 위 표시
<script src="https://code.highcharts.com/modules/series-label.js"/></script>
우측 상단 삼발버튼
<script src="https://code.highcharts.com/modules/exporting.js"></script>

차트 도식하기

HTML 내 div태그에 width, height 값 지정 후 자바스크립트 작성
상세 코드 없이도 기본설정 부분으로 일반적 차트 도식 가능함
여러 옵션 활용해 그래프 도식
div하나당 차트 1

꺾은선 그래프

HTML

<div id=”container”></div>

css로 너비 높이 설정

#container  {
  height: 360px;
  width: 800px;
  margin: 1em auto
}

JS

Highcharts.chart('chart01', {

  title: {
    text: '대장제목'
  },

  subtitle: {
    text: '부제목'
  },

  yAxis: {
    title: {
      text: 'y축 제목'
    }
  },

  xAxis: {
    accessibility: {
      rangeDescription: 'Range: 2010 to 2017'
    }
  },

  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },

  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointStart: 2010
    }
  },

  series: [{
    name: '선 1',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }, {
    name: '선 2',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
  }, {
    name: '선 3',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
  }],

  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  }

});

ajax 활용

$(document).ready(function() {
	
	var title = {text: '대장제목'};
	var subtitle = {text: '부제목'}; 
	var yAxis = {
		title: {text: 'y축 제목'}
	};
	var xAxis = {
		categories: ['일', '이', '삼', '사', '오', '육', '칠', '팔'],
		crosshair: true
	};
	var legend = {
		layout: 'vertical',
		align: 'right',
		verticalAlign: 'middle'
	};
	var series = [{
		name: '선 1',
		data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
	},{
		name: '선 2',
		data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
	},{
		name: '선 3',
		data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]		
	}];
	
	var json_chart={};
	
	json_chart.title=title;
	json_chart.subtitle=subtitle;
	json_chart.yAxis=yAxis;
	json_chart.xAxis=xAxis;
	json_chart.legend=legend;
	json_chart.series=series;
	
	$('#chart01').highcharts(json_chart);
	
});

그래프의 제목을 없애려면

var title = {text: null};
var yAxis = {
	title: {text: null}
};

카피라이터를 제거하려면

credits 객체에 enabled false

var credits= {
	enabled: false
};

json_chart.credits=credits; //비동기차트일때
그외엔  Highcharts.chart('container', { 태그 내 입력하기

카피라이터의 하이퍼링크를 변경하려면

var credits = {
	text: '타사이트 호출',
	href: 'https://www.naver.com/'
};

막대그래프

원하는 그래프 타입명을 type의 값으로 설정하면 됨
type: 'column'

  series: [{
        name: '범례 1',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
        type: 'column'	// 막대로변경함
    }, {
        name: '범례 2',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: '범례 3',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }]

선안보이게 하기 시리즈 내에 ㅓ추가할거 범례마다

 lineWidth:0, // 선 안보이기
		states: {
			hover:{
				lineWidthPlus: 0 // 마우스 오버시 선 안보이기
			}
		}

y축 추가

	var yAxis = [{
		title: {text: '첫번째 y축'}
	},{			
		title: {text: '두번째 y축'},
	}];

오른쪽으로 이동시

	var yAxis = [{
		title: {text: '첫번째 y축'}
	},{			
		title: {text: '두번째 y축'},
        opposite: true   	
	}];

sereis에서 참조할 yAxis를 변경 (default=0)

{
		name: '선 2',
		yAxis: 1, // 참조할 yAxis의 index번호
		data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
		type: 'spline',
		lineWidth:0, 
		states: {
			hover:{
				lineWidthPlus: 0 
			}
		}
	}

y축 타이틀과 라벨 색변경은 스타일

labels:{
		style:{color: 'red'}
	},

title: {
		style: {color: 'red'},
		text: '범례2'
	}

범례바꾸기

legend객체

var legend = {
	layout: 'vertical', //레이아웃
	align: 'left', //범례 생성 위치
	verticalAlign: 'middle' // 범례의 정렬 위치
};

floating(true/false), x, y등의 값들을 설정해주어서
데이터 표시 영역 위에 범례가 위치하게할수도있음

범례설정안하려면?

Legend 초기화x
Layout 정의 x
enabled : false

tooltip: {
	valueDecimals: 2, //소수 자릿수 표시
	valuePrefix: '$', //값 앞에 $를 표시
	valueSuffix: ' USD' //값 뒤에 USD를 표시
}

각 그래프별 개별적 툴팁 단위를 주고싶다면 series에 tooltip 설정하기

	tooltip: {
		valueSuffix: 'KRW'
	}

최종 연습한 코드

-HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

    <div id="container" ></div>

-CSS

#container  {
  height: 360px;
  width: 800px;
  margin: 1em auto
}

-JS

Highcharts.chart('container', {
    title: {
        text: '타이틀'
    },
    subtitle: {
        text: '서브타이틀'
    },
    yAxis : [
    { label : { style : {color:'red'}}},
    {
        title: {
            text: 'y축 타이틀',
            style : {color : 'red'}
        }},
       {title : {
           text: '두번째 y축'
        } ,
        opposite: true 
    }],

    xAxis: {
        title: {
        	text: 'x축 타이틀'
        }
    },
		
    /* 범례를 우측 세로로 정렬 */
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'middle'
    },
    tooltip: {
	valuePrefix: '$', //값 앞에 $를 표시
	valueSuffix: 'USD' //값 뒤에 USD를 표시
},   

    series: [{
        name: '범례 1',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
        type: 'column'
    }, {
        name: '범례 2',
        yAxis: 1, 
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
        lineWidth:0, 
		states: {
			hover:{
				lineWidthPlus: 0 
			}
		}
    }, {
        name: '범례 3',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
        tooltip: {
				valueSuffix: 'KRW'
	}
    }],
        credits : {
      text: '네이버 나와라...ㅋ',
      href: 'https://www.naver.com/'
}
});

작성한 jsfiddle
https://jsfiddle.net/azxfLnrg/1/

참고한 블로그
https://gkawjdgml.tistory.com/121
https://beomdev714.tistory.com/2