Knowledge Map
하이차트 사용법 본문
Highcharts
설치
/* CDN */
<script src="http://code.highcharts.com/highcharts.js"></script>
/* NPM */
> npm install highcharts --save
<script src="node_modules/highcharts/highcharts.js"></script>
/* BOWER */
> bower install highcharts
<script src="/bower_components/highcharts/highcharts.js"></script>첫 그래프 생성
/* index.html */
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<div id="container2" style="width: 550px; height: 400px; margin: 0 auto"></div>
</body>
<!-- 반드시 jquery -> highcharts -> 그래프 코드 순서로 둔다! -->
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script src="./node_modules/highcharts/highcharts.js"></script>
<script src="./js/firstchart.js"></script>
</html>/* firstchart.js */
$(function () {
var myChart = Highcharts.chart('container', {
/* 차트종류 */
chart: { type: 'line' },
/* 제목 / 부제목 */
title: { text: 'Fruit Consumption' },
subtitle: { text: 'Fruit Consumption Decenber'}
/* X축 / Y 축 */
xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] },
yAxis: { title: { text: 'Fruit eaten' } },
/* 범례 */
legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth:0 },
/* 툴팁 */
tooltip: {valueSuffix: '개'},
/* 표 데이터 */
series: [
{ name: 'Jane', data: [1, 0, 4] },
{ name: 'John', data: [5, 7, 3] }
]
});
});
개별 그래프 만들기
- series에 data 를 여러 개 추가하면 여러개의 그래프가 만들어진다.
- 차트 종류는 area, areaspline, bar, column, line, pie, spline 등이 있으며 기타 참조
- 여러개의 차트는 각각 new Highcharts.Chart 를 함으로서 여러개의 개별적인 차트 생성 가능
- setOptions를 통해서 여러개의 개별적인 차트의 공통 스타일 적용
/* type을 추가하면 개별 그래프가 만들어진다. */
series: [
{ type: 'column', name: 'Jane', data: [1, 0, 4] },
{ type: 'line', name: 'John', data: [5, 7, 3] }
]
/* 한 페이지에 여러개의 그래프를 추가하고 싶을때 */
/* firstchart.js */
$(function() {
/* 모든 차트에 대해서 동일한 옵션 적용을 위해서 setOptions를 사용한다. */
Highcharts.setOptions({
chart: {
type:'line',
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 2000)']
]
},
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
plotBorderWidth: 1
}
});
/* char1, char2 로 개별적으로 차트를 줄수 있다. */
/* chart type은 chart, series안에서도 각각 줄수가 있다. */
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'test1',
type: 'column',
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],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 3600 * 1000 // one hour
}
,
{
name: 'test22',
data: [39.9, 41.5, 116.4, 119.2, 164.0, 156.0,
125.6, 138.5, 206.4, 124.1, 195.6, 154.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 3600 * 1000 // one hour
}
]
});
/* 인스턴스가 형성될때, 하나의 아이디에 2개의 인스턴스가 들어가면 마지막 인스턴스가 적용된다. */
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container2',
type: 'bar'
},
xAxis: {
type: 'datetime'
},
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],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 3600 * 1000 // one hour
}]
});
});
'WEB > JAVASCRIPT' 카테고리의 다른 글
| addEventListener 에 들어갈수 있는 이벤트들 (0) | 2016.11.02 |
|---|---|
| 좌클, 우클 구별하기 (0) | 2016.11.02 |
| 드래그 막기 (0) | 2016.10.30 |
| 팁 (0) | 2016.10.19 |
| dom 으로 인라인 태그 값을 넣을 경우 생기는 문제 (0) | 2016.08.09 |
Comments