목차
1. 하이차트 소개
2. 하이차트 시스템 요구 사항 및 설치
3. 하이차트로 차트 도식하기
4. 객체 리터럴 (Object literal) 표기법
5. 하이차트 표준 코드 구조
1. 하이차트 소개
1. 2009년 처음 공개된 순수 자바스크립트로 작성된 차트 구현 소프트웨어 라이브러리
2. 노르웨이 Highsoft사에서 개발3. 웹 브라우저에서 쉽게 차트 도식이 가능
4. 이외에도 재무 관련 차트를 구현하는데 특화된 Highstock과 지도 기반의 차트를 구현하는 Highmap과 Highcharts Cloud를 서비스
2. 하이차트 시스템 요구 사항 및 설치
1. 모바일 장치를 포함한 모든 웹 브라우저에서 작동 가능
2. CDN 혹은 highcharts.js 파일 로드
3. npm
4. 표준 브라우저에서는 그래픽 렌더링에 SVG (Scalable Vector Graphics)를 사용하나, IE8 이하의 브라우저에서는 VML (Vector Markup Language) 사용
-- ex) IE 6-8은 polyfills을 사용하여 VML로 렌더링
3. 하이차트로 차트 도식하기
1. div태그에 별도의 넓이(width), 높이(height)값을 지정 후 자바스크립트로 작성
2. 기본적으로 1개의 div태그에 1개의 그래프 도식
3. 여러 옵션들을 활용하여 다양한 형태의 그래프를 도식 가능
4. 상세하게 코드를 작성하지 않아도 default 설정된 부분으로 인해 일반적인 차트 도식 가능
5. 코드는 객체 리터럴 (Object literal) 표기법을 권장
4. 객체 리터럴 (Object literal) 표기법
// Bad code:
var options = new Object();
options.chart = new Object();
options.chart.renderTo = 'container';
options.chart.type = 'bar';
options.series = new Array();
options.series[0] = new Object();
options.series[0].name = 'Jane';
options.series[0].data = new Array(1, 0, 4);
// Good code:
var options = {
chart: {
renderTo: 'container',
type: 'bar'
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}]
};
5. 하이차트 표준 코드 구조
1. HTML
<html>
<head>
<!-- 1. 파일 로드-->
<script src="../../highcharts.js"></script>
<!-- 2. CDN -->
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id=”container”></div>
</body>
</html>
2. Javascript
Highcharts.chart('container', {
/* 차트명 */
title: {},
/* 차트 부제 */
subtitle: {},
/* X축 */
xAxis: {},
/* Y축 */
yAxis: {},
/* 범례 속성 */
legend: {},
/* 범례, 데이터 값 */
series: [ {} ],
/* 반응형 속성 */
responsive: {},
...
});
3. 미리보기
JSFiddle로 확인
간단한 차트 도식 - JSFiddle - Code Playground
jsfiddle.net