웹 화면에 그래프를 활용하여 데이터를 표출할 목적으로 API를 탐색하다 하이차트를 접하게 되었다. 나중에 알고보니 보편적으로 많이 사용되고 있는 API라고 한다. 사업용으로 사용하지 않는다면 무료 이용이지만, 반대로 사업용으로 활용할 목적이라면 어느정도의 비용을 지불해야한다고 하니 유의해두는 것이 좋다.
아래의 링크를 통해 API활용에 대한 내용을 파악할 수 있다.
Interactive javascript charts library
We make it easy for developers to create charts for web and mobile platforms. For Javascript, Angular, React, VueJS, iOS, R, .NET, Python, and more.
www.highcharts.com
목차는 아래와 같이 하였다.
1. 그래프 생성
1) 꺾은선 그래프 생성
2) 그래프 제목 제어
3) 카피라이터 제거
4) 그래프 타입 : 막대 그래프 생성
2. 그래프의 y축 제어
1) y축의 추가
2) y축 라벨 변경
3. 범례의 조작
4. tooltip의 조작
1. 그래프 생성
0) 모듈
high charts 공식 홈페이지를 확인해보면 알겠지만, 사용하고자 하는 범위에 따라 추가되는 모듈이 달라진다. 본인의 경우는 목차에서 언급한 것과 동일한 내용만을 다룰 것이기에 그에 필요한 모듈만 추가하였다. 아래의 코드는 필수이다.
<script src="https://code.highcharts.com/highcharts.js"/>
그래프 생성을 위한 javascript코드를 정상적으로 작성하더라도 간혹 에러로 인해 정상 실행되지 않는 경우가 있는데, 스크립트의 호출이 html요소를 읽는 것 보다 먼저 진행되었기에 어떤 요소에 차트를 그릴 것인지 인식하지 못하는 경우 있으므로, 가급적 스크립트 호출은 생성할 html요소보다 하단에 배치되는 것이 오류를 줄일 수 있는 방법이라고 한다.
위의 필수 모듈을 제외하고 부가적인 모듈에 대해 정리해보았다. 이외에도 해당 API를 본격적으로 사용하기 앞서있다면 참고 문서에 매우 다양한 모듈들이 존재하니, 필요한 모듈을 그때그때 추가하여 주는것이 중요하다.
<%-- series의 name값을 선 위에 표시해주는데 필요한 모듈 --%>
<script src="https://code.highcharts.com/modules/series-label.js"/></script>
<%-- 오른쪽 상단에 삼발버튼 --%>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
1) 꺾은선 그래프 생성
예제를 활용하여 꺾은선 그래프를 생성해보았다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="chart.css">
<meta charset="UTF-8">
<title>하이차트 테스트</title>
</head>
<body>
<figure class="highcharts-figure">
<div id="chart01"></div>
</figure>
</body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="chart.js"> </script>
</html>@charset "UTF-8";
.highcharts-figure,
.highcharts-data-table table {
min-width: 360px;
max-width: 800px;
margin: 1em auto;
}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'
}
}
}]
}
});
* High Charts 비동기 처리 *
화면 전환 없이 controller를 통해 전달받은 데이터를 바로 그래프로 표출하기 위해서 비동기 처리가 가능하도록 json형식으로 각 객체들을 관리하고 그래프를 생성할 수 있도록 하는 방식으로 코드를 수정해 볼 예정이다.
가장 먼저 Ajax처리를 위해 제이쿼리 CND를 선언한다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
위에 작성되어있던 스크립트 코드와 상이한 부분이 있으니 천천히 비교하며 분석해 보는 것을 추천한다.
$(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);
});
2) 그래프 제목 제어
사진과 같이 제목을 제거하기 위해서 그냥 title, subtitle, yAxis.title객체의 text와 값에 대한 설정 모두를 삭제하면 될 것이라고 생각하겠지만, 각 title들의 text를 정의하지 않는다면 상단의 좌측 사진과 같이 디폴트 값이 설정되어 그래프에 표시된다. 사진을 참고해 보아 subtitle의 경우는 따로 초기화 하지 않는다면 표시되지 않는것을 알 수 있다.
우측 사진과 같이 아예 아무 text도 띄우고 싶지 않다면, 각 title객체의 text값을 null로 주면 된다. 이때 'null'이 아니라 null로 명시해 주는 것을 착각해선 안된다.
var title = {text: null};
var yAxis = {
title: {text: null}
};
3) 카피라이터 제거
처음 그래프를 생성하게 되면 좌측 사진과 같이 하이차트의 카피라이터가 디폴트로 달려있으며, 해당 영역을 클릭하게 되면 하이차트 공식홈페이지로 href가 연결되게 된다.
우측 사진과 같이 카피라이터를 제거하고 싶다면 credits객체에 접근하여 관리가 가능하다. 아래와 같이 enabled의 값만 변경해주면 카피라이터가 제거되는 것을 확인할 수 있다.
var credits= {
enabled: false
};
json_chart.credits=credits;
혹시 만약 제거가 아니라 다른 text와 하이퍼링크를 연결하는 것이 목적이라면 아래와 같이 변경이 가능하다. 이때 credits객체는 style또한 설정이 가능하다.
var credits = {
text: '네이버 ㄱㄱ',
href: 'https://www.naver.com/'
};
4) 그래프 타입 : 막대 그래프 생성
각 xAxis 카테고리에 해당하는 값을 표시하는 객체는 series가 담당하고 있다. 하이차트에서는 다양한 그래프 타입이 존재하며, 원하는 타입명을 type의 값으로 설정하기만 한다면 다양한 타입의 그래프를 그릴 수 있다.
변경된 변수 series의 내용은 아래와 같다.
var 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],
type: 'spline',
//=================================================
[아래의 두 설정이 모두 있어야만,
마우스 오버의 유무 상관 없이 선이 제거되어 표시됨]
lineWidth:0, // 그냥 봤을때 선 안보이기
states: {
hover:{
lineWidthPlus: 0 // 마우스 오버시 선 안보이기
}
}
//=================================================
},{
name: '선 3',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}];
2. 그래프의 y축 제어
1) y축의 추가
좌측의 이미지같은 경우는 그저 y축에 title을 하나 더 생성하는 방식이다. yAxis변수를 배열형태로 변경하여 값을 설정하였다.
var yAxis = [{
title: {text: '첫번째 y축'}
},{
title: {text: '두번째 y축'},
}];
우측의 이미지같은 경우에는 이외 설정을 별도 추가한 것이다. opposite설정을 추가하고, sereis에서 참조할 yAxis를 변경해주면 된다. (default=0)
var yAxis = [{
title: {text: '첫번째 y축'}
},{
title: {text: '두번째 y축'},
opposite: true //해당 설정을 통해 '두번째 y축'은 우측으로 정렬
}];
var series = [{
name: '선 1',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
type: 'column'
},{
name: '선 2',
yAxis: 1, // 참조할 yAxis의 index번호
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
type: 'spline',
lineWidth:0, //선 안보이기
states: {
hover:{
lineWidthPlus: 0 // 마우스 오버시 선 안보이기
}
}
},{
name: '선 3',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}];
2) y축 라벨 변경
y축의 라벨은 xAxis의 카테고리 값에 해당하는 series data를 반영하여 자동 생성되는데, 하이차트 공식 홈페이지를 아무리 찾아도 y축 라벨을 조작하는 방법이 명시되어있지 않아 개인적으로 해결 방법을 찾아보았다.
우선 원하는 y축 라벨을 명시하기 위해 특정 y축에만 class를 부여해보았다.
var yAxis = [{
title: {text: '첫번째 y축'}
},{
title: {text: '두번째 y축'},
opposite: true,
className: 'str' // 클래스 부여
}];
이후 웹페이지를 분석해보니 본인이 수정을 원하는 y축은 <g>요소 내부에 <text>요소가 선언된 구성으로 이루어져있음을 확인하였으나 왜인지는 모르지만 본인이 명시를 목적으로 추가한 str이라는 클래스가 다른 요소에도 적용 된 모습을 확인하였다.
이후 해당 페이지 로딩시 차트의 각 text요소에 접근하여 원하는대로 내용을 변경하기 위해 아래와 같은 스크립트 코드를 추가하였다.
$(document).ready(function() {
var text= $('.str:eq(2) > text').length; //두번째에 위치하는 str클래스의 자식요소인 <text> : 6
var string=['가','나', '다', '라', '마', '바', '사', '아', '자', '차', '카', '타', '파', '하'];
for(var i=0; i<text; i++){ // y축 text의 개수만큼 반복
$('.str:eq(2) > text:eq('+i+')').text(string[i]);
}
});
선택자에 대한 내용이 이해가 어렵다면 아래의 링크를 통해 내용을 이해할 수 있다.
http://www.tcpschool.com/jquery/jq_elementSelection_jqSelector
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
* y축 라벨 일괄변경 *
혹여 위에 설명된 내용처럼 각각의 text가 아니라, 모든 text요소에 동일한 문자열을 입력하고싶다면, format을 활용하여 쉽게 이미지 예시와 같이 표현할 수 있다.
해당되는 예제를 링크로 첨부하였다. 코드와 그에대한 반응을 즉각적으로 확인할 수 있어 응용하면서 이해할 수 있다.
3. 범례의 조작
범례는 legend객체가 관리하는 영역이다. 범례의 위치, 텍스트의 정렬, 레이아웃 등을 조작할 수 있다. 이외에도 다양한 조작이 가능하지만 간결한 설명을 위해 가장 필요한 부분에 대해서만 언급하였다.
var legend = {
layout: 'vertical',//레이아웃
align: 'left', //범례 생성 위치
verticalAlign: 'middle' // 범례의 구체적인 정렬 위치
};
예상가능하다싶이 align과 같은 정렬과 관련된 값은 좌, 우, 상단, 하단 등으로 조절이 가능하겠지만 레이아웃에 배치될 값은 아래의 예시와 같이 할 수 있다.
layout: 'horizontal'// 수평으로(Default)
layout: 'proximate'//해당 범례가 가리키는 그래프항목과 가깝게
layout: 'vertical' //수직으로
// 기본적으로 범례는 데이터가 표시되는 영역의 바깥에 위치하지만,
// floating(true/false), x, y등의 값들을 설정해주어서
// 데이터 표시 영역 위에 범례가 위치하도록 할 수 있다.
혹은 범례를 아예 미표시하고싶다면, 아예 legend를 초기화 하지 않거나, 혹은 legend를 생성하더라도 layout을 정의하지 않으면 된다. 본인이 생각하는 방법은 총 3가지 이며, 그 예시는 다음과 같다.
// 1. 아예 legend초기화를 안하기..!
// 2. layout을 정의하지 않기
var legend = {
//layout: 'vertical',
align: 'left',
verticalAlign: 'middle'
};
// 3. enabled활용하기
var legend = {
layout: 'vertical',
align: 'left',
verticalAlign: 'middle'
enabled: false, //범례 미표시
};
이때 enabled: false라는 설정을 다양한 객체에 활용함으로써 표시하고싶지 않은 객체들을 미표시상태로 표현할 수 있다.(ex: x축...)
4. tooltip의 조작
tooltip은 그래프에 표현된 값에 마우스를 오버하면 표시되는 값에 대한 설명상자이다. 마우스 오버 상태에서의 캡처 화질이 깨지므로 이미지 첨부는 최소화 하였다. 해당 객체를 통해 tooltip의 박스 색을 변경하거나, 테두리에 대해 관여하거나 혹은 값을 나타낼때 단위 등을 표현할 수도 있다.
단위 등을 표현하기 위한 코드의 예시는 다음과 같다. 추가로 하단의 링크를 통해 code pen으로 예제를 확인할 수 있다.
tooltip: {
valueDecimals: 2, //소수 자릿수 표시
valuePrefix: '$', //값 앞에 $를 표시
valueSuffix: ' USD' //값 뒤에 USD를 표시
}Highcharts Demo - JSFiddle - Code Playground
jsfiddle.net
각 series에 대한 tooltip에 나타날 단위를 다르게 하고 싶을 수 있다. 아래의 그래프를 예시로 들었을때, 빨간 그래프는 값 뒤에 ℃를 표시하고, 초록 그래프는 mm로 단위를 표시하고싶다고 가정하자.
위의 예시와 같은 방법으로 사용한다면 개별적으로 단위를 설정하기가 어려울 것이다. 그런 경우에는 series에 tooltip을 포함하도록 할 수 있다. 그 예시는 아래와 같다.
var series01= [{
color: '#33ff00 ', //그래프의 색상:연두색
name: '강수',
type: 'column',
yAxis: 1,
data: [0.2, 0.5, 0.5, 0.6, 0.6, 0.55, 0.31, 0.1]
tooltip: {
valueSuffix: 'mm'
}
}, {
color: 'red', //그래프의 색상:빨강색
name: '기온(°C)',
data: [14, 16, 17, 22, 18, 20, 19, 15],
tooltip: {
valueSuffix: '\xB0C' //온도표시임
}
}]
추가로 y축의 title과 label의 색변경에 대해 설명하자면,
각 객체에 style을 정의해주는 방식으로 진행하였다. 예시는 하단에 첨부하였다.
var yAxis01 = [{
labels:{
style:{color: 'red'}
},
tickInterval: 4,
title: {
style: {color: 'red'},
text: '기온(°C)'
}
}, {
labels:{
style:{color: '#33ff00 '}
},
title: {
style: {color: '#33ff00 '},
text: '강수'
},
opposite: true
}];
'JavaScript' 카테고리의 다른 글
| [지도API] Open Layers_2 (0) | 2022.11.21 |
|---|---|
| Object_value로 key 참조하기 (0) | 2022.09.23 |
| [지도 API] OpenLayers_1 (0) | 2022.07.06 |
| URL, API (0) | 2022.02.22 |
| 타이밍 이벤트 & 단원 총정리 (0) | 2022.02.18 |
