Maison >développement back-end >tutoriel php >Comment créer un graphique en chandeliers boursiers en utilisant PHP et JS
Comment créer un graphique en chandeliers boursiers en utilisant PHP et JS
- WBOYoriginal
- 2023-12-17 08:08:441044parcourir
Comment créer un graphique en bougies boursières en utilisant PHP et JS
Un graphique en bougies boursières est un graphique d'analyse technique courant en bourse. Il facilite l'investissement en dessinant le prix d'ouverture, le prix de clôture, le prix le plus élevé et le prix le plus bas de. les investisseurs peuvent comprendre plus intuitivement les fluctuations des prix des actions. Cet article vous apprendra comment créer des graphiques en bougies boursières en utilisant PHP et JS, avec des exemples de code spécifiques.
1. Préparation
Avant de commencer, nous devons préparer l'environnement suivant :
1. Un serveur exécutant PHP
2. Un navigateur prenant en charge HTML5 et Canvas
3. Téléchargez et introduisez la bibliothèque Chart.js. téléchargé depuis Téléchargez la dernière version sur le site officiel : https://www.chartjs.org/
2. Obtenir les données boursières
Tout d'abord, nous devons obtenir les données historiques sur les prix du titre, qui peuvent être obtenues à partir des interfaces API , bases de données ou autres sources de données. Ici, nous supposons que nous avons obtenu un tableau contenant les cours des actions. Chaque élément contient les données suivantes : date, cours d'ouverture, cours de clôture, cours le plus élevé et cours le plus bas.
3. Écrivez du code PHP pour générer des données graphiques
Dans le fichier PHP, nous pouvons utiliser le tableau des cours boursiers obtenu pour le convertir dans un format de données qui répond aux exigences de Chart.js. L'implémentation spécifique est la suivante :
<?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);
?>Le code ci-dessus définit d'abord un tableau $stockData pour stocker les données sur le cours des actions, puis convertit chaque élément de données dans un format qui répond aux exigences de Chart.js via une boucle et le stocke dans le Tableau $chartData. Enfin, utilisez la fonction json_encode pour convertir le tableau $chartData en une chaîne au format JSON et l'afficher dans le navigateur.
4. Créez un fichier HTML et introduisez Chart.js
Ensuite, nous devons créer un fichier HTML, introduire la bibliothèque Chart.js et écrire la balise Canvas pour afficher les graphiques en bougies. L'exemple de code spécifique est le suivant :
<!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>Dans le code ci-dessus, nous avons d'abord introduit la bibliothèque Chart.js, puis ajouté une balise Canvas avec l'identifiant « chandelier-chart » à la page pour afficher le graphique en bougies boursières. Ensuite, les données du graphique générées sont affectées à la variable chartData via le code PHP. Enfin, une instance de graphique en bougie est créée à l'aide de la bibliothèque Chart.js et les données du graphique sont transmises à la fonction de création.
5. Ajustez le style du graphique et les éléments de configuration
En fonction des besoins réels, nous pouvons ajuster davantage le style du graphique et les éléments de configuration selon la documentation Chart.js. L'adresse du document est la suivante : https://www.chartjs.org/docs/latest/charts/candlestick.html
En configurant de manière appropriée le style du graphique et les éléments de configuration, le graphique en chandeliers boursiers peut être rendu plus conforme à notre besoins et mieux afficher l’évolution des cours boursiers.
Résumé
La création de graphiques en bougies boursières à l'aide de PHP et JS nécessite un serveur exécutant PHP et un navigateur prenant en charge HTML5 et Canvas. En convertissant les données boursières dans un format de données qui répond aux exigences de Chart.js, puis en utilisant Chart.js pour créer une instance de graphique en bougies, les fluctuations du cours des actions peuvent être affichées dans le navigateur. En ajustant les éléments de style et de configuration, le graphique en bougies boursières peut être mieux adapté à nos besoins. J'espère que cet article vous aidera !
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!