Cipta aplikasi visualisasi data berbilang carta menggunakan PHP dan Chart.js

Dengan pembangunan Internet yang berterusan, sejumlah besar data dijana dan disimpan dalam pelbagai aplikasi dan sistem rangkaian, terutamanya dalam bidang seperti e-dagang, rangkaian sosial, kewangan dan pembuatan. Untuk mengekstrak lebih banyak maklumat daripada data ini, visualisasi data telah menjadi kaedah yang popular. Dengan menukar data ke dalam bentuk grafik, pengguna boleh memahami dan menganalisis data dengan lebih mudah. Dalam artikel ini, kami akan membincangkan cara membuat aplikasi visualisasi data berbilang carta menggunakan PHP dan Chart.js.

Apakah itu Chart.js?

Chart.js ialah perpustakaan JavaScript sumber terbuka yang membenarkan penciptaan carta interaktif, dinamik dan responsif. Ia menyokong banyak jenis carta, seperti carta lajur, carta pai, carta garis, dsb. Chart.js hanya memerlukan sedikit konfigurasi dan beberapa teg HTML untuk menjana carta ringkas dan cantik secara automatik. Apatah lagi, Chart.js menggunakan elemen Kanvas berasaskan HTML5 untuk memaparkan carta, jadi ia boleh dijalankan pada penyemak imbas yang menyokong HTML5.

Buat aplikasi visualisasi data berbilang carta menggunakan PHP dan Chart.js

Dalam tutorial ini, kami akan memperkenalkan cara menggunakan PHP dan Chart.js untuk mencipta aplikasi visualisasi data ringkas. Kami akan menggunakan MySQL sebagai pangkalan data dan PHP dan Chart.js untuk membuat pertanyaan dan menggambarkan data.

Langkah 1: Buat jadual pangkalan data

Pertama, kita perlu mencipta pangkalan data bernama "jualan" dan mencipta jadual bernama "data_jualan" di dalamnya. Jadual hendaklah mengandungi medan berikut:

• id: ID meningkat sendiri
• bulan: bulan jualan
• hasil: hasil jualan
• keuntungan : untung

Gunakan pernyataan SQL berikut untuk mencipta jadual:

BUAT JADUAL data_jualan (
id INT NOT NULL AUTO_INCREMENT,
bulan TARIKH BUKAN NULL,
PERPULUHAN hasil (10, 2) BUKAN NULL,
PERPULUHAN keuntungan(10, 2) BUKAN NULL,
KUNCI UTAMA (id)
);

Kami akan menggunakan kod PHP untuk menambah data ke jadual ini Masukkan beberapa data jualan simulasi.

Langkah 2: Buat skrip PHP

Seterusnya, kita perlu mencipta skrip PHP yang akan menyambung ke pangkalan data MySQL dan membaca data jualan. Skrip ini akan mengembalikan data berformat JSON yang boleh digunakan untuk memaparkan carta dalam Chart.js.

Berikut ialah contoh kod skrip PHP:

//Sambung ke pangkalan data MySQL
$username = "root";
$ kata laluan = "";
$database = "jualan";
$server = "localhost";

$conn = mysqli baharu($server, $username, $password, $database);

//Semak sama ada sambungan berjaya
jika ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

//Soal MySQL pangkalan data
$query = "SELECT * FROM sales_data";
$result = $conn->query($query);

//Formatkan hasil pertanyaan ke dalam format JSON
$ data = array();
while($row = $result->fetch_assoc()) {

$data[] = $row;

}

echo json_encode($data);

//Tutup sambungan MySQL
$conn->close();

?>

Sila ambil perhatian bahawa skrip akan mengeluarkan rentetan berformat JSON. Rentetan ini mengandungi semua data jualan yang ditanya.

Langkah 3: Buat fail HTML dan JavaScript

Sekarang, kita perlu mencipta fail HTML untuk memaparkan carta Chart.js dan fail JavaScript untuk memproses dan melukis carta Chart.js .

Berikut ialah contoh kod untuk fail HTML:

Sila ambil perhatian bahawa kami menggunakan fail JavaScript daripada pustaka Chart.js. Kami juga menyertakan fail JavaScript tersuai (app.js) dalam fail HTML. Ini akan menjadi fail JavaScript yang digunakan untuk menanyakan data dan melukis carta.

Berikut ialah contoh kod fail JavaScript:

//Query pangkalan data MySQL
function loadSalesData(panggilan balik) {

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        callback(xhr.responseText);
    }
}
xhr.open('GET', 'sales.php');
xhr.send();

}

// Lukis carta garis
fungsi drawLineChart(id, label, data, label) {

var ctx = document.getElementById(id).getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: label,
            data: data,
            borderColor: 'rgb(75, 192, 192)',
            fill: false
        }]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: '销售收入'
        },
        tooltips: {
            mode: 'index',
            intersect: false
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: '月份'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: '金额'
                }
            }]
        }
    }
});

}

//Muatkan data dan lukis carta
loadSalesData(fungsi (respon) {

//解析JSON格式的数据
var data = JSON.parse(response);

//获取月份和销售收入数据
var months = [];
var revenues = [];
for (var i = 0; i < data.length; i++) {
    months.push(data[i].month);
    revenues.push(data[i].revenue);
}

//绘制销售收入折线图
drawLineChart('revenue-chart', months, revenues, '销售收入');

//获取月份和利润数据
var profits = [];
for (var i = 0; i < data.length; i++) {
    profits.push(data[i].profit);
}

//绘制利润折线图
drawLineChart('profit-chart', months, profits, '利润');

});

Sila ambil perhatian bahawa kami mentakrifkan dua fungsi: loadSalesData dan drawLineChart. Fungsi loadSalesData digunakan untuk memuatkan data dalam format JSON daripada skrip PHP, manakala fungsi drawLineChart digunakan untuk melukis carta garis dalam elemen Canvas.

Kami menggunakan contoh daripada pustaka Chart.js yang melukis carta garis dan menggunakan data hasil jualan dan keuntungan.

Langkah 4: Jalankan Aplikasi

Sekarang, kami bersedia untuk menjalankan aplikasi kami! Cuma muat naik fail HTML dan fail JavaScript ke pelayan web dan buka fail HTML dalam penyemak imbas. Kami akan mendapat dua graf: satu ialah graf hasil jualan dan satu lagi ialah graf keuntungan.

Kesimpulan

Dalam artikel ini, kami membincangkan cara membuat aplikasi visualisasi data berbilang carta menggunakan PHP dan Chart.js. Kami bermula dengan mencipta jadual pangkalan data dan kemudian mencipta skrip PHP untuk menanyakan data. Seterusnya, kami menggunakan pustaka Chart.js dalam fail HTML dan fail JavaScript untuk memproses dan melukis carta. Akhir sekali, kami menjalankan aplikasi kami dan mendapat dua carta garis yang cantik. Mencipta aplikasi visualisasi data menggunakan PHP dan Chart.js adalah sangat mudah, dan anda boleh memanfaatkan teknologi ini untuk menggambarkan data dalam mana-mana aplikasi web.

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