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:

a07602052f5fe7904092aedc61618e15connect_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:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7 Aplikasi Penggambaran Data Chart.js6e916e0f7d1e588d4f442bf645aedb2f
f69d1a0eed8813f6228307491e2690d5< ; /script>
32d8a8489ccf6ad22016e69b0555932f2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
7aeb761da1c96ed16066362f757ecae3c2caaf3fc160dd2513ce82f021917f8b
31bf1d5b4e24f9a2df2a8454f6e05fa8c2caaf3fc160dd2513ce82f021917f8b
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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!