Bagaimana untuk menjana carta statistik adaptif melalui antara muka php dan ECharts-tutorial php-php.cn

Bagaimana untuk menjana carta statistik adaptif melalui antara muka php dan ECharts

PHPz

Lepaskan： 2023-12-18 12:50:02

asal

643 orang telah melayarinya

Bagaimana untuk menjana carta statistik adaptif melalui antara muka php dan ECharts

Dengan perkembangan pesat Internet dan kemunculan era data besar, visualisasi data telah menjadi salah satu cara penting untuk kami mendapatkan dan memaparkan data . Sebagai perpustakaan visualisasi data yang sangat baik, ECharts telah menjadi salah satu alat pilihan untuk banyak pembangun. Artikel ini akan memperkenalkan cara menjana carta statistik penyesuaian melalui antara muka PHP dan ECharts, dan menyediakan contoh kod khusus.

Sahkan persekitaran projek
Pertama, pastikan php dan ECharts telah dipasang dalam persekitaran projek anda. Anda boleh mendapatkan versi terkini php dan ECharts.
Sediakan data
Sebelum menjana carta statistik, kita perlu menyediakan data. Katakan kita mempunyai sistem pengurusan pelajar dan kita ingin mengira purata markah setiap kelas. Kami menanyakan data daripada pangkalan data dan menyimpan hasilnya sebagai tatasusunan.

<?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();
?>

Salin selepas log masuk

Jana carta
Seterusnya, kami menggunakan ECharts untuk menjana carta. Dalam PHP, kita boleh mencipta templat HTML dan kemudian menjana data dan skrip yang diperlukan secara dinamik dalam 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>

Salin selepas log masuk

Buat antara muka php
Akhir sekali, kita perlu mencipta antara muka php untuk mendapatkan data dan mengembalikannya ke bahagian hadapan dalam 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);
?>

Salin selepas log masuk

Kemudian, kita boleh mendapatkan data dengan memanggil antara muka php di bahagian hadapan dan menjana carta menggunakan ECharts.

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

Salin selepas log masuk

Melalui langkah di atas, kita boleh mendapatkan data melalui antara muka php dan menggunakan ECharts untuk menjana carta statistik adaptif. Saya harap artikel ini dapat membantu anda merealisasikan keperluan visualisasi data anda dalam projek anda.

Atas ialah kandungan terperinci Bagaimana untuk menjana carta statistik adaptif melalui antara muka php dan ECharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!