JavaScriptを使用したPHPを使用したストックキャンドルチャートの描画に関する完全なチュートリアル

M66 2025-07-09

ストックキャンドルチャートの基本概念の紹介

在庫のろうそく足チャートは、投資家がオープニング、クロージング、最高、および最低価格を示すことで価格のボラティリティの傾向を理解するのに役立つテクニカル分析で広く使用されているグラフです。この記事では、PHPとJavaScriptを介してこのようなチャートを生成し、フロントエンドレンダリングにchart.jsを使用する方法を示します。

開発環境に備えます

開始する前に、次の環境があることを確認してください。

PHPを構成したサーバー
HTML5とキャンバスをサポートする最新のブラウザ
chart.jsチャートライブラリ（CDNまたは公式Webサイトからダウンロードできます）

在庫の履歴データを準備します

履歴株価情報を含む配列を準備する必要があります。各データには以下を含める必要があります。

日付
オープニング価格（オープン）
クローズプライス（閉じる）
最高価格
最低価格（低）

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を紹介し、チャートディスプレイにキャンバス要素を追加します。

 
<!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はリッチな構成オプションを提供し、色、プロンプトボックス、軸スケールなどの実際のニーズに応じてキャンドルチャートのスタイルをカスタマイズできます。詳細については、調整については公式ドキュメントを参照してください。

Chart.js Candlestickドキュメント

結論

PHPを介してデータを処理し、javaScriptとchart.jsと組み合わせてチャートを描画することにより、動的に更新されたストックキャンドルスティックチャートページをすばやく構築できます。財務データのプレゼンテーションであろうと教育デモで使用されるかどうかにかかわらず、このソリューションは効率的でスケーラブルです。

JavaScriptを使用したPHPを使用したスト​​ックキャンドルチャートの描画に関する完全なチュートリアル