코인 피보나치 도구
작성자 정보
-
차트분석 작성
- 작성일
컨텐츠 정보
- 3,896 조회
- 목록
본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>피보나치 예측 도구</title>
<!-- Bootstrap 5 -->
<link href="bootstrap@5.3.0/dist/css/bootstrap.min.css"" TARGET="_blank" rel="nofollow">https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
background-color: #f8f9fa;
}
.container {
max-width: 900px;
margin: 50px auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.loading-spinner {
display: none;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center text-primary">피보나치 되돌림 예측 도구</h2>
<p class="text-center">CSV 파일을 업로드하면 피보나치 되돌림 레벨을 자동으로 계산하여 차트로 보여줍니다.</p>
<!-- 파일 업로드 -->
<div class="mb-3">
<label for="csvFile" class="form-label">CSV 파일 업로드:</label>
<input type="file" class="form-control" id="csvFile" accept=".csv">
</div>
<button class="btn btn-primary w-100" onclick="loadCSV()"> CSV 업로드</button>
<!-- 로딩 스피너 -->
<div class="loading-spinner mt-3">
<div class="spinner-border text-primary" role="status"></div>
<p>데이터를 처리 중입니다...</p>
</div>
<!-- 차트 -->
<canvas id="fibonacciChart" class="mt-4"></canvas>
<!-- 피보나치 되돌림 값 -->
<h3 class="mt-5 text-center text-secondary">피보나치 되돌림 레벨</h3>
<table class="table table-bordered mt-3">
<thead class="table-light">
<tr>
<th>레벨</th>
<th>가격</th>
</tr>
</thead>
<tbody id="fibonacciTable">
<!-- 피보나치 레벨이 여기에 추가됨 -->
</tbody>
</table>
</div>
<!-- Bootstrap 5 JS -->
<script src="bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"" TARGET="_blank" rel="nofollow">https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById('csvFile').addEventListener('change', handleFile);
function handleFile(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const csvData = e.target.result;
processCSV(csvData);
};
reader.readAsText(file);
}
}
function processCSV(csvData) {
const rows = csvData.split("\n").map(row => row.split(";")); // 세미콜론(;) 구분자로 사용
const prices = [];
document.querySelector('.loading-spinner').style.display = "block";
for (let i = 1; i < rows.length; i++) {
if (rows[i].length < 10) continue;
const price = parseFloat(rows[i][8]); // 종가 (Close) 데이터
if (!isNaN(price)) {
prices.push(price);
}
}
if (prices.length === 0) {
alert("CSV 파일에서 데이터를 읽을 수 없습니다.");
document.querySelector('.loading-spinner').style.display = "none";
return;
}
const high = Math.max(...prices);
const low = Math.min(...prices);
const levels = [0.0, 23.6, 38.2, 50.0, 61.8, 78.6, 100.0];
const fibonacciLevels = levels.map(level => ({
level: `${level}%`,
price: ((high - low) * (level / 100)) + low
}));
updateFibonacciTable(fibonacciLevels);
document.querySelector('.loading-spinner').style.display = "none";
drawChart(prices, high, low, fibonacciLevels);
}
function updateFibonacciTable(fibonacciLevels) {
const tableBody = document.getElementById("fibonacciTable");
tableBody.innerHTML = "";
fibonacciLevels.forEach(({ level, price }) => {
const row = `<tr>
<td>${level}</td>
<td>${price.toFixed(2)}</td>
</tr>`;
tableBody.innerHTML += row;
});
}
function drawChart(prices, high, low, fibonacciLevels) {
const ctx = document.getElementById('fibonacciChart').getContext('2d');
if (window.myChart) {
window.myChart.destroy();
}
const fibData = fibonacciLevels.map(f => ({ x: prices.length - 1, y: f.price }));
window.myChart = new Chart(ctx, {
type: 'line',
data: {
labels: Array.from({ length: prices.length }, (_, i) => i + 1),
datasets: [
{
label: "가격",
data: prices,
borderColor: "blue",
fill: false
},
{
label: "피보나치 레벨",
data: fibData,
borderColor: "red",
borderDash: [5, 5],
pointRadius: 5,
fill: false
}
]
},
options: {
responsive: true,
scales: {
x: { title: { display: true, text: "기간" } },
y: { title: { display: true, text: "가격" } }
}
}
});
}
</script>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>피보나치 예측 도구</title>
<!-- Bootstrap 5 -->
<link href="bootstrap@5.3.0/dist/css/bootstrap.min.css"" TARGET="_blank" rel="nofollow">https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
background-color: #f8f9fa;
}
.container {
max-width: 900px;
margin: 50px auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.loading-spinner {
display: none;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center text-primary">피보나치 되돌림 예측 도구</h2>
<p class="text-center">CSV 파일을 업로드하면 피보나치 되돌림 레벨을 자동으로 계산하여 차트로 보여줍니다.</p>
<!-- 파일 업로드 -->
<div class="mb-3">
<label for="csvFile" class="form-label">CSV 파일 업로드:</label>
<input type="file" class="form-control" id="csvFile" accept=".csv">
</div>
<button class="btn btn-primary w-100" onclick="loadCSV()"> CSV 업로드</button>
<!-- 로딩 스피너 -->
<div class="loading-spinner mt-3">
<div class="spinner-border text-primary" role="status"></div>
<p>데이터를 처리 중입니다...</p>
</div>
<!-- 차트 -->
<canvas id="fibonacciChart" class="mt-4"></canvas>
<!-- 피보나치 되돌림 값 -->
<h3 class="mt-5 text-center text-secondary">피보나치 되돌림 레벨</h3>
<table class="table table-bordered mt-3">
<thead class="table-light">
<tr>
<th>레벨</th>
<th>가격</th>
</tr>
</thead>
<tbody id="fibonacciTable">
<!-- 피보나치 레벨이 여기에 추가됨 -->
</tbody>
</table>
</div>
<!-- Bootstrap 5 JS -->
<script src="bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"" TARGET="_blank" rel="nofollow">https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById('csvFile').addEventListener('change', handleFile);
function handleFile(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const csvData = e.target.result;
processCSV(csvData);
};
reader.readAsText(file);
}
}
function processCSV(csvData) {
const rows = csvData.split("\n").map(row => row.split(";")); // 세미콜론(;) 구분자로 사용
const prices = [];
document.querySelector('.loading-spinner').style.display = "block";
for (let i = 1; i < rows.length; i++) {
if (rows[i].length < 10) continue;
const price = parseFloat(rows[i][8]); // 종가 (Close) 데이터
if (!isNaN(price)) {
prices.push(price);
}
}
if (prices.length === 0) {
alert("CSV 파일에서 데이터를 읽을 수 없습니다.");
document.querySelector('.loading-spinner').style.display = "none";
return;
}
const high = Math.max(...prices);
const low = Math.min(...prices);
const levels = [0.0, 23.6, 38.2, 50.0, 61.8, 78.6, 100.0];
const fibonacciLevels = levels.map(level => ({
level: `${level}%`,
price: ((high - low) * (level / 100)) + low
}));
updateFibonacciTable(fibonacciLevels);
document.querySelector('.loading-spinner').style.display = "none";
drawChart(prices, high, low, fibonacciLevels);
}
function updateFibonacciTable(fibonacciLevels) {
const tableBody = document.getElementById("fibonacciTable");
tableBody.innerHTML = "";
fibonacciLevels.forEach(({ level, price }) => {
const row = `<tr>
<td>${level}</td>
<td>${price.toFixed(2)}</td>
</tr>`;
tableBody.innerHTML += row;
});
}
function drawChart(prices, high, low, fibonacciLevels) {
const ctx = document.getElementById('fibonacciChart').getContext('2d');
if (window.myChart) {
window.myChart.destroy();
}
const fibData = fibonacciLevels.map(f => ({ x: prices.length - 1, y: f.price }));
window.myChart = new Chart(ctx, {
type: 'line',
data: {
labels: Array.from({ length: prices.length }, (_, i) => i + 1),
datasets: [
{
label: "가격",
data: prices,
borderColor: "blue",
fill: false
},
{
label: "피보나치 레벨",
data: fibData,
borderColor: "red",
borderDash: [5, 5],
pointRadius: 5,
fill: false
}
]
},
options: {
responsive: true,
scales: {
x: { title: { display: true, text: "기간" } },
y: { title: { display: true, text: "가격" } }
}
}
});
}
</script>
</body>
</html>
피보나치 되돌림 예측 도구
CSV 파일을 업로드하면 피보나치 되돌림 레벨을 자동으로 계산하여 차트로 보여줍니다.
데이터를 처리 중입니다...
피보나치 되돌림 레벨
| 레벨 | 가격 |
|---|
