Cara menggunakan PHP untuk visualisasi data web

Penggambaran data menjadi semakin penting kerana aplikasi web semakin digunakan untuk pemprosesan dan pembentangan data. Dengan menggambarkan data, pengguna boleh memahami dan menemui maklumat yang berguna dengan lebih baik. PHP ialah bahasa pembangunan web yang biasa digunakan, dan terdapat banyak alat dan perpustakaan yang tersedia untuk visualisasi data. Dalam artikel ini, kami akan mendalami cara menggunakan PHP untuk visualisasi data web.

1. Cipta carta menggunakan Chart.js

Chart.js ialah perpustakaan JavaScript yang popular untuk mencipta carta yang ringkas dan dinamik. Visualisasi data boleh dibuat dengan mudah di tapak web menggunakan PHP dan Chart.js. Untuk mula menggunakan Chart.js, anda perlu mengimportnya dahulu dalam HTML. Ini boleh dicapai dengan kod berikut:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Seterusnya, data boleh diambil daripada pangkalan data menggunakan PHP dan dihantar ke JavaScript untuk mencipta carta. Berikut ialah contoh mudah:

<?php
//从数据库中检索数据
$data = array();
while ($row = mysqli_fetch_array($result)) {
    $data[] = $row['value'];
}
?>

<script>
//将数据传递给JavaScript
var data = <?php echo json_encode($data); ?>;

//创建图表
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Data',
            data: data,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

Dalam contoh ini, kami mencipta carta lajur dengan data yang diambil daripada pangkalan data dan kemudian menggambarkannya menggunakan JavaScript. Ambil perhatian bahawa kami menggunakan fungsi json_encode() PHP untuk menukar data kepada sintaks JavaScript.

2. Cipta carta menggunakan Carta Google

Carta Google ialah perpustakaan web percuma yang menyediakan pelbagai jenis carta dan pilihan penyesuaian. Carta interaktif dan tersuai tinggi boleh dibuat menggunakan PHP dan Carta Google. Untuk mula menggunakan Carta Google, anda perlu memperkenalkan kod berikut dalam HTML anda:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Seterusnya, gunakan PHP untuk mendapatkan semula data daripada pangkalan data. Kemudian, gunakan JavaScript untuk mencipta objek visualisasi dan menambah data pada objek carta. Berikut ialah contoh mudah:

<?php
//从数据库中检索数据
$data = array();
while ($row = mysqli_fetch_array($result)) {
    $data[] = array($row['month'], (int)$row['sales']);
}
?>

<script>
//加载图表库
google.charts.load('current', {'packages':['corechart']});

//设置回调函数
google.charts.setOnLoadCallback(drawChart);

//绘制图表
function drawChart() {
  //创建数据表格
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Month');
  data.addColumn('number', 'Sales');
  data.addRows(<?php echo json_encode($data); ?>);

  //设置选项
  var options = {'title':'Sales Report',
                 'width':400,
                 'height':300};

  //创建图表对象
  var chart = new google.visualization.LineChart(document.getElementById('myChart'));
  chart.draw(data, options);
}
</script>

Dalam contoh ini, kami menggunakan PHP untuk mendapatkan semula data daripada pangkalan data dan menambahkannya pada objek Carta Google. Kami mencipta plot baris dan menggunakan fungsi json_encode() untuk menukar data kepada sintaks JavaScript.

3. Cipta visualisasi dengan D3.js

D3.js ialah perpustakaan JavaScript yang popular untuk mencipta visualisasi data yang sangat disesuaikan. Tidak seperti dua perpustakaan sebelumnya, D3.js ialah alat yang lebih kompleks, tetapi ia boleh mencipta carta dan visualisasi yang sangat kompleks dan interaktif. Untuk mula menggunakan D3.js, anda perlu memperkenalkan kod berikut dalam HTML anda:

<script src="https://d3js.org/d3.v5.min.js"></script>

Seterusnya, gunakan PHP untuk mendapatkan semula data daripada pangkalan data. Kemudian, gunakan D3.js untuk mencipta objek visualisasi dan menambah data pada objek. Berikut ialah contoh mudah:

<?php
//从数据库中检索数据
$data = array();
while ($row = mysqli_fetch_array($result)) {
    $data[] = array('label' => $row['product_name'], 'value' => (int)$row['sales']);
}
?>

<script>
//设置宽度和高度
var width = 800;
var height = 400;

//创建SVG并设置宽度和高度
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

//创建Pie图
var pie = d3.pie()
            .value(function(d) { return d.value; })(<?php echo json_encode($data); ?>);

//创建弧线对象
var arc = d3.arc()
            .outerRadius(Math.min(width, height) / 2 - 1)
            .innerRadius(0);

//创建Pie图表
var arcLabel = (() => {
  const radius = Math.min(width, height) / 2;
  return d3.arc().innerRadius(radius).outerRadius(radius);
})();

//创建颜色比例尺
var color = d3.scaleOrdinal().range(d3.schemeCategory10);

//绘制Pie图
var label = d3.arc().outerRadius(radius * 0.8).innerRadius(radius * 0.4);
  pie.forEach(function(d) {
    d.innerRadius = 0;
    d.outerRadius = radius - 40;
    d.color = color(d.data.label);
  });

//根据弧线对象创建路径
var path = svg.selectAll("path")
              .data(pie)
              .enter()
              .append("path")
              .attr("d", arc)
              .attr("fill", function(d) { return d.color; })
              .attr("stroke", "white")
              .style("stroke-width", "2px")
              .style("opacity", 0.7)
              .each(function(d) { this._current = d; });

//添加标签
var label = svg
  .selectAll('.label')
  .data(pie)
  .enter()
  .append('g')
  .attr('class', 'label-group')
  .attr('transform', function(d) {
    var centroid = arc.centroid(d);
    return 'translate(' + [centroid[0] * 1.5, centroid[1] * 1.5] + ')';
  });

label.append('text')
  .attr('class', 'label')
  .text(function(d) {
    return d.data.label;
  })
  .attr('text-anchor', 'middle')
  .style('fill', '#ffffff')
  .style('font-size', '12px');

Dalam contoh ini, kami menggunakan PHP untuk mendapatkan semula data daripada pangkalan data dan menambahkannya pada objek D3.js. Kami mencipta carta Pai dan menggunakan skala warna untuk menetapkan warna padanya. Akhir sekali, kami menambah label untuk menerangkan maksud setiap bahagian.

Ringkasan

Penggambaran data web sangat berguna, ia boleh membantu pengguna memproses dan memahami sejumlah besar data. Visualisasi web boleh dibuat dengan mudah menggunakan PHP dan pelbagai perpustakaan serta alatan. Dalam artikel ini, kami membincangkan cara membuat visualisasi menggunakan Chart.js, Google Charts dan D3.js. Tidak kira alat yang anda pilih, menggunakan PHP boleh menjadikan proses visualisasi data lebih mudah dan lebih cekap.

Atas ialah kandungan terperinci Cara menggunakan PHP untuk visualisasi data web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!