Heim > Artikel > Backend-Entwicklung > So erstellen Sie ein Aktien-Candlestick-Diagramm mit PHP und JS
So erstellen Sie ein Aktien-Candlestick-Diagramm mit PHP und JS
- WBOYOriginal
- 2023-12-17 08:08:44984Durchsuche
So erstellen Sie ein Aktienkerzendiagramm mit PHP und JS
Ein Aktienkerzendiagramm ist eine gängige technische Analysegrafik auf dem Aktienmarkt. Es hilft beim Investieren, indem es den Eröffnungskurs, den Schlusskurs, den höchsten Preis und den niedrigsten Preis zeichnet die Aktie. Anleger können die Kursschwankungen von Aktien intuitiver verstehen. In diesem Artikel erfahren Sie anhand spezifischer Codebeispiele, wie Sie Aktienkerzendiagramme mit PHP und JS erstellen.
1. Vorbereitung
Bevor wir beginnen, müssen wir die folgende Umgebung vorbereiten:
1. Einen Browser, der HTML5 und Canvas unterstützt.
3 heruntergeladen von Laden Sie die neueste Version von der offiziellen Website herunter: https://www.chartjs.org/
Zunächst müssen wir die historischen Preisdaten der Aktie abrufen, die über API-Schnittstellen abgerufen werden können , Datenbanken oder andere Datenquellen. Hier gehen wir davon aus, dass wir ein Array mit Aktienkursen erhalten haben. Jedes Element enthält die folgenden Daten: Datum, Eröffnungskurs, Schlusskurs, höchster Preis und niedrigster Preis.
In der PHP-Datei können wir das erhaltene Aktienkurs-Array verwenden, um es in ein Datenformat zu konvertieren, das den Anforderungen von Chart.js entspricht. Die spezifische Implementierung lautet wie folgt:
<?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);
?>Der obige Code definiert zunächst ein $stockData-Array zum Speichern von Aktienkursdaten und konvertiert dann jedes Datenelement über eine Schleife in ein Format, das den Anforderungen von Chart.js entspricht, und speichert es im $chartData-Array. Verwenden Sie abschließend die Funktion json_encode, um das Array $chartData in eine Zeichenfolge im JSON-Format zu konvertieren und an den Browser auszugeben. 4. Erstellen Sie eine HTML-Datei und führen Sie Chart.js ein. Als nächstes müssen wir eine HTML-Datei erstellen, die Chart.js-Bibliothek einführen und das Canvas-Tag zum Anzeigen von Kerzendiagrammen schreiben. Das spezifische Codebeispiel lautet wie folgt:
<!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>Im obigen Code haben wir zuerst die Chart.js-Bibliothek eingeführt und dann der Seite ein Canvas-Tag mit der ID „candlestick-chart“ hinzugefügt, um das Aktienkerzendiagramm anzuzeigen. Als nächstes werden die generierten Diagrammdaten über PHP-Code der Variable chartData zugewiesen. Schließlich wird mithilfe der Chart.js-Bibliothek eine Kerzendiagramminstanz erstellt und die Diagrammdaten an die Erstellungsfunktion übergeben. 5. Passen Sie den Diagrammstil und die Konfigurationselemente an. Je nach tatsächlichem Bedarf können wir den Diagrammstil und die Konfigurationselemente gemäß der Chart.js-Dokumentation weiter anpassen. Die Dokumentadresse lautet wie folgt: https://www.chartjs.org/docs/latest/charts/candlestick.html
Das Erstellen von Aktienkerzendiagrammen mit PHP und JS erfordert einen Server mit PHP und einen Browser, der HTML5 und Canvas unterstützt. Durch die Konvertierung der Aktiendaten in ein Datenformat, das den Anforderungen von Chart.js entspricht, und die anschließende Verwendung von Chart.js zum Erstellen einer Kerzendiagramminstanz können die Aktienkursschwankungen im Browser angezeigt werden. Durch Anpassen des Stils und der Konfigurationselemente kann das Aktienkerzendiagramm besser an unsere Bedürfnisse angepasst werden. Ich hoffe, dieser Artikel hilft Ihnen!
Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Aktien-Candlestick-Diagramm mit PHP und JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!