Maison > Article > développement back-end > Compétences pratiques PHP et Vue.js : comment afficher les données de tendances du marché à travers des graphiques statistiques

Compétences pratiques PHP et Vue.js : comment afficher les données de tendances du marché à travers des graphiques statistiques

王林original: 2023-08-19 08:14:12825parcourir

Compétences pratiques PHP et Vue.js : Comment afficher les données sur les tendances du marché à l'aide de graphiques statistiques

Les données sur les tendances du marché sont très importantes pour les entreprises et les investisseurs et peuvent les aider à prendre des décisions éclairées. L'affichage de ces données sous forme de graphiques statistiques peut rendre les tendances plus intuitives et plus faciles à comprendre. Dans cet article, nous présenterons comment utiliser PHP et Vue.js, deux outils de développement populaires, pour réaliser cette fonctionnalité.

1. Préparation des données
Tout d'abord, nous devons préparer des exemples de données pour montrer les tendances du marché. Supposons que nous disposions d’un ensemble de données boursières contenant des dates et des indices boursiers. Nous stockons les données dans une table de base de données nommée market_trend, comprenant deux champs : date et index. Nous pouvons créer la table et insérer des exemples de données via l'instruction SQL suivante : market_trend的数据库表中，包括两个字段：date和index。我们可以通过以下SQL语句创建该表和插入一些示例数据：

CREATE TABLE market_trend (
    date DATE,
    index FLOAT
);

INSERT INTO market_trend (date, index) VALUES
    ('2021-01-01', 100),
    ('2021-01-02', 110),
    ('2021-01-03', 120),
    ('2021-01-04', 105),
    ('2021-01-05', 95),
    ('2021-01-06', 115),
    ('2021-01-07', 125),
    ('2021-01-08', 130);

二、后端开发
接下来，我们使用PHP来编写后端程序，该程序将从数据库中获取市场趋势数据。我们使用PDO来连接数据库，并编写一个简单的函数来执行查询并返回结果。以下是getData()函数的示例代码：

<?php
function getData() {
    $host = 'localhost';
    $dbname = 'your_database';
    $username = 'your_username';
    $password = 'your_password';

    $dsn = "mysql:host=$host;dbname=$dbname;charset=utf8mb4";
    $options = [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
    ];

    try {
        $pdo = new PDO($dsn, $username, $password, $options);
    } catch (PDOException $e) {
        die("Connection failed: " . $e->getMessage());
    }

    try {
        $query = $pdo->prepare("SELECT * FROM market_trend");
        $query->execute();

        return $query->fetchAll();
    } catch (PDOException $e) {
        die("Query failed: " . $e->getMessage());
    }
}
?>

三、前端开发
在前端部分，我们将使用Vue.js来构建一个简单的页面来展示市场趋势数据。我们需要引入Vue.js的CDN链接，并编写Vue实例来处理数据和渲染图表。以下是一个示例的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Market Trend</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.bundle.min.js"></script>
    <style>
        canvas {
            max-width: 800px;
        }
    </style>
</head>
<body>
    <div id="app">
        <canvas id="chart"></canvas>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            mounted: function () {
                this.getData();
            },
            methods: {
                getData: function () {
                    // 调用后端接口获取数据
                    // 此处使用axios示例，你可以根据实际情况选择适合的方式
                    axios.get('backend.php')
                        .then(function (response) {
                            // 处理返回的数据
                            var data = response.data;

                            // 构造图表数据
                            var dates = [];
                            var indices = [];

                            data.forEach(function (item) {
                                dates.push(item.date);
                                indices.push(item.index);
                            });

                            // 使用Chart.js绘制图表
                            var ctx = document.getElementById('chart').getContext('2d');
                            var chart = new Chart(ctx, {
                                type: 'line',
                                data: {
                                    labels: dates,
                                    datasets: [{
                                        label: 'Market Trend',
                                        data: indices,
                                        backgroundColor: 'rgba(0, 123, 255, 0.4)',
                                        borderColor: 'rgba(0, 123, 255, 0.8)',
                                        borderWidth: 1
                                    }]
                                },
                                options: {
                                    responsive: true,
                                    maintainAspectRatio: false,
                                    scales: {
                                        yAxes: [{
                                            ticks: {
                                                beginAtZero: false
                                            }
                                        }]
                                    }
                                }
                            });
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            }
        });
    </script>
</body>
</html>

在上述代码中，我们首先引入了Vue.js和Chart.js的CDN链接。然后，我们编写了一个Vue实例，使用mounted钩子函数在页面加载时调用getData()方法来获取市场趋势数据。在getData()方法中，我们使用axios库来调用后端接口，获取数据后使用Chart.js来绘制图表。

通过上述代码示例，我们可以在浏览器中查看展示市场趋势数据的图表。当然，你需要将实际的后端API地址填入axios.get('backend.php')rrreee

2. Développement back-end

Ensuite, nous utilisons PHP pour écrire un programme back-end qui obtiendra les données de tendances du marché à partir de la base de données. Nous utilisons PDO pour nous connecter à la base de données et écrire une fonction simple pour exécuter la requête et renvoyer les résultats. Voici l'exemple de code de la fonction getData() :
rrreee

3. Développement front-end 🎜 Dans la partie front-end, nous utiliserons Vue.js pour construire une page simple à afficher données sur les tendances du marché. Nous devons introduire le lien CDN de Vue.js et écrire une instance Vue pour traiter les données et restituer les graphiques. Voici un exemple de code HTML : 🎜rrreee🎜 Dans le code ci-dessus, nous avons d'abord introduit les liens CDN pour Vue.js et Chart.js. Ensuite, nous avons écrit une instance Vue et utilisé la fonction hook Mounted pour appeler la méthode getData() lors du chargement de la page afin d'obtenir des données sur les tendances du marché. Dans la méthode getData(), nous utilisons la bibliothèque axios pour appeler l'interface backend et utilisons Chart.js pour dessiner le graphique après avoir obtenu les données. 🎜🎜Avec l'exemple de code ci-dessus, nous pouvons afficher des graphiques montrant les données de tendance du marché dans le navigateur. Bien sûr, vous devez renseigner l'adresse réelle de l'API backend dans axios.get('backend.php') afin d'obtenir les données réelles de la base de données. 🎜🎜Résumé🎜Cet article explique comment utiliser PHP et Vue.js pour implémenter la fonction d'affichage des données de tendance du marché via des graphiques statistiques. Grâce à cet exemple, vous pouvez apprendre à utiliser PHP sur le backend pour vous connecter à la base de données et écrire une fonction simple pour obtenir les données. Dans le même temps, en utilisant Vue.js et Chart.js sur le front-end, nous pouvons visualiser les données sous forme de graphiques statistiques intuitifs. J'espère que cet article pourra vous aider à implémenter des fonctions similaires pendant le processus de développement. 🎜

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!

Déclaration：

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

Article précédent：Conseils de développement PHP et Vue.js : Comment gérer des graphiques statistiques de données de date et d'heureArticle suivant：Conseils de développement PHP et Vue.js : Comment gérer des graphiques statistiques de données de date et d'heure

Articles Liés

Voir plus