Aktueller Standort: Startseite> Neueste Artikel> Vervollständigen Sie das Tutorial zum Zeichnen von Lagerkerzendiagrammen mit PHP mit JavaScript

Vervollständigen Sie das Tutorial zum Zeichnen von Lagerkerzendiagrammen mit PHP mit JavaScript

M66 2025-07-09

Einführung in das Grundkonzept der Aktienkerzenkarte

Aktien -Candlestick -Diagramme sind Grafiken, die in der technischen Analyse häufig verwendet werden, die den Anlegern helfen, Preisvolatilitätstrends zu verstehen, indem sie die Eröffnungs-, Schluss-, höchsten und niedrigsten Preise zeigen. In diesem Artikel wird zeigen, wie ein solches Diagramm über PHP und JavaScript generiert wird und Diagramm.js für das Front-End-Rendering verwendet.

Bereiten Sie sich auf die Entwicklungsumgebung vor

Stellen Sie vor Beginn sicher, dass Sie die folgende Umgebung haben:

  • Server mit konfiguriertem PHP
  • Moderne Browser, die HTML5 und Leinwand unterstützen
  • Diagramm.JS -Diagrammbibliothek (kann über CDN oder offizielle Website heruntergeladen werden)

Bereiten Sie die historischen Daten vor

Sie müssen ein Array mit historischen Aktienkursinformationen vorbereiten. Jede Daten sollte enthalten:

  • Datum
  • Eröffnungspreis (geöffnet)
  • Preis schließen (schließen)
  • Höchster Preis
  • Niedrigster Preis (niedrig)

Generieren Sie Diagrammdaten mit PHP

Hier ist ein Codebeispiel für die Formatierung von Aktiendaten in das erforderliche Format in Diagramm.js mit PHP:

 
<?php
$stockData = array(
    array("date" => "2021-01-01", "open" => 100, "close" => 120, "high" => 130, "low" => 90),
    // Weitere Datenelemente...
);

$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);
?>

Dieser Code wandelt das ursprüngliche Aktienkurs-Array in das in Diagramm verfügbare Datenformat um und wird schließlich in JSON für Front-End-Diagramme ausgegeben.

Schreiben Sie die HTML -Seite und laden Sie Diagramm.js

Erstellen Sie eine HTML -Datei, führen Sie Diagramm.js ein und fügen Sie Canvas -Elemente für die Diagrammanzeige hinzu:

 
<!DOCTYPE html>
<html>
<head>
    <title>Stockkerch -Diagramm</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: {
                // Konfigurationselemente können entsprechend den tatsächlichen Anforderungen eingestellt werden
            }
        });
    </script>
</body>
</html>

Diese HTML -Struktur kooperiert mit Diagramm.js, um die Visualisierung des Aktienkerzdiagramms zu realisieren.

Benutzerdefinierte Diagrammstile

Diagramm.js bietet eine reichhaltige Konfigurationsoption und kann den Stil der Kerzendiagramme entsprechend den tatsächlichen Anforderungen wie Farben, Eingabeaufforderung, Eingabeaufforderung, Achsenskala usw. anpassen. Weitere Informationen finden Sie in der offiziellen Dokumentation zur Anpassung:

Diagramm.js Candlestick -Dokumentation

Abschluss

Durch die Verarbeitung von Daten über PHP und Zeichnen von Diagrammen in Kombination mit JavaScript und Diagramm.JS können Sie schnell eine dynamisch aktualisierte Seite Candlestick -Diagramm -Diagramm -Seite erstellen. Unabhängig davon, ob für die Finanzdatenpräsentation oder die Unterrichtsdemonstration verwendet wird, ist diese Lösung effizient und skalierbar.

Ähnlich