플래시 플레이어 지원 중단으로 웹차트를 새로 만들게 되었다.
그런데 demo가 설명이 쉽지가 않고.. (부족한 영어 실력이.. 크흑)
예시를 찾아도 외국 형님들이 작성한 내용을 뒤져서 보게 되는 경우가 많아서
만들면서 잊지 않기 위해 정리해둔다.
Stock 차트
<script src="https://code.highcharts.com/stock/highstock.js"></script>기본 차트는 highcharts.js 이 파일이 필요했던 반면 stock 차트에는 위 js 파일이 필요하다.
기본 stockChart는 위 js만 있어도 된다. (다른 기능이 필요하면 다른 js 추가 가능)
기본원리
- 기본차트와 동일하게
<div id="stock-graph"></div>이런식으로 태그를 준다. - 코드를 다음과 같이 작성해주면
div 태그위치에 차트가 생성된다.
var stockChart = Highcharts.stockChart('stock-graph',
...
}예시
- 다음은 stock 차트 소스 예제다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
</head>
<body>
<div id="stock-graph" style="height: 400px; min-width: 310px"></div>
<script>
var data = [
[151692480000, 171.51],
[151718400000, 167.96],
[151727040000, 166.97],
[151735680000, 167.41],
[151744320000, 167.21],
[151752900000, 181.31]
]
var stockChart = Highcharts.stockChart('stock-graph', {
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
name: 'AAPLA',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
</script>
</body>
</html>예제화면
'highchart( 하이차트) 적용기' 카테고리의 다른 글
| [하이차트(highchart)] 웹차트(주식) 적용기 - 2 (0) | 2021.08.31 |
|---|
