PHP と JS を使用して株価ローソク足チャートを作成する方法
- WBOYオリジナル
- 2023-12-17 08:08:44919ブラウズ
PHP と JS を使用して株価のローソク足チャートを作成する方法
株価のローソク足チャートは、株式市場で一般的なテクニカル分析グラフィックであり、始値を描画します。価格、高値、安値などのデータは、投資家が株式の価格変動をより直感的に理解するのに役立ちます。この記事では、PHP と JS を使用して株価のローソク足チャートを作成する方法を、具体的なコード例とともに説明します。
1. 準備
始める前に、次の環境を準備する必要があります:
1. PHP を実行するサーバー
2. HTML5 と Canvas をサポートするブラウザ
3. Chart.js ライブラリをダウンロードして導入します。最新バージョンは公式 Web サイトからダウンロードできます: https://www.chartjs.org/
2. 株価データの取得
まず、株価データ 過去の価格データは、API インターフェイス、データベース、またはその他のデータ ソースから取得できます。ここでは、株価を含む配列を取得したと仮定します。各要素には、日付、始値、終値、最高値、最低値のデータが含まれています。
3. 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);
?>上記のコードは、まず株価データを格納する $stockData 配列を定義し、次にループを通じて各データ項目を Chart.js の要件を満たす形式に変換します。そしてそれを $chartData 配列の中央に格納します。最後に、json_encode 関数を使用して $chartData 配列を JSON 形式の文字列に変換し、ブラウザに出力します。
4. 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'; ?> // 引入生成图表数据的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>上記のコードでは、最初に Chart.js ライブラリを導入し、次に「candlestick-chart」という ID を持つ Canvas タグをページに追加して、株式ローソク足チャートです。次に、生成されたチャート データが PHP コードを通じて chartData 変数に割り当てられ、最後に、Chart.js ライブラリを使用してローソク足チャートのインスタンスが作成され、チャート データが作成関数に渡されます。
5. グラフのスタイルと構成項目を調整する
実際のニーズに応じて、Chart.js ドキュメントに従ってグラフのスタイルと構成項目をさらに調整できます。ドキュメントアドレスは以下の通りです。 https://www.chartjs.org/docs/latest/charts/candlestick.html
チャートスタイルや設定項目を適切に設定することで、より見やすくした株価ローソク足チャートを作成できます。私たちのニーズに合わせて、株価の変化をより適切に表示します。
概要
PHP と JS を使用して株価ローソク足チャートを作成するには、PHP を実行するサーバーと、HTML5 と Canvas をサポートするブラウザが必要です。株価データをChart.jsの要件を満たすデータ形式に変換し、Chart.jsを利用してローソク足チャートのインスタンスを作成することで、ブラウザ上で株価の変動を表示することができます。スタイルや構成項目を調整することで、よりニーズに合った株価ローソク足チャートを作成できます。この記事がお役に立てば幸いです!
以上がPHP と JS を使用して株価ローソク足チャートを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。