Cipta carta visualisasi data menggunakan PHP dan Chart.js

Dalam dunia dipacu data hari ini, analisis data dan visualisasi data telah menjadi alat yang sangat diperlukan. Dalam konteks ini, PHP, sebagai bahasa pengaturcaraan rangkaian yang popular, boleh digunakan untuk membina laman web dan aplikasi yang sangat interaktif dan dinamik. Untuk memaparkan data dengan lebih baik, kami perlu menggunakan perpustakaan visualisasi data yang sepadan. Dalam artikel ini, kami akan menerangkan cara membuat carta visualisasi data menggunakan PHP dan pustaka Chart.js.

1. Gambaran Keseluruhan Chart.js

Chart.js ialah pustaka JavaScript berdasarkan HTML5 Canvas, digunakan untuk mencipta carta yang ringkas, responsif dan boleh disesuaikan. Ia mengandungi pelbagai jenis carta untuk dipilih, seperti carta bar, carta linear, carta pai, dsb., yang boleh disesuaikan secara fleksibel melalui API.

2. Pasang dan gunakan Chart.js

Pertama, kami akan memuat turun versi terkini Chart.js dan mengekstraknya ke direktori lib dalam direktori projek. Kemudian, kita perlu memperkenalkan fail skrip Chart.js pada halaman tempat carta itu perlu digunakan:

<script src="./lib/Chart.min.js"></script>

Seterusnya, kita perlu mencipta teg kanvas untuk memaparkan carta di dalamnya.

<canvas id="myChart" width="400" height="400"></canvas>

Akhir sekali, kita perlu membuat instantiate objek Carta baharu dalam JavaScript dan mengkonfigurasi pilihan yang sepadan, contohnya:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

Kod di atas mencipta carta bar dan menambah data yang sepadan.

3. Dapatkan data daripada pangkalan data

Biasanya, kita perlu mendapatkan data daripada pangkalan data untuk membentangkannya dalam carta. Di bawah adalah contoh mendapatkan data daripada pangkalan data MySQL menggunakan PHP.

Pertama, kita perlu menyambung ke pangkalan data MySQL. Contohnya:

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

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

Seterusnya, kita perlu menanyakan pangkalan data dan mendapatkan data. Contohnya:

$sql = "SELECT id, name, votes FROM candidates";
$result = $conn->query($sql);

$candidates = [];
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $candidates[] = [
            'name' => $row['name'],
            'votes' => $row['votes']
        ];
    }
}

Ini akan mendapatkan data yang diperlukan daripada jadual calon dan menyimpannya dalam tatasusunan $calon.

Akhir sekali, kami perlu menghantar data ke Chart.js untuk mencipta carta yang sepadan.

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: <?php echo json_encode(array_column($candidates, 'name')); ?>,
        datasets: [{
            label: '# of Votes',
            data: <?php echo json_encode(array_column($candidates, 'votes')); ?>,
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

Ini akan membuat carta bar berdasarkan data yang diperoleh dan memaparkannya pada halaman.

4. Ringkasan

Dalam artikel ini, kami memperkenalkan cara membuat carta visualisasi data menggunakan PHP dan pustaka Chart.js. Kami mempelajari cara menggunakan perpustakaan Chart.js dan mendapatkan data daripada pangkalan data MySQL dan menghantar data kepada Chart.js melalui PHP. Ini menjadikan visualisasi data sebagai proses yang mudah sambil menyediakan maklumat berharga untuk keputusan yang dipacu data.

Atas ialah kandungan terperinci Cipta carta visualisasi data menggunakan PHP dan Chart.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!