Comment générer des graphiques statistiques interactifs via l'interface php et ECharts-tutoriel php-php.cn

Comment générer des graphiques statistiques interactifs via l'interface php et ECharts

WBOY

Libérer： 2023-12-18 13:08:02

original

983 Les gens l'ont consulté

Comment générer des graphiques statistiques interactifs via linterface php et ECharts

Dans les applications modernes, la visualisation des données devient de plus en plus populaire. Les graphiques statistiques constituent un excellent moyen de visualiser les données et peuvent facilement aider les utilisateurs à comprendre les tendances des données. ECharts est un puissant framework de graphiques front-end qui fournit des types de graphiques riches et des fonctions interactives. Php est un langage backend très populaire qui facilite la génération de contenu et d'interfaces dynamiques. Dans cet article, nous présenterons comment utiliser l'interface PHP et ECharts pour générer des graphiques statistiques interactifs et fournirons des exemples de code spécifiques.

1. Qu'est-ce que l'interface PHP ?

Une interface est un mécanisme qui permet la communication entre différents systèmes. Dans le développement Web, les interfaces connectent différentes applications entre elles et facilitent le transfert de données entre différents systèmes. Généralement, une application Web fournit une API (Application Programming Interface) pour permettre à des applications tierces d'utiliser ses données et ses fonctionnalités. PHP est un excellent langage pour fournir des API car il peut facilement interagir avec les bases de données et offre une grande portabilité du code.

2. Qu'est-ce qu'ECharts ?

ECharts est une bibliothèque de graphiques JavaScript open source qui peut générer de nombreux types de graphiques et possède une variété de fonctionnalités interactives. Parce qu'il est construit sur JavaScript, il peut être facilement affiché sur des pages Web et fonctionne bien avec d'autres frameworks JavaScript tels que jQuery. ECharts fournit une API riche qui facilite la personnalisation des graphiques et offre plusieurs façons de charger des données.

3. Comment utiliser l'interface php et ECharts pour générer des graphiques statistiques interactifs ?

Ci-dessous, nous expliquerons comment utiliser l'interface PHP et ECharts pour générer des graphiques statistiques interactifs. Les étapes spécifiques sont les suivantes :

1. Acquisition de données

Tout d'abord, nous devons obtenir des données à partir de la base de données ou d'autres sources de données. Cela peut être fait via PHP et nécessite de convertir les données au format JSON. Voici un exemple de code pour convertir les données de la base de données MySQL au format JSON :

    <?php
        $servername = "localhost";
        $username = "username";
        $password = "password";
        $dbname = "myDB";
 
        // 创建连接
        $conn = new mysqli($servername, $username, $password, $dbname);
 
        // 检查连接
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }
 
        // 查询数据库
        $sql = "SELECT id, firstname, lastname, email FROM MyGuests";
        $result = $conn->query($sql);
 
        // 将结果转换为JSON格式
        $data = array();
        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                $data[] = $row;
            }
        }
        $json_data = json_encode($data);
 
        // 关闭连接
        $conn->close();
    ?>

Copier après la connexion

2. Génération de graphiques

Dans l'interface PHP, nous pouvons renvoyer les données JSON au front-end, et le front-end utilise les données comme source de données d’ECharts. Voici un exemple de code permettant d'utiliser ECharts pour générer un graphique linéaire :

    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts图表示例</title>
        <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            var option = {
                title: {
                    text: '折线图示例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'line',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
            myChart.setOption(option);
        </script>
    </body>
    </html>

Copier après la connexion

Dans l'exemple de code ci-dessus, nous créons un objet ECharts (via la méthode init) et utilisons l'objet option pour configurer les différentes propriétés du graphique ( titre, légende, axe x et axe y, etc.). Nous définissons également un tableau contenant les données de ventes et le transmettons à la série du graphique (via la propriété series).

3. Interaction avec les données

Enfin, nous devons envoyer les données de l'interface PHP vers le front-end via Ajax ou d'autres méthodes. Voici un exemple de chargement de données dans un graphique ECharts à l'aide de jQuery et Ajax :

    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts图表示例</title>
        <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
        <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            $.getJSON("data.php", function(data) {
                var option = {
                    title: {
                        text: '折线图示例'
                    },
                    tooltip: {},
                    legend: {
                        data:['销量']
                    },
                    xAxis: {
                        data: data.categories
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'line',
                        data: data.data
                    }]
                };
                myChart.setOption(option);
            });
        </script>
    </body>
    </html>

Copier après la connexion

Dans l'exemple de code ci-dessus, nous utilisons la fonction getJSON de jQuery pour charger des données depuis l'interface PHP. Le premier paramètre de cette fonction est l'URL pointant vers l'interface PHP, et le deuxième paramètre est une fonction de rappel qui accepte les données obtenues depuis l'interface PHP et les utilise comme source de données d'ECharts. Nous convertissons également les données dans le format correct et les chargeons dans un graphique linéaire à l'aide de l'API d'ECharts.

Ci-dessus sont toutes les étapes pour utiliser l'interface php et ECharts pour générer des graphiques statistiques interactifs. Si vous souhaitez implémenter des graphiques plus complexes, vous pouvez visiter la documentation officielle d'ECharts, ou trouver plus d'exemples et d'API dans le GitHub d'ECharts. dépôt.

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!