제가 직접 경험해본 결과로는, 가상자산의 시세 변동을 시각적으로 파악하는 것은 매우 유용합니다. 특히, 입력한 날짜를 기준으로 전후 가상자산의 시세 변동을 확인할 수 있다면, 추후 투자 결정을 하는 데 큰 도움이 될 것입니다. 이 글에서는 날짜를 기반으로 가상자산 시세 변동 그래프를 추가하는 방법에 대해 자세히 설명하겠습니다.
Chart.js 라이브러리의 활용
Chart.js는 다양한 차트를 쉽게 그릴 수 있도록 도와주는 자바스크립트 라이브러리입니다. 제가 직접 사용할 때도 차트 생성이 간편해서 여러 프로젝트에서 활용하고 있어요.
웹페이지에서 가상자산의 시세 변동을 시각적으로 표현할 수 있게 해주는 이 도구는 매우 유용하답니다. 사용자가 선택한 특정 날짜를 기준으로 일주일 전후의 데이터를 쉽게 시각화할 수 있으며, 필요한 데이터와 옵션을 설정하여 맞춤형 차트를 만들 수 있습니다. 이러한 접근은 가상화폐에 대한 불확실성을 줄이고, 투자자에게 더 나은 정보를 제공할 수 있도록 도와줍니다.
Chart.js를 사용한 초기 설정
Chart.js를 사용하기 위해서는 먼저 HTML 파일의 <head> 태그에 라이브러리 링크를 추가해야 합니다. 설치 없이 CDN을 통해 접근할 수 있는 방법이 있습니다. 아래 코드를 사용해 보세요.
“`html
“`
이제 페이지 내 <canvas id="priceChart"></canvas> 요소를 추가하여 그래프를 그릴 공간을 마련해줍니다.
데이터 요청 및 차트 생성 코드
“`javascript
document.getElementById(“btn”).addEventListener(“click”, () => {
const selectedDate = new Date(document.getElementById(“date”).value);
const coinSymbol = document.getElementById(“coins”).value;
const oneWeekAgo = new Date(selectedDate);
oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
const oneWeekAfter = new Date(selectedDate);
oneWeekAfter.setDate(oneWeekAfter.getDate() + 7);
const startDate = Math.floor(oneWeekAgo.getTime() / 1000);
const endDate = Math.floor(oneWeekAfter.getTime() / 1000);
fetch(`https://min-api.cryptocompare.com/data/v2/histoday?fsym=${coinSymbol}&tsym=KRW&limit=14&toTs=${endDate}&aggregate=1`)
.then((response) => response.json())
.then((data) => {
const prices = data.Data.Data.map((item) => item.close);
const ctx = document.getElementById("priceChart").getContext("2d");
const chart = new Chart(ctx, {
type: "line",
data: {
labels: [
"7 days ago", "6 days ago", "5 days ago", "4 days ago", "3 days ago", "2 days ago", "1 days ago",
"투자한 날(?)", "1 days later", "2 days later", "3 days later", "4 days later", "5 days later", "6 days later"
],
datasets: [{
label: "Price (KRW)",
data: prices,
backgroundColor: "rgba(75, 192, 192, 0.2)",
borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 1,
pointBackgroundColor: prices.map((price, index) => {
if (index === 7) return "red"; // 투자한 날 강조
else return "rgba(75, 192, 192, 1)";
}),
}],
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
},
}],
},
},
});
})
.catch((error) => console.error("Error fetching data:", error));
});
“`
이 코드는 사용자가 선택한 날짜를 기준으로 가상자산의 시세 변동을 일주일 전부터 일주일 후까지 보여주는 라인 차트를 생성합니다. 제가 경험해본 바로는, 차트를 통해 시세의 흐름을 쉽게 파악할 수 있어 매우 유용했어요.
시세 변동 데이터의 처리와 시각화
이 과정에서 핵심은 단순히 차트를 그리는 것이 아니라, 보여줄 데이터의 정확성을 확보하는 것입니다. 사용자가 입력한 날짜에 대한 데이터를 가져오고, 이를 통해 날짜 전후의 가격 변동을 확인할 수 있어야 하죠. API 요청이 성공하면, 반환되는 데이터를 적절하게 가공하여 출력하는 것이 중요해요.
데이터 처리 과정
데이터를 처리하는 과정은 다음과 같습니다:
- API 호출: 사용자가 선택한 날짜의 데이터를 가져오기 위해 API를 호출합니다.
- 가격 데이터 추출: 반환된 JSON 데이터에서
close가격 정보를 추출합니다. - 차트 데이터셋 업데이트: 시각적으로 데이터를 잘 표현하기 위해 Chart.js 의 데이터셋을 갱신합니다.
위와 같은 과정을 거치면 사용자가 원하는 시세 변동 정보를 쉽게 얻을 수 있습니다. 제가 사용해보니, 데이터가 잘 갱신되니 차트의 유용성이 배가되었던 것 같아요.
오류 처리 및 사용자 경험 개선
모든 API 호출에는 실패의 가능성이 존재합니다. 그래서 오류 상황을 핸들링하여 사용자에게 불편함을 최소화하는 것이 중요하답니다. 예를 들어, 데이터를 가져오는 데 실패했다면 콘솔에 오류 메시지를 출력하는 코드를 추가했습니다. 이를 통해 개발 중 발생할 수 있는 문제를 줄일 수 있었어요.
개선된 사용자 인터페이스
가상자산의 시세 변동을 그래프로 보여주면서, 수익률도 함께 출력하는 기능을 추가하면 사용자가 변동성을 한눈에 파악할 수 있어요. 수익률을 가격 옆에 적어 함축적으로 보여주면 정보를 더 쉽게 파악할 수 있답니다.
그래프 미세 조정
그래프를 그릴 때, 스타일과 색상을 조정해 사용자가 쉽게 정보를 이해할 수 있도록 UX/UI를 개선할 수 있습니다. 특정 데이터 포인트(투자한 날)은 빨간 점으로 강조하여 주요 정보를 쉽게 알아볼 수 있도록 설정했어요. 그래픽적 요소는 사용자 시각적으로도 중요하니까요.
자주 묻는 질문 (FAQ)
Chart.js는 어떤 차트를 지원하나요?
Chart.js는 라인 차트, 막대 차트, 원형 차트 등 다양한 차트를 지원합니다. 사용하려는 데이터의 특성에 따라 적절한 차트를 선택할 수 있습니다.
API 요청 시 필요한 인증이 있나요?
Cryptocompare API의 경우, 무료로 사용할 수 있는 기능이 많지만, 일부는 인증 키가 필요할 수 있습니다. 사용 전에 API 문서를 확인하는 것이 좋습니다.
특정 날짜를 기준으로 데이터를 가져올 수 있나요?
네, 사용자가 선택한 날짜를 기준으로 전후 데이터를 가져올 수 있습니다. 코드에서 날짜를 계산하여 API에 요청을 보내는 방식을 사용합니다.
가격 데이터 외에 다른 정보도 가져올 수 있나요?
가격 데이터 외에도 거래량, 시가총액 등 다양한 정보를 가져올 수 있습니다. 필요에 따라 API 요청 파라미터를 조정하면 됩니다.
가상자산 시세 변동을 시각적으로 표현하는 방식은 사용자에게 많은 정보를 제공할 수 있는 강력한 도구입니다. 이러한 방법으로 투자 결정을 내리는 데 있어 도움을 줄 수 있으며, Chart.js와 API를 통해 쉽게 구현할 수 있음을 깨닫게 되었어요.
키워드: Chart.js, 가상자산, 시세변동, 데이터 시각화, JavaScript, API, 투자, 가격, 수익률, 그래프, 사용자 인터페이스