使用PHP與JavaScript繪製股票蠟燭圖的完整教程

M66 2025-07-09

介紹股票蠟燭圖的基本概念

股票蠟燭圖是一種廣泛用於技術分析的圖形，通過展示開盤價、收盤價、最高價和最低價，幫助投資者了解價格的波動趨勢。本文將演示如何通過PHP和JavaScript生成這種圖表，並使用Chart.js進行前端渲染。

準備開發環境

在動手之前，請確保具備以下環境：

已配置PHP的服務器
支持HTML5與Canvas的現代瀏覽器
Chart.js圖表庫（可通過CDN或官網下載）

準備股票歷史數據

你需要準備一個包含歷史股價信息的數組，每條數據應包括：

日期
開盤價（open）
收盤價（close）
最高價（high）
最低價（low）

使用PHP生成圖表數據

下面是用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

創建一個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結構通過Canvas容器與Chart.js配合，實現股票蠟燭圖的可視化。

自定義圖表樣式

Chart.js 提供豐富的配置選項，可以根據實際需求定制蠟燭圖的樣式，如顏色、提示框、坐標軸刻度等。具體可參考官方文檔進行調整：

Chart.js Candlestick 文檔

結語

通過PHP處理數據並結合JavaScript與Chart.js繪製圖表，你可以快速構建一個動態更新的股票蠟燭圖頁面。無論用於金融數據展示還是教學演示，該方案都具備高效與可擴展性。