Tutoriel complet sur les graphiques de bougies de dessin à l'aide de PHP avec JavaScript

M66 2025-07-09

Introduction au concept de base du graphique de bougies d'origine

Les graphiques de chandelles d'origine sont des graphiques largement utilisés dans l'analyse technique qui aident les investisseurs à comprendre les tendances de la volatilité des prix en montrant les prix d'ouverture, de clôture, les plus élevés et les plus bas. Cet article montrera comment générer un tel graphique via PHP et JavaScript et utiliser un graphique.js pour le rendu frontal.

Préparez-vous à l'environnement de développement

Avant de commencer, assurez-vous d'avoir l'environnement suivant:

Serveur avec PHP configuré
Browsers modernes qui prennent en charge HTML5 et Canvas
Chart.js Bibliothèque du graphique (peut être téléchargé via CDN ou site Web officiel)

Préparer les données historiques des actions

Vous devez préparer un tableau contenant des informations sur les cours des actions historiques, chaque élément de données doit inclure:

date
Prix d'ouverture (ouvert)
Prix de fermeture (fermeture)
Prix le plus élevé
Prix le plus bas (bas)

Générer des données de graphique à l'aide de PHP

Voici un exemple de code pour la mise en forme des données de stock dans le format requis dans chart.js à l'aide de PHP:

 
<?php
$stockData = array(
    array("date" => "2021-01-01", "open" => 100, "close" => 120, "high" => 130, "low" => 90),
    // Plus d&#39;éléments de données...
);

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

Ce code convertit le tableau des cours d'action d'origine en format de données disponible dans Chart.js et est enfin sorti en JSON pour les graphiques frontaux.

Écrivez la page HTML et Charger Chart.js

Créez un fichier HTML, introduisez Chart.js et ajoutez des éléments de toile pour l'affichage du graphique:

 
<!DOCTYPE html>
<html>
<head>
    <title>Graphique de bougie d&#39;origine</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: {
                // Les éléments de configuration peuvent être ajustés en fonction des besoins réels
            }
        });
    </script>
</body>
</html>

Cette structure HTML coopère avec Chart.js pour réaliser la visualisation du graphique de bougies d'origine.

Styles de graphique personnalisés

Chart.js offre une riche option de configuration et peut personnaliser le style des graphiques de bougie en fonction des besoins réels, tels que la couleur, la boîte d'invite, l'échelle de l'axe, etc. pour plus de détails, veuillez vous référer à la documentation officielle pour l'ajustement:

Chart.js Documentation des chandeliers

Conclusion

En traitant des données via PHP et des graphiques de dessin en combinaison avec JavaScript et Chart.js, vous pouvez rapidement créer une page de graphique de chandelier en stockage dynamiquement mise à jour. Que ce soit utilisé pour la présentation des données financières ou la démonstration d'enseignement, cette solution est efficace et évolutive.

Connexe

Comment créer des graphiques de bougies d'origine à l'aide de PHP et JS