ホームページ >バックエンド開発 >PHPチュートリアル >ゼロから始める: PHP と JS を使用して株価ローソク足チャートを作成する方法を学びます
ゼロから始める: PHP と JS を使用して株価ローソク足チャートを作成する方法を学びます
- 王林オリジナル
- 2023-12-17 12:50:13588ブラウズ
ゼロから始める: PHP と JS を使用して株価のローソク足チャートを作成する方法を学ぶ
株式取引では、ローソク足チャートは株価の変動を表示するために使用される一般的なチャート タイプです。 。この記事では、PHP と JS を使用して株価ローソク足チャートを作成する方法と、具体的なコード例を紹介します。
1. 技術的な準備
始める前に、PHP と JS の開発環境がインストールされていることを確認する必要があります。インストールされていない場合は、公式ドキュメントに従ってインストールできます。
2. データの準備
株価ローソク足チャートを作成するには、まず株式の過去の価格データを準備する必要があります。このデータは証券取引所またはサードパーティのデータプロバイダーから取得できます。例を簡略化するために、CSV ファイルに保存された仮想の株式データを使用します。ファイルの形式は次のとおりです:
日期,开盘价,最高价,最低价,收盘价 2022-01-01,100,120,80,110 2022-01-02,110,130,90,120 ......
3. PHP を使用したデータの読み取り
まず、PHP を使用して CSV ファイル内のデータを読み取る必要があります。 fgetcsv 関数を使用すると、CSV ファイルを 1 行ずつ読み取り、各行のデータを配列に保存できます。以下は、CSV ファイルを読み取ってデータを保存するためのサンプル コードです:
$data = array(); //保存数据的数组
$handle = fopen('stock_data.csv', 'r'); //打开CSV文件
if ($handle) {
while (($line = fgetcsv($handle)) !== false) {
$data[] = $line;
}
fclose($handle); //关闭文件句柄
}4. データ処理
CSV ファイルのデータを PHP 配列に読み込んだ後、データを処理する必要があります。 JS を使用してローソク足チャートを作成します。具体的には、JS で使用できるように日付と価格のデータを別の配列に保存する必要があります。
以下は、日付データと価格データをそれぞれ配列に保存するサンプル コードです:
$dates = array(); //保存日期的数组
$opens = array(); //保存开盘价的数组
$highs = array(); //保存最高价的数组
$lows = array(); //保存最低价的数组
$closes = array(); //保存收盘价的数组
foreach ($data as $row) {
$dates[] = $row[0];
$opens[] = floatval($row[1]);
$highs[] = floatval($row[2]);
$lows[] = floatval($row[3]);
$closes[] = floatval($row[4]);
}5. ローソク足チャートの生成
これで、データを準備し、別の配列に保存しました。 。次に、JSを使用してローソク足チャートを作成します。
まず、JS ライブラリを HTML ページに導入する必要があります。ここでは、Chart.js ライブラリを使用してローソク足チャートを生成します。対応するバージョンの Chart.js を公式 Web サイトからダウンロードして、HTML ページに導入できます。
次に、ローソク足チャートを表示するための Canvas 要素を HTML ページに作成します。 HTML コードの例を次に示します。
<!DOCTYPE html>
<html>
<head>
<script src="path/to/Chart.js"></script>
</head>
<body>
<canvas id="candlestick-chart"></canvas>
<script src="path/to/candlestick.js"></script>
</body>
</html>JavaScript ファイルcandlestick.js では、Chart.js API を使用してローソク足チャートを作成します。以下は JavaScript コードの例です。
var ctx = document.getElementById('candlestick-chart').getContext('2d');
var chart = new Chart(ctx, {
type: 'candlestick',
data: {
datasets: [{
data: [{
t: new Date("2022-01-01"),
o: 100,
h: 120,
l: 80,
c: 110
},
{
t: new Date("2022-01-02"),
o: 110,
h: 130,
l: 90,
c: 120
},
... //将PHP中的数据补充到这里
]
}]
}
});上記のコードでは、Chart.js が提供する API を使用してローソク足チャートを作成します。 PHP でデータを補完することで、チャートの data.datasets[0].data にローソク足チャートのデータを動的に追加できます。
6. 結論
この記事では、PHP と JS を使用して株価のローソク足チャートを作成する方法と、具体的なコード例を紹介します。この例を通じて、CSV ファイルを読み取り、データを配列に保存し、Chart.js ライブラリを使用してローソク足チャートを生成する方法を学習できます。この記事が株式ローソク足チャートを学ぶ過程で役立つことを願っています。
以上がゼロから始める: PHP と JS を使用して株価ローソク足チャートを作成する方法を学びますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。