Gunakan PHP untuk mencapai visualisasi data: Chart.js, Highcharts dan perpustakaan lain

Penggambaran data memainkan peranan yang semakin penting dalam pemprosesan dan analisis data tradisional, jadi semakin ramai saintis data dan penganalisis perniagaan memilih untuk menggunakan carta visual untuk memaparkan data. Sebagai bahasa back-end yang berkuasa, PHP juga boleh memanfaatkan kebolehskalaan yang sangat baik dan ciri pembinaan yang mudah untuk menyepadukan komponen visualisasi data dengan cepat ke dalam aplikasi sedia ada. Kini, terdapat banyak perpustakaan visualisasi di pasaran, antaranya Chart.js dan Highcharts merupakan salah satu perpustakaan yang paling popular. Dalam artikel ini, kita akan membincangkan cara menggunakannya untuk visualisasi data dalam PHP.

I. Chart.js

Chart.js ialah perpustakaan JavaScript yang mudah digunakan yang membolehkan anda melukis carta interaktif dan responsif menggunakan elemen Kanvas HTML5. Ia menyokong tujuh jenis carta yang biasa digunakan (garisan, bar, pai, donat, taburan, radar dan carta kutub), membolehkan anda mewakili data anda dengan cepat dan tepat. Chart.js menyediakan API yang ringkas dan praktikal untuk menukar kandungan, gaya dan interaktiviti carta dengan mudah. Selain itu, Chart.js juga menyokong kesan animasi, menjadikan carta lebih jelas dan menarik.

Apabila Chart.js disepadukan dengan PHP, anda perlu menjana skrip JavaScript dalam fungsi panggil balik PHP dan mengeluarkannya ke halaman HTML. Melalui lapisan abstraksi data PHP (seperti PDO, MySQLi), anda boleh mendapatkan data dengan cepat dan mudah dan menyerahkannya kepada Chart.js untuk carta. Berikut ialah kod contoh Chart.js asas:

<?php
// 数据库连接信息，这里以SQLite3为例
$db = new PDO('sqlite:/path/to/database.db');

// 查询数据
$stmt = $db->prepare('SELECT * FROM tablename');
$stmt->execute();
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Chart.js所需的标签和数据
$labels = array();
$values = array();
foreach ($data as $row) {
    $labels[] = $row['label'];
    $values[] = $row['value'];
}

// 构建Chart.js的数据源
$chart_data = array(
    'labels' => $labels,
    'datasets' => array(
        array(
            'label' => 'Chart Data',
            'data' => $values,
            'backgroundColor' => 'rgba(255, 99, 132, 0.5)',
            'borderColor' => 'rgba(255, 99, 132, 1)',
            'borderWidth' => 1,
        ),
    ),
);

// 输出JavaScript代码
echo '<canvas id="myChart"></canvas>';
echo '<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>';
echo '<script>';
echo 'var ctx = document.getElementById("myChart").getContext("2d");';
echo 'var myChart = new Chart(ctx, {';
echo '    type: "bar",';
echo '    data: ' . json_encode($chart_data) . ',';
echo '    options: {}';
echo '});';
echo '</script>';
?>

Dalam contoh di atas, kami mula-mula menanyakan data daripada pangkalan data dan menukarnya kepada label dan data yang diperlukan oleh Chart.js. Kemudian, kami membina sumber data Chart.js dan menggunakan arahan gema untuk mengeluarkan kod JavaScript ke dalam halaman HTML. Akhir sekali, kami mencipta contoh carta bar asas menggunakan API Chart.js.

II Carta Tinggi

Highcharts ialah perpustakaan carta JavaScript yang sangat baik yang menyokong pelbagai jenis carta (carta garisan, carta bar, carta pai, carta serakan, peta haba lanjutan, dll.) dan interaktif. senario (seperti penskalaan, penyamaran, pengeksportan, dsb.). Tidak seperti Chart.js, Highcharts memerlukan penggunaan versi komersial yang dibenarkan atau versi sumber terbuka untuk tujuan bukan komersial.

Apabila menyepadukan Highcharts dalam aplikasi PHP, anda perlu membenamkan kod JavaScript ke dalam halaman HTML sama seperti Chart.js. Sekali lagi, anda perlu mendapatkan data daripada PHP dan menyerahkannya kepada Highcharts untuk merancang data. Berikut ialah contoh Highcharts yang mudah:

<?php
// 数据库连接信息，这里以MySQL为例
$mysqli = new mysqli('localhost', 'user', 'password', 'database');

// 查询数据
$query = "SELECT * FROM tablename";
$result = $mysqli->query($query);

// Highcharts需要的标签和数据
$categories = array();
$values = array();
while ($row = $result->fetch_assoc()) {
    $categories[] = $row['label'];
    $values[] = $row['value'];
}

// 输出JavaScript代码
echo '<div id="myChart"></div>';
echo '<script src="https://code.highcharts.com/highcharts.js"></script>';
echo '<script>';
echo 'Highcharts.chart("myChart", {';
echo '    chart: {';
echo '        type: "line"';
echo '    },';
echo '    title: {';
echo '        text: "Chart Data"';
echo '    },';
echo '    xAxis: {';
echo '        categories: ' . json_encode($categories) . '';
echo '    },';
echo '    series: [{';
echo '        name: "Data",';
echo '        data: ' . json_encode($values) . '';
echo '    }]';
echo '});';
echo '</script>';
?>

Dalam contoh di atas, kami menggunakan perpustakaan mysqli untuk mendapatkan data daripada pangkalan data MySQL dan menukarnya kepada label dan data yang diperlukan oleh Highcharts. Kemudian, kami menggunakan arahan gema untuk mengeluarkan kod JavaScript ke dalam halaman HTML. Akhir sekali, kami mencipta contoh carta garis asas menggunakan API Highcharts.

Ringkasan

Penggambaran data ialah salah satu alat penting untuk analisis data dan cerapan perniagaan, dan Chart.js dan Highcharts ialah dua pustaka JavaScript yang biasa digunakan yang boleh melaksanakan visualisasi data dengan mudah. PHP, sebagai bahasa back-end yang berkuasa, boleh dengan mudah mengintegrasikan perpustakaan JavaScript ini ke dalam aplikasi sedia ada menggunakan lapisan abstraksi data dan keupayaan rendering templat. Dalam aplikasi sebenar, anda boleh menggabungkan logik perniagaan anda sendiri ke dalam perpustakaan ini untuk mencapai visualisasi data yang lebih cekap dan tepat.

Atas ialah kandungan terperinci Gunakan PHP untuk mencapai visualisasi data: Chart.js, Highcharts dan perpustakaan lain. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!