2025년 5월 19일 (월) 21:47에 Devcafe님의 편집

2025-05-19T21:47:07Z

← 이전 판		2025년 5월 20일 (화) 06:47 판
218번째 줄:		218번째 줄:

	[[category:python]]		[[category:python]]
			[[category:highchart]]

2025년 5월 19일 (월) 21:46에 Devcafe님의 편집

2025-05-19T21:46:37Z

← 이전 판		2025년 5월 20일 (화) 06:46 판
216번째 줄:		216번째 줄:
	== [[highchart 활용팁]] ==		== [[highchart 활용팁]] ==
	{{:highchart 활용팁}}		{{:highchart 활용팁}}

			[[category:python]]

Devcafe: /* Highcharts를 React, Vue, Angular에서 사용 */

2024-11-27T11:56:30Z

Highcharts를 React, Vue, Angular에서 사용

← 이전 판		2024년 11월 27일 (수) 20:56 판
213번째 줄:		213번째 줄:

	== [[Highcharts를 React, Vue, Angular에서 사용]] ==		== [[Highcharts를 React, Vue, Angular에서 사용]] ==

			== [[highchart 활용팁]] ==
			{{:highchart 활용팁}}

Devcafe: 새 문서: == Highcharts 사용법 == * Highcharts는 JavaScript로 작성된 데이터 시각화 라이브러리로, 다양한 차트를 생성할 수 있습니다. === Highcharts 설치 === # CDN 사용: #: HTML # npm 설치: #: Node.js 환경에서 설치: npm install highcharts === 기본 차...

2024-11-27T11:51:05Z

새 문서: == Highcharts 사용법 == * Highcharts는 JavaScript로 작성된 데이터 시각화 라이브러리로, 다양한 차트를 생성할 수 있습니다. === Highcharts 설치 === # CDN 사용: #: HTML <script> 태그를 통해 CDN에서 Highcharts를 가져옵니다: <source lang=html> <script src="https://code.highcharts.com/highcharts.js"></script> </source> # npm 설치: #: Node.js 환경에서 설치: <source lang=python> npm install highcharts </source> === 기본 차...

새 문서

== Highcharts 사용법 ==
* Highcharts는 JavaScript로 작성된 데이터 시각화 라이브러리로, 다양한 차트를 생성할 수 있습니다.

=== Highcharts 설치 ===
# CDN 사용:
#: HTML <script> 태그를 통해 CDN에서 Highcharts를 가져옵니다:
<source lang=html>
<script src="https://code.highcharts.com/highcharts.js"></script>
</source>
# npm 설치:
#: Node.js 환경에서 설치:
<source lang=python>
npm install highcharts
</source>

=== 기본 차트 생성 ===
<source lang=html>
<!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>
</source>

=== 주요 설정 ===
1) 차트 유형
* chart.type 을 사용해 차트 유형을 설정합니다.
** line (선형 차트)
** bar (막대형 차트)
** pie (파이 차트)
** column (세로 막대형 차트)
** area (영역형 차트)
<source lang=html>
chart: {
type: 'bar' // 막대형 차트로 설정
}
</source>

2) 데이터 시리즈
* series는 각 데이터 집합을 정의합니다.
<source lang=html>
series: [{
name: 'Category 1',
data: [10, 20, 30]
}, {
name: 'Category 2',
data: [15, 25, 35]
}]
</source>

3) X축 ,Y축
* X축 데이터:
<source lang=html>
xAxis: {
categories: ['Jan', 'Feb', 'Mar'] // X축 값
}
</source>

* Y축 제목:
<source lang=html>
yAxis: {
title: {
text: 'Revenue (in USD)' // Y축 제목
}
}
</source>

=== 파이 차트 예제 ===
<source lang=html>
<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>
</source>

=== 고급 기능 ===

1) 툴팁 설정
* 마우스를 올렸을 때 툴팁을 커스터마이징합니다.
<source lang=python>
tooltip: {
pointFormat: '<b>{point.y}</b> units sold' // 툴팁 내용
}
</source>

2) 데이터 라벨 표시

* 차트 데이터에 직접 레이블을 추가합니다.
<source lang=html>
plotOptions: {
pie: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
}
</source>

3) 색상 사용자 정의

* 차트 색상을 직접 설정합니다.
<source lang=html>
colors: ['#FF0000', '#00FF00', '#0000FF']
</source>

=== Highcharts 라이브러리 확장 ===

1) Highcharts Modules
* 더 많은 기능 추가: CDN 또는 npm을 사용해 추가 모듈 로드.
<source lang=html>
<script src="https://code.highcharts.com/modules/exporting.js">
</source>
* exporting.js: 차트를 PDF, PNG, SVG 등으로 다운로드할 수 있는 기능을 제공합니다.
* drilldown.js: 드릴다운 차트를 지원합니다.
<source lang=html>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
</source>

2) 드릴다운 차트 예제
<source lang=html>
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]
]
}]
}
});
</source>

== [[Highcharts를 React, Vue, Angular에서 사용]] ==

Highchart 기초 - 편집 역사

2025년 5월 19일 (월) 21:47에 Devcafe님의 편집

2025년 5월 19일 (월) 21:46에 Devcafe님의 편집

Devcafe: /* Highcharts를 React, Vue, Angular에서 사용 */