Heim > Artikel > Backend-Entwicklung > Von Grund auf: Erfahren Sie, wie Sie Aktien-Candlestick-Charts mit PHP und JS erstellen
Von Grund auf: Erfahren Sie, wie Sie Aktien-Candlestick-Charts mit PHP und JS erstellen
- 王林Original
- 2023-12-17 12:50:13486Durchsuche
Fangen Sie bei Null an: Erfahren Sie, wie Sie mit PHP und JS ein Aktien-Candlestick-Diagramm erstellen.
Im Aktienhandel ist ein Candlestick-Diagramm ein gängiger Diagrammtyp, der zur Darstellung der Preisbewegung einer Aktie verwendet wird. In diesem Artikel wird erläutert, wie Sie mit PHP und JS Aktien-Candlestick-Diagramme erstellen, und es werden spezifische Codebeispiele bereitgestellt.
1. Technische Vorbereitung
Bevor wir beginnen, müssen wir sicherstellen, dass die Entwicklungsumgebung von PHP und JS installiert wurde. Wenn es nicht installiert ist, können Sie es gemäß der offiziellen Dokumentation installieren.
2. Datenvorbereitung
Um ein Aktien-Kerzendiagramm zu erstellen, müssen wir zunächst die historischen Preisdaten der Aktie vorbereiten. Diese Daten können von Börsen oder externen Datenanbietern bezogen werden. Um das Beispiel zu vereinfachen, verwenden wir hypothetische Bestandsdaten, die in einer CSV-Datei gespeichert sind. Das Format der Datei sollte so aussehen:
日期,开盘价,最高价,最低价,收盘价 2022-01-01,100,120,80,110 2022-01-02,110,130,90,120 ......
3. Daten mit PHP lesen
Zuerst müssen wir PHP verwenden, um die Daten in der CSV-Datei zu lesen. Mit der Funktion fgetcsv können Sie eine CSV-Datei Zeile für Zeile lesen und die Daten jeder Zeile in einem Array speichern. Das Folgende ist ein Beispielcode zum Lesen einer CSV-Datei und zum Speichern der Daten:
$data = array(); //保存数据的数组
$handle = fopen('stock_data.csv', 'r'); //打开CSV文件
if ($handle) {
while (($line = fgetcsv($handle)) !== false) {
$data[] = $line;
}
fclose($handle); //关闭文件句柄
} IV Datenverarbeitung
Nachdem wir die Daten in der CSV-Datei in ein PHP-Array eingelesen haben, müssen wir die Daten verarbeiten, um ein Kerzendiagramm zu erstellen mit JS. Insbesondere müssen wir die Datums- und Preisdaten zur Verwendung in JS in separaten Arrays speichern.
Das Folgende ist ein Beispielcode, um Datums- und Preisdaten jeweils in Arrays zu speichern:
$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. Candlestick-Diagramm generieren
Jetzt haben wir die Daten vorbereitet und in verschiedenen Arrays gespeichert. Als nächstes werden wir JS verwenden, um Candlestick-Diagramme zu erstellen.
Zuerst müssen wir die JS-Bibliothek in die HTML-Seite einführen. Hier verwenden wir die Chart.js-Bibliothek, um Candlestick-Charts zu generieren. Die entsprechende Version von Chart.js kann von der offiziellen Website heruntergeladen und in die HTML-Seite eingefügt werden.
Als nächstes erstellen Sie ein Canvas-Element auf der HTML-Seite, um das Kerzendiagramm anzuzeigen. Hier ist der HTML-Code für ein Beispiel:
<!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>In der JavaScript-Datei „candlestick.js“ verwenden wir die Chart.js-API, um Candlestick-Diagramme zu erstellen. Das Folgende ist ein Beispiel für einen JavaScript-Code:
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中的数据补充到这里
]
}]
}
});Im obigen Code verwenden wir die von Chart.js bereitgestellte API, um ein Kerzendiagramm zu erstellen. Durch die Ergänzung der Daten in PHP können wir Kerzendiagrammdaten dynamisch in data.datasets[0].data des Diagramms hinzufügen.
6. Fazit
Dieser Artikel stellt die Verwendung von PHP und JS zum Erstellen von Aktienkerzendiagrammen vor und enthält spezifische Codebeispiele. Anhand dieses Beispiels können wir lernen, wie man eine CSV-Datei liest, die Daten in einem Array speichert und die Chart.js-Bibliothek zum Generieren von Candlestick-Diagrammen verwendet. Ich hoffe, dieser Artikel wird Ihnen beim Erlernen von Aktien-Candlestick-Charts hilfreich sein.
Das obige ist der detaillierte Inhalt vonVon Grund auf: Erfahren Sie, wie Sie Aktien-Candlestick-Charts mit PHP und JS erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!