À partir de zéro : apprenez à créer des graphiques en chandeliers boursiers avec PHP et JS

王林
Libérer: 2023-12-17 12:52:01
original
510 Les gens l'ont consulté

À partir de zéro : apprenez à créer des graphiques en chandeliers boursiers avec PHP et JS

Partez de zéro : apprenez à créer un graphique en chandeliers boursiers à l'aide de PHP et JS

Dans le cadre du trading d'actions, un graphique en chandeliers est un type de graphique courant utilisé pour montrer l'évolution du prix d'une action. Cet article explique comment utiliser PHP et JS pour créer des graphiques boursiers en chandeliers et fournit des exemples de code spécifiques.

1. Préparation technique
Avant de commencer, nous devons nous assurer que l'environnement de développement PHP et JS a été installé. S'il n'est pas installé, vous pouvez l'installer conformément à la documentation officielle.

2. Préparation des données
Afin de créer un graphique en bougies boursières, nous devons d'abord préparer les données historiques sur les prix de l'action. Ces données peuvent être obtenues auprès de bourses ou de fournisseurs de données tiers. Pour simplifier l'exemple, nous utilisons des données boursières hypothétiques, enregistrées dans un fichier CSV. Le format du fichier devrait ressembler à ceci :

日期,开盘价,最高价,最低价,收盘价
2022-01-01,100,120,80,110
2022-01-02,110,130,90,120
......
Copier après la connexion

3. Lire les données avec PHP
Tout d'abord, nous devons utiliser PHP pour lire les données dans le fichier CSV. Vous pouvez utiliser la fonction fgetcsv pour lire un fichier CSV ligne par ligne et enregistrer les données de chaque ligne dans un tableau. Voici un exemple de code pour lire un fichier CSV et enregistrer les données :

$data = array(); //保存数据的数组
$handle = fopen('stock_data.csv', 'r'); //打开CSV文件
if ($handle) {
    while (($line = fgetcsv($handle)) !== false) {
        $data[] = $line;
    }
    fclose($handle); //关闭文件句柄
}
Copier après la connexion

IV Traitement des données
Après avoir lu les données du fichier CSV dans un tableau PHP, nous devons traiter les données afin de créer un graphique en bougies. en utilisant JS. Plus précisément, nous devons enregistrer les données de date et de prix dans des tableaux distincts pour les utiliser dans JS.

Ce qui suit est un exemple de code pour enregistrer respectivement les données de date et de prix dans des tableaux :

$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]);
}
Copier après la connexion

5. Générer un graphique en chandeliers
Maintenant, nous avons préparé les données et les avons enregistrées dans différents tableaux. Ensuite, nous utiliserons JS pour créer des graphiques en chandeliers.

Tout d'abord, nous devons introduire la bibliothèque JS dans la page HTML. Ici, nous utilisons la bibliothèque Chart.js pour générer des graphiques en chandeliers. La version correspondante de Chart.js peut être téléchargée depuis le site officiel et introduite dans la page HTML.

Ensuite, créez un élément canevas dans la page HTML pour afficher le graphique en bougies. Voici le code HTML pour un exemple :

<!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>
Copier après la connexion

Dans le fichier JavaScript chandelier.js, nous utilisons l'API Chart.js pour créer des graphiques en chandeliers. Voici un exemple de code 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中的数据补充到这里
            ]
        }]
    }
});
Copier après la connexion

Dans le code ci-dessus, nous utilisons l'API fournie par Chart.js pour créer un graphique en bougies. En complétant les données en PHP, nous pouvons ajouter dynamiquement des données de graphique en bougies dans data.datasets[0].data du graphique.

6. Conclusion
Cet article explique comment utiliser PHP et JS pour créer des graphiques en bougies boursières et donne des exemples de code spécifiques. Grâce à cet exemple, nous pouvons apprendre à lire un fichier CSV, enregistrer les données dans un tableau et utiliser la bibliothèque Chart.js pour générer des graphiques en chandeliers. J'espère que cet article vous sera utile dans le processus d'apprentissage des graphiques boursiers en chandeliers.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!