한국어
한국어
Stock Candlestick 차트는 기술 분석에 널리 사용되는 그래프입니다. 투자자는 개통, 마감, 최고 및 최저 가격을 보여줌으로써 가격 변동성 추세를 이해하는 데 도움이됩니다. 이 기사에서는 PHP 및 JavaScript를 통해 이러한 차트를 생성하고 프론트 엔드 렌더링에 Chart.js를 사용하는 방법을 보여줍니다.
시작하기 전에 다음 환경이 있는지 확인하십시오.
역사적 주가 정보가 포함 된 배열을 준비해야하며 각 데이터는 다음을 포함해야합니다.
다음은 PHP를 사용하여 Chart.js의 필수 형식으로 재고 데이터를 형식화하기위한 코드 예제입니다.
<?php
$stockData = array(
array("date" => "2021-01-01", "open" => 100, "close" => 120, "high" => 130, "low" => 90),
// 더 많은 데이터 항목...
);
$chartData = array();
foreach ($stockData as $stock) {
$chartData[] = array(
"t" => strtotime($stock["date"]),
"o" => $stock["open"],
"c" => $stock["close"],
"h" => $stock["high"],
"l" => $stock["low"]
);
}
echo json_encode($chartData);
?>
이 코드는 원래 주가 배열을 Chart.js에서 사용 가능한 데이터 형식으로 변환하며 최종적으로 프론트 엔드 차트의 JSON에서 출력됩니다.
HTML 파일을 만들고 Chart.js를 소개하고 차트 디스플레이에 Canvas 요소를 추가하십시오.
<!DOCTYPE html>
<html>
<head>
<title>스톡 캔들 차트</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="candlestick-chart"></canvas>
<script>
<?php include 'generateChartData.php'; ?>
var ctx = document.getElementById('candlestick-chart').getContext('2d');
var chartData = <?php echo json_encode($chartData); ?>;
new Chart(ctx, {
type: 'candlestick',
data: {
datasets: [{ data: chartData }]
},
options: {
// 실제 요구에 따라 구성 항목을 조정할 수 있습니다
}
});
</script>
</body>
</html>
이 HTML 구조는 Chart.js와 협력하여 재고 캔들 차트의 시각화를 실현합니다.
Chart.js는 풍부한 구성 옵션을 제공하며 색상, 프롬프트 상자, 축 스케일 등과 같은 실제 요구에 따라 양초 차트 스타일을 사용자 정의 할 수 있습니다. 자세한 내용은 조정을 위해 공식 문서를 참조하십시오.
JavaScript 및 Chart.js와 함께 PHP 및 드로잉 차트를 통해 데이터를 처리하면 동적으로 업데이트 된 재고 촛대 차트 페이지를 신속하게 구축 할 수 있습니다. 재무 데이터 프레젠테이션 또는 교육 데모에 사용 되든이 솔루션은 효율적이고 확장 가능합니다.
