Highcharts-퀵 가이드
Highcharts대화식 차트 기능을 추가하여 웹 애플리케이션을 향상시키기위한 순수한 JavaScript 기반 차트 라이브러리입니다. 다양한 차트를 지원합니다. 차트는 Chrome, Firefox, Safari, Internet Explorer (IE)와 같은 표준 브라우저에서 SVG를 사용하여 그려집니다. 레거시 IE 6에서는 VML이 그래픽을 그리는 데 사용됩니다.
Highcharts 라이브러리의 특징
이제 Highcharts 라이브러리의 몇 가지 중요한 기능에 대해 논의하겠습니다.
Compatability − Android 및 iOS와 같은 모든 주요 브라우저 및 모바일 플랫폼에서 거의 작동하지 않습니다.
Multitouch Support − Android 및 iOS와 같은 터치 스크린 기반 플랫폼에서 멀티 터치를 지원하며 iPhone / iPad 및 Android 기반 스마트 폰 / 태블릿에 이상적입니다.
Free to Use − 오픈 소스이며 비상업적 인 목적으로 무료로 사용할 수 있습니다.
Lightweight − 거의 35KB 크기의 highcharts.js 코어 라이브러리는 매우 가벼운 라이브러리입니다.
Simple Configurations − json을 사용하여 차트의 다양한 구성을 정의하고 배우고 사용하기 매우 쉽습니다.
Dynamic − 차트 생성 후에도 차트 수정이 가능합니다.
Multiple axes− x, y 축으로 제한되지 않습니다. 차트에서 다중 축을 지원합니다.
Configurable tooltips− 사용자가 차트의 임의의 지점을 가리키면 도구 설명이 표시됩니다. Highcharts는 툴팁을 프로그래밍 방식으로 제어하는 툴팁 내장 포맷터 또는 콜백 포맷터를 제공합니다.
DateTime support− 날짜 시간을 특별히 다루십시오. 날짜 현명한 카테고리에 대한 수많은 내장 컨트롤을 제공합니다.
Export − 내보내기 기능을 활성화하여 차트를 PDF / PNG / JPG / SVG 형식으로 내 보냅니다.
Print − 웹 페이지를 사용하여 차트를 인쇄합니다.
Zoomablity − 데이터를보다 정확하게 볼 수 있도록 확대 / 축소 차트를 지원합니다.
External data− 서버에서 동적으로 데이터로드를 지원합니다. 콜백 함수를 사용하여 데이터를 제어 할 수 있습니다.
Text Rotation − 모든 방향으로 라벨 회전을 지원합니다.
지원되는 차트 유형
Highcharts 라이브러리는 다음 유형의 차트를 제공합니다-
| Sr. 아니. | 차트 유형 및 설명 |
|---|---|
| 1 | Line Charts 선 / 스플라인 기반 차트를 그리는 데 사용됩니다. |
| 2 | Area Charts 영역 별 차트를 그리는 데 사용됩니다. |
| 삼 | Pie Charts 원형 차트를 그리는 데 사용됩니다. |
| 4 | Scatter Charts 흩어진 차트를 그리는 데 사용됩니다. |
| 5 | Bubble Charts 거품 기반 차트를 그리는 데 사용됩니다. |
| 6 | Dynamic Charts 사용자가 차트를 수정할 수있는 동적 차트를 그리는 데 사용됩니다. |
| 7 | Combinations 다양한 차트의 조합을 그리는 데 사용됩니다. |
| 8 | 3D Charts 3D 차트를 그리는 데 사용됩니다. |
| 9 | Angular Gauges 속도계 유형 차트를 그리는 데 사용됩니다. |
| 10 | Heat Maps 히트 맵을 그리는 데 사용됩니다. |
| 11 | Tree Maps 트리 맵을 그리는 데 사용됩니다. |
다음 장에서는 위에서 언급 한 각 유형의 차트를 예제와 함께 자세히 설명합니다.
특허
Highcharts는 오픈 소스이며 비상업적 목적으로 무료로 사용할 수 있습니다. 상업 프로젝트에서 Highcharts를 사용하려면 링크를 따르십시오- 라이센스 및 가격
이 장에서는 웹 애플리케이션 개발에 사용할 Highcharts 라이브러리를 설정하는 방법에 대해 설명합니다.
Highcharts에는 종속성으로 jQuery가 필요합니다. 먼저 jQuery 라이브러리를 설치 한 다음 Highcharts 라이브러리를 설치합니다.
jQuery 설치
jQuery를 사용하는 방법에는 두 가지가 있습니다.
Download− jQuery.com 에서 로컬로 다운로드하여 사용하십시오.
CDN access− 또한 CDN에 액세스 할 수 있습니다. CDN은 전 세계의 지역 데이터 센터에 대한 액세스를 제공합니다. 이 경우 Google 호스트입니다. 즉, CDN을 사용하면 자체 서버에서 일련의 외부 서버로 파일 호스팅 책임이 이동합니다. 또한 웹 페이지 방문자가 동일한 CDN에서 jQuery 사본을 이미 다운로드 한 경우 다시 다운로드 할 필요가 없다는 이점도 있습니다.
다운로드 한 jQuery 사용
다음 스크립트를 사용하여 HTML 페이지에 jQuery JavaScript 파일을 포함하십시오-
<head>
<script src = "/jquery/jquery.min.js"></script>
</head>CDN 사용
이 튜토리얼에서는 jQuery 라이브러리의 CDN 버전을 사용하고 있습니다.
다음 스크립트를 사용하여 HTML 페이지에 jQuery JavaScript 파일을 포함하십시오-
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</head>Highcharts 설치
다음은 Highcharts를 사용하는 두 가지 방법입니다.
Download − 로컬에서 다운로드
CDN access− 또한 CDN에 액세스 할 수 있습니다. CDN은 전 세계의 지역 데이터 센터에 대한 액세스를 제공합니다. 이 경우 Highcharts 호스트-Code.Highcharts.Com.
다운로드 한 하이 차트 사용
다음 스크립트를 사용하여 HTML 페이지에 Highcharts JavaScript 파일을 포함합니다.
<head>
<script src = "/highcharts/highcharts.js"></script>
</head>CDN 사용
이 튜토리얼 전체에서 Highcharts 라이브러리의 CDN 버전을 사용합니다.
다음 스크립트를 사용하여 HTML 페이지에 Highcharts JavaScript 파일을 포함합니다.
<head>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>이 장에서는 Highcharts API를 사용하여 차트를 그리는 데 필요한 구성을 보여줍니다.
1 단계 : HTML 페이지 만들기
jQuery 및 Highcharts 자바 스크립트 라이브러리로 HTML 페이지를 만듭니다.
HighchartsTestHarness.htm
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
<script language = "JavaScript">
$(document).ready(function() {
});
</script>
</body>
</html>여기 container div는 Highcharts 라이브러리를 사용하여 그린 차트를 포함하는 데 사용됩니다.
2 단계 : 구성 만들기
Highcharts 라이브러리는 json 구문을 사용하는 매우 간단한 구성을 사용합니다.
$('#container').highcharts(json);여기서 json은 Highcharts 라이브러리가 highcharts () 메서드를 사용하여 컨테이너 div 내에 차트를 그리는 데 사용하는 json 데이터 및 구성을 나타냅니다. 이제 필요한 json 문자열을 만들기 위해 다양한 매개 변수를 구성합니다.
표제
차트 제목을 구성합니다.
var title = {
text: 'Monthly Average Temperature'
};부제
차트의 자막을 구성합니다.
var subtitle = {
text: 'Source: WorldClimate.com'
};x 축
X 축에 표시 할 티커를 구성합니다.
var xAxis = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
,'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};y 축
Y 축에 표시 할 제목, 플롯 라인을 구성합니다.
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};툴팁
툴팁을 구성합니다. 값 (y 축) 뒤에 추가 할 접미사를 입력합니다.
var tooltip = {
valueSuffix: '\xB0C'
}전설
다른 속성과 함께 차트 오른쪽에 표시 할 범례를 구성합니다.
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};시리즈
차트에 표시 할 데이터를 구성합니다. 계열은이 배열의 각 요소가 차트의 단일 선을 나타내는 배열입니다.
var series = [
{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}
];3 단계 : json 데이터 빌드
모든 구성을 결합하십시오.
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;4 단계 : 차트 그리기
$('#container').highcharts(json);예
구성 구문을 더 이해하려면 다음 예제를 고려하십시오.
highcharts_configuration.htm
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
<script language = "JavaScript">
$(document).ready(function() {
var title = {
text: 'Monthly Average Temperature'
};
var subtitle = {
text: 'Source: WorldClimate.com'
};
var xAxis = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
var tooltip = {
valueSuffix: '\xB0C'
}
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};
var series = [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
16.6, 14.2, 10.3, 6.6, 4.8]
}
];
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>결과
결과를 확인하십시오.
선 차트는 선 / 스플라인 기반 차트를 그리는 데 사용됩니다. 이 섹션에서는 다양한 유형의 선 및 스플라인 기반 차트에 대해 설명합니다.
| Sr. 아니. | 차트 유형 및 설명 |
|---|---|
| 1 | 기선 기본 라인 차트. |
| 2 | 데이터 레이블 사용 데이터 레이블이있는 차트. |
| 삼 | Ajax로드 된 데이터, 클릭 가능한 포인트 서버에서 데이터를 검색 한 후 그린 차트. |
| 4 | 시계열, 확대 / 축소 가능 시계열 차트. |
| 5 | 반전 된 축이있는 스플라인 축이 반전 된 스플라인 차트. |
| 6 | 기호가있는 스플라인 열 / 비 기호를 사용한 스플라인 차트. |
| 7 | 플롯 밴드가있는 스플라인 플롯 밴드가있는 스플라인 차트. |
| 8 | 불규칙한 간격의 시간 데이터 많은 시간 기반 데이터 차트. |
| 9 | 대수 축 로그 축을 나타내는 차트입니다. |
영역 차트는 영역 기반 차트를 그리는 데 사용됩니다. 이 섹션에서는 다양한 유형의 영역 기반 차트에 대해 설명합니다.
| Sr. 아니. | 차트 유형 및 설명 |
|---|---|
| 1 | 기본 영역 기본 영역 차트. |
| 2 | 음수 값이있는 영역 음수 값이있는 영역 차트입니다. |
| 삼 | 누적 영역 영역이 서로 겹쳐있는 차트입니다. |
| 4 | 백분율 영역 백분율 용어로 데이터가있는 차트. |
| 5 | 누락 된 점이있는 영역 데이터에 누락 된 점이있는 차트. |
| 6 | 반전 된 축 반전 된 축을 사용하는 영역. |
| 7 | 영역 스플라인 스플라인을 사용한 영역 차트. |
| 8 | 지역 범위 범위를 사용하는 영역 차트. |
| 9 | 지역 범위 및 선 범위와 선을 사용한 영역 차트. |
막대 차트는 영역 기반 차트를 그리는 데 사용됩니다. 이 섹션에서는 다양한 유형의 막대 기반 차트에 대해 설명합니다.
| Sr. 아니. | 차트 유형 및 설명 |
|---|---|
| 1 | 기본 바 기본 막대 차트. |
| 2 | 누적 막대 막대가 서로 겹쳐있는 막대 차트. |
| 삼 | 네거티브 스택 영역 음수 스택이있는 막대 차트. |
기둥 형 차트는 기둥 형 차트를 그리는 데 사용됩니다. 이 섹션에서는 다양한 유형의 열 기반 차트에 대해 설명합니다.
| Sr. 아니. | 차트 유형 및 설명 |
|---|---|
| 1 | 기본 컬럼 기본 열 차트. |
| 2 | 음수 값이있는 열 음수 값이있는 기둥 형 차트입니다. |
| 삼 | 누적 컬럼 열이 서로 겹쳐있는 차트입니다. |
| 4 | 누적 및 그룹화 열 누적 및 그룹화 형식의 열이있는 차트. |
| 5 | 누적 비율이있는 열 누적 비율이있는 차트. |
| 6 | 회전 된 레이블이있는 열 열에 레이블이 회전 된 열 차트. |
| 7 | 드릴 다운이있는 열 드릴 다운 기능이있는 기둥 형 차트. |
| 8 | 고정 배치가있는 기둥 고정 배치가있는 기둥 형 차트. |
| 9 | HTML 테이블에 정의 된 데이터 HTML 테이블에 정의 된 데이터를 사용하는 기둥 형 차트. |
| 10 | 컬럼 범위 범위를 사용하는 기둥 형 차트. |
원형 차트는 원형 기반 차트를 그리는 데 사용됩니다. 이 섹션에서는 다양한 유형의 원형 기반 차트에 대해 설명합니다.
| Sr. 아니. | 차트 유형 및 설명 |
|---|---|
| 1 | 기본 파이 기본 원형 차트. |
| 2 | 전설이있는 파이 범례가있는 원형 차트. |
| 삼 | 도넛 차트 도넛 차트. |
| 4 | 세미 서클 도넛 반원형 도넛 형 차트. |
| 5 | 드릴 다운이있는 파이 드릴 다운 기능이있는 원형 차트. |
| 6 | 그라데이션이있는 원형 차트 그라데이션 채우기가있는 원형 차트. |
| 7 | 단색 원형 차트 단색 채우기가있는 원형 차트. |
분산 형 차트는 분산 형 차트를 그리는 데 사용됩니다. 이 섹션에서는 다양한 유형의 분산 형 차트에 대해 설명합니다.
| Sr. 아니. | 차트 유형 및 설명 |
|---|---|
| 1 | 분산 형 차트 분산 형 차트. |
거품 형 차트는 거품 형 차트를 그리는 데 사용됩니다. 이 섹션에서는 다양한 유형의 거품 기반 차트에 대해 설명합니다.
| Sr. 아니. | 차트 유형 및 설명 |
|---|---|
| 1 | 거품 차트 거품 차트. |
| 2 | 3D 거품 차트 3D 거품 차트. |
동적 차트는 차트 렌더링 후 데이터가 변경 될 수있는 데이터 기반 차트를 그리는 데 사용됩니다. 이 섹션에서는 다양한 유형의 동적 차트에 대해 설명합니다.
| Sr. 아니. | 차트 유형 및 설명 |
|---|---|
| 1 | 매초 스플라인 업데이트 매초 업데이트되는 스플라인 차트. |
| 2 | 포인트를 추가하려면 클릭하세요. 포인트 추가 기능이있는 차트. |
혼합형 차트는 혼합형 차트를 그리는 데 사용됩니다. 예를 들어 원형 차트가있는 막대 차트입니다. 이 섹션에서는 다양한 유형의 조합 차트에 대해 설명합니다.
| Sr. 아니. | 차트 유형 및 설명 |
|---|---|
| 1 | 열, 선 및 원형 열, 선 및 원형 차트. |
| 2 | 이중 축, 라인 및 컬럼 이중 축, 선 및 열이있는 차트. |
| 삼 | 다중 축 여러 축이있는 차트. |
| 4 | 회귀선이있는 분산 형 회귀선이있는 분산 형 차트. |
3D 차트는 3 차원 차트를 그리는 데 사용됩니다. 이 섹션에서는 다양한 유형의 3D 차트에 대해 설명합니다.
| Sr. 아니. | 차트 유형 및 설명 |
|---|---|
| 1 | 3D 기둥 3D 기둥 차트. |
| 2 | null이있는 3D 기둥 null 및 0 값이있는 3D 기둥 차트. |
| 삼 | 스태킹이있는 3D 기둥 스택 및 그룹화가 포함 된 3D 기둥 차트. |
| 4 | 3D 파이 3D 원형 차트. |
| 5 | 3D 도넛 3D 도넛 차트. |
Angular Gauges 차트는 미터 / 게이지 유형 차트를 그리는 데 사용됩니다. 이 섹션에서는 다양한 유형의 각도 게이지 차트에 대해 설명합니다.
| Sr. 아니. | 차트 유형 및 설명 |
|---|---|
| 1 | 각도 게이지 각도 게이지 차트. |
| 2 | 솔리드 게이지 솔리드 게이지 차트. |
| 삼 | 시계 시계. |
| 4 | 이중 축이있는 게이지 이중 축이있는 게이지 차트. |
| 5 | VU 미터 VU 미터 차트. |
히트 맵 차트는 히트 맵 유형 차트를 그리는 데 사용됩니다. 이 섹션에서는 다양한 유형의 히트 맵에 대해 설명합니다.
| Sr. 아니. | 차트 유형 및 설명 |
|---|---|
| 1 | 히트 맵 히트 맵. |
| 2 | 대형 히트 맵 대형 히트 맵. |
트리 맵 차트는 트리 맵 유형 차트를 그리는 데 사용됩니다. 이 섹션에서는 다양한 유형의 트리 맵에 대해 설명합니다.
| Sr. 아니. | 차트 유형 및 설명 |
|---|---|
| 1 | 트리 맵 색상 축이있는 트리 맵. |
| 2 | 레벨이있는 트리 맵 레벨이있는 트리 맵. |
| 삼 | 큰 나무지도 큰 나무지도. |