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

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

PHPz

Libérer： 2023-12-18 12:50:02

original

642 Les gens l'ont consulté

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

Comment générer des graphiques statistiques adaptatifs via l'interface PHP et ECharts

Avec le développement rapide d'Internet et l'avènement de l'ère du big data, la visualisation des données est devenue l'un des moyens importants pour nous d'obtenir et d'afficher des données. . En tant qu'excellente bibliothèque de visualisation de données, ECharts est devenu l'un des outils de choix pour de nombreux développeurs. Cet article expliquera comment générer des graphiques statistiques adaptatifs via l'interface PHP et ECharts, et fournira des exemples de code spécifiques.

Confirmez l'environnement du projet
Tout d'abord, assurez-vous que php et ECharts ont été installés dans l'environnement de votre projet. Vous pouvez obtenir les dernières versions de php et ECharts.
Préparer les données
Avant de générer des graphiques statistiques, nous devons préparer les données. Supposons que nous ayons un système de gestion des étudiants et que nous souhaitions compter la note moyenne de chaque classe. Nous interrogeons les données de la base de données et enregistrons les résultats sous forme de tableau.

<?php
$conn = new mysqli("localhost", "username", "password", "database");

if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

$sql = "SELECT class, AVG(score) AS average_score FROM students GROUP BY class";
$result = $conn->query($sql);

$data = array();
while ($row = $result->fetch_assoc()) {
    $data[] = array(
        'class' => $row['class'],
        'average_score' => $row['average_score']
    );
}

$conn->close();
?>

Copier après la connexion

Générer un graphique
Ensuite, nous utilisons ECharts pour générer le graphique. En PHP, nous pouvons créer un modèle HTML puis générer dynamiquement les données et les scripts requis en PHP.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>统计图表</title>
    <!-- 引入ECharts库 -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 100%; height: 400px;"></div>

    <script>
        // 动态生成图表数据
        var data = <?php echo json_encode($data); ?>;

        // 初始化图表
        var chart = echarts.init(document.getElementById('chart'));

        // 配置图表
        var option = {
            title: {
                text: '班级平均分数统计',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: data.map(function(item) {
                    return item.class;
                })
            },
            yAxis: {
                type: 'value',
                name: '平均分数'
            },
            series: [{
                type: 'bar',
                data: data.map(function(item) {
                    return item.average_score;
                })
            }]
        };

        // 渲染图表
        chart.setOption(option);
    </script>
</body>
</html>

Copier après la connexion

Créer une interface php
Enfin, nous devons créer une interface php pour récupérer les données et les renvoyer au front-end au format json.

<?php
header('Content-Type: application/json');

$data = array(
    array('class' => 'Class A', 'average_score' => 85),
    array('class' => 'Class B', 'average_score' => 78),
    array('class' => 'Class C', 'average_score' => 92),
    // 更多数据...
);

echo json_encode($data);
?>

Copier après la connexion

Ensuite, nous pouvons obtenir les données en appelant l'interface php sur le front-end et générer des graphiques à l'aide d'ECharts.

$.getJSON('data.php', function(data) {
    // 使用ECharts生成图表
    // ...
});

Copier après la connexion

Grâce aux étapes ci-dessus, nous pouvons obtenir des données via l'interface php et utiliser ECharts pour générer des graphiques statistiques adaptatifs. J'espère que cet article pourra vous aider à réaliser vos besoins en visualisation de données dans votre projet.

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!