다른 명령
편집 요약 없음 |
편집 요약 없음 |
||
| 218번째 줄: | 218번째 줄: | ||
[[category:python]] | [[category:python]] | ||
[[category:highchart]] | |||
2025년 5월 20일 (화) 06:47 기준 최신판
Highcharts 사용법
- Highcharts는 JavaScript로 작성된 데이터 시각화 라이브러리로, 다양한 차트를 생성할 수 있습니다.
Highcharts 설치
- CDN 사용:
- HTML <script> 태그를 통해 CDN에서 Highcharts를 가져옵니다:
<script src="https://code.highcharts.com/highcharts.js"></script>
- npm 설치:
- Node.js 환경에서 설치:
npm install highcharts
기본 차트 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px;"></div>
<script>
// Highcharts 설정
Highcharts.chart('container', {
chart: {
type: 'line' // 차트 유형 (line, bar, pie 등)
},
title: {
text: 'Monthly Sales' // 차트 제목
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] // X축 데이터
},
yAxis: {
title: {
text: 'Sales (units)' // Y축 제목
}
},
series: [{
name: 'Product A',
data: [10, 20, 30, 25, 50] // 데이터
}, {
name: 'Product B',
data: [5, 15, 25, 20, 40]
}]
});
</script>
</body>
</html>
주요 설정
1) 차트 유형
- chart.type 을 사용해 차트 유형을 설정합니다.
- line (선형 차트)
- bar (막대형 차트)
- pie (파이 차트)
- column (세로 막대형 차트)
- area (영역형 차트)
chart: {
type: 'bar' // 막대형 차트로 설정
}
2) 데이터 시리즈
- series는 각 데이터 집합을 정의합니다.
series: [{
name: 'Category 1',
data: [10, 20, 30]
}, {
name: 'Category 2',
data: [15, 25, 35]
}]
3) X축 ,Y축
- X축 데이터:
xAxis: {
categories: ['Jan', 'Feb', 'Mar'] // X축 값
}
- Y축 제목:
yAxis: {
title: {
text: 'Revenue (in USD)' // Y축 제목
}
}
파이 차트 예제
<div id="pieChart" style="width: 600px; height: 400px;"></div>
<script>
Highcharts.chart('pieChart', {
chart: {
type: 'pie'
},
title: {
text: 'Market Share'
},
series: [{
name: 'Brands',
data: [
{ name: 'Apple', y: 40 },
{ name: 'Samsung', y: 30 },
{ name: 'Huawei', y: 20 },
{ name: 'Others', y: 10 }
]
}]
});
</script>
고급 기능
1) 툴팁 설정
- 마우스를 올렸을 때 툴팁을 커스터마이징합니다.
tooltip: {
pointFormat: '<b>{point.y}</b> units sold' // 툴팁 내용
}
2) 데이터 라벨 표시
- 차트 데이터에 직접 레이블을 추가합니다.
plotOptions: {
pie: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
}
3) 색상 사용자 정의
- 차트 색상을 직접 설정합니다.
colors: ['#FF0000', '#00FF00', '#0000FF']
Highcharts 라이브러리 확장
1) Highcharts Modules
- 더 많은 기능 추가: CDN 또는 npm을 사용해 추가 모듈 로드.
<script src="https://code.highcharts.com/modules/exporting.js">
- exporting.js: 차트를 PDF, PNG, SVG 등으로 다운로드할 수 있는 기능을 제공합니다.
- drilldown.js: 드릴다운 차트를 지원합니다.
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
2) 드릴다운 차트 예제
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Browser Market Shares'
},
xAxis: {
type: 'category'
},
series: [{
name: 'Browsers',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 62.74,
drilldown: 'Chrome'
}, {
name: 'Firefox',
y: 10.57,
drilldown: 'Firefox'
}]
}],
drilldown: {
series: [{
id: 'Chrome',
data: [
['v65.0', 0.1],
['v64.0', 1.3]
]
}, {
id: 'Firefox',
data: [
['v58.0', 1.02],
['v57.0', 7.36]
]
}]
}
});
Highcharts를 React, Vue, Angular에서 사용
highchart 활용팁
Highcharts 주요 팁
문서 참조
- Highcharts 공식 문서에서 모든 설정과 API를 확인할 수 있습니다.
데이터를 동적으로 업데이트
let chart = Highcharts.chart('container', { series: [{ data: [1, 2, 3] }] });
chart.series[0].setData([4, 5, 6]); // 데이터 업데이트
JSON 데이터 사용
- AJAX 요청을 통해 서버에서 데이터를 받아와 차트를 업데이트할 수 있습니다:
fetch('data.json')
.then(response => response.json())
.then(data => {
Highcharts.chart('container', {
series: [{ data }]
});
});