데이터 시각화는 데이터/정보를 그림이나 그래픽 형식으로 표현하는 행위입니다. 이는 대규모 데이터 세트나 지표를 최종 사용자에게 훨씬 더 매력적인 지도, 그래프, 차트와 같은 시각적 요소로 변환하는 수단입니다.
현재 JavaScript 생태계에는 데이터 시각화를 위한 신뢰할 수 있는 일류 라이브러리가 여러 개 있습니다. 그 중 일부에는 D3.js, Highcharts, Charts.js, Rechart 등이 포함됩니다. 하지만 이 기사에서는 Highcharts를 사용하여 차트를 만들 것입니다.
Highcharts는 웹 및 모바일용 SVG 기반 반응형 대화형 차트를 생성하기 위한 JavaScript 라이브러리입니다. JavaScript 또는 CSS를 통해 차트를 심층적으로 사용자 정의할 수 있습니다. Highcharts는 차트 생성을 위한 네 가지 제품 카테고리를 제공합니다. 여기에는 다음이 포함됩니다.
Highcharts Stock을 사용하여 Stock Tools 모듈에서 제공하는 오실레이터 및 기술 지표로 스타일이 지정된 촛대를 만듭니다.
캔들차트(또는 일본식 캔들차트)는 거래자가 이전 패턴을 기반으로 주식, 증권 또는 통화의 가능한 가격 변동을 결정하는 데 사용하는 금융 차트 스타일입니다. 특정 기간 동안 일정한 간격으로 측정된 주요 가격대/OHLC(시가, 고가, 저가, 종가) 값을 활용합니다.
일반적인 캔들스틱 차트와 혼동하지 말아야 할 것은 Heikin-Ashi('평균 막대') 차트입니다. 촛대 차트와 동일하지만 촛대 차트 추세를 더 쉽게 분석하는 데 도움이 되므로 주로 촛대와 함께 사용됩니다. 따라서 더 읽기 쉽게 만들었습니다.
Highcharts API는 촛대형 차트와 Heikin-Ashi 차트를 모두 생성할 수 있는 옵션을 제공합니다. 이 문서에서는 캔들스틱 차트에 중점을 둡니다. 그러나 그 과정에서 Heikin-Ashi 차트를 만드는 데 필요한 장단점을 지적하겠습니다. 손을 더럽혀볼까요?!
Highcharts를 사용하려면 먼저 Highcharts를 다운로드해야 합니다. Highcharts는 프로젝트에 Highcharts를 도입하는 몇 가지 옵션을 제공합니다. 다음 중 하나를 선택할 수 있습니다.
이 기사에서는 Highcharts CDN을 사용할 예정입니다.
대량 HTML에는 Highcharts CDN을 로드하는 데 사용되는 스크립트 태그가 포함되어 있습니다. 처음 세 개는 Highcharts로 생성된 모든 주식 차트에 필요한 모듈입니다.
<script src="https://code.highcharts.com/stock/highstock.js"></script> <script src="https://code.highcharts.com/stock/modules/data.js"></script> <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
캔들스틱 차트와 달리 하이킨아시 차트를 생성해야 하는 경우 아래와 같이 모듈을 별도로 가져와야 합니다.
<script src="https://code.highcharts.com/stock/modules/heikinashi.js"></script>
애플리케이션에 가져와야 하는 마지막 CDN은 Stock Tools 모듈입니다. 이를 통해 기술적 지표를 활용할 수 있습니다. Stock Tools 모듈은 위에서 사용 가능한 모든 모듈을 선택할 수 있도록 마지막에 로드되어야 합니다.
<script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>
Stock Tools 모듈에서 모든 기술 지표를 로드하는 대신 필요에 따라 특정 지표를 로드할 수도 있습니다.
<script src="https://code.highcharts.com/indicators/indicators.js"></script> <script src="https://code.highcharts.com/indicators/rsi.js"></script> <script src="https://code.highcharts.com/indicators/ema.js"></script> <script src="https://code.highcharts.com/indicators/macd.js"></script>
마지막으로 JavaScript에서 참조할 수 있는 차트를 담을 HTML 요소를 생성해야 합니다.
<div> <h3> The JavaScript </h3> <p><strong>Bringing in our Data</strong><br> The first item on our itinerary is to bring in the data we will be plotting. Highcharts provides a .getJSON method similar to that of jQuery, which is used for making HTTP requests. It also provides a stockChart class for creating the chart. The stockChart class takes in two parameters:</p>
Highcharts.getJSON('https://api.coingecko.com/api/v3/coins/ethereum/ohlc?vs_currency=usd&days=365',
function (candlestick) {
// create the chart
Highcharts.stockChart('container', {
title: {
text: 'Untitled Masterpiece'
},
series: [
{
type: "candlestick", //heikinashi for Heikin-Ashi chart
name: "Ethereum", //chart name
id: "eth", // chart id, useful when adding indicators and oscillators
data: candlestick, //data gotten from the API call above
},
],
yAxis: [
{
height: "100%", // height of the candlestick chart
visible: true,
}
]
});
});
위 코드는 Highcharts에서 제공하는 기본 스타일을 갖춘 간단한 촛대를 제공합니다.
Highcharts 스톡 도구는 Highcharts의 선택 기능입니다. 사용자가 필요에 따라 표시기와 오실레이터를 추가할 수 있는 전체 스톡 도구 그래픽 사용자 인터페이스(GUI)를 활성화하거나 Javascript를 통해 웹 앱에 특정 스톡 도구를 추가할 수 있습니다.
차트에 지표(가속 대역)와 오실레이터(멋진 오실레이터)를 추가하겠습니다. 이렇게 하려면 위의 시리즈와 yAxis 개체를 모두 편집해야 합니다.
series: [
{
type: "candlestick",
name: "Ethereum",
id: "eth", // chart id, useful when adding indicators and oscillators
data: data,
},
{
type: "abands", //acceleration bands indicator
id: "overlay", // overlays use the same scale and are plotted on the same axes as the main series.
linkedTo: "eth", //targets the id of the data series that it points to
yAxis: 0, // the index of yAxis the particular series connects to
},
{
type: "ao", // awesome oscillator
id: "oscillator", // oscillators requires additional yAxis be created due to different data extremes.
linkedTo: "eth", //targets the id of the data series that it points to
yAxis: 1, // the index of yAxis the particular series connects to
},
],
yAxis: [
{
//index 0
height: "80%", //height of main series 80%
resize: {
enabled: true, // allow resize of chart heights
},
},
{
//index 1
top: "80%", // oscillator series to begin at 80%
height: "20%", //height of oscillator series
},
],
현재 보유하고 있는 정보는 다음과 같습니다.
차트 스타일링을 시작하기 전에 먼저 차트를 구성하는 다양한 부분을 이해해야 합니다.
Highcharts는 두 가지 차트 스타일 지정 방법을 제공합니다.
이 기사에서는 Highcharts 기본 스타일을 사용할 것입니다. 따라서 옵션 객체 내에서:
<script src="https://code.highcharts.com/stock/highstock.js"></script> <script src="https://code.highcharts.com/stock/modules/data.js"></script> <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
최종 차트는 다음과 같습니다.
Highcharts로 스타일이 지정된 암호화폐 촛대를 만들면 원시 데이터를 시각적으로 설득력 있고 실행 가능한 통찰력으로 변환할 수 있습니다. Highcharts의 유연성을 활용하면 브랜딩에 맞춰 캔들스틱 차트를 사용자 정의하고 사용자 경험을 향상하며 시장 동향을 효과적으로 전달할 수 있습니다. 재무 대시보드를 구축하든 거래 플랫폼을 강화하든 맞춤형 시각화를 설계하고 구현하는 능력은 오늘날의 데이터 중심 환경에서 중요한 기술입니다.
이 가이드에 설명된 단계를 통해 이제 Highcharts를 사용하여 동적 캔들스틱 차트를 만들기 위한 기초를 갖추게 되었습니다. 추가 사용자 정의를 탐색하고 Highcharts의 광범위한 API를 실험하여 암호화폐 시각화를 한 단계 끌어올립니다.
위 내용은 데이터 시각화: Highcharts를 사용하여 스타일이 지정된 암호화폐 촛대를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
