PHP
Cara Membuat Bagan Batang, Donat, dan Pai Bertumpuk Dinamis di PHP dengan Chart.js
Jun
oleh Vincy. Terakhir diubah pada 20 Mei 2021.
Visualisasi dan bagan memungkinkan pengguna memproses data dan statistik dengan lebih mudah. Apakah Anda mencari cara untuk menyajikan statistik kompleks dalam aplikasi Anda? Apakah Anda ingin tahu cara membuat grafik di PHP, maka halaman ini akan membantu Anda.
Mulai dari presentasi dalam ujian sekolah hingga statistik kompleks yang tinggi dalam perangkat lunak, bagan dan grafik adalah kandidat terdepan untuk menjadi pemenang.
Saya telah mengeksploitasinya berkali-kali dalam ujian saya untuk mendapatkan nilai bagus 😉 Tetap saja, ini berfungsi untuk saya ketika saya menyajikan statistik kepada klien saya. Pergi untuk itu. Selalu mencari peluang untuk menyajikan data sebagai grafik.
Ada banyak perpustakaan untuk membuat bagan di UI web. Chart.js adalah salah satu opsi yang bersifat open-source untuk menampilkan grafik HTML5.
Pustaka Chart.js mudah diintegrasikan ke dalam aplikasi. Ini memberikan panduan mudah untuk memulai dengan membuat grafik.
Artikel ini memiliki contoh untuk membuat diagram batang, donat, dan pai di bagian depan. Ini menggunakan sumber database untuk mengatur dataset grafik. Sebelumnya, kita telah melihat contoh untuk membandingkan data dengan diagram batang yang dibuat menggunakan Hichart.
Apa yang ada di dalamnya – Cara membuat grafik di PHP!
- Tentang contoh ini
- Kanvas HTML untuk membuat grafik
- Inisialisasi Chart.js dan muat data ke dalam grafik
- Buat Model PHP, Util untuk menyiapkan data grafik
- Skrip basis data
- Output – Dataset bagan dan tangkapan layar UI
Tentang contoh ini
Contoh ini akan membantu Anda membuat grafik di PHP. Ini membaca data dari database dan memuat ke dalam grafik dinamis yang dibuat menggunakan Chart.js.
Database memiliki tabel dengan nilai siswa. Kode ini untuk membuat berbagai jenis grafik dengan nilai siswa.
Ini memiliki skrip Chart.js untuk membuat bagan kolom dasar, bagan pai dan donat, dan bagan batang vertikal bertumpuk.
Script menggunakan metode posting jQuery untuk meminta data dinamis dari PHP. Titik akhir ini menghubungkan database untuk mengambil data dan menyiapkan respons JSON.
Format JSON bervariasi berdasarkan jenis bagan yang akan dibuat. Ada fungsi JavaScript terpisah untuk membuat bagan dan menampilkan setiap bagan dinamis.
Gambar berikut menunjukkan struktur file dari contoh ini. Kode ini mengimpor pustaka JavaScript Chart.js dengan menggunakan URL CDN. Anda juga dapat menyimpannya di lokal dengan mengunduh sumbernya dari Github.
Kanvas HTML untuk membuat bagan
Untuk membuat bagan di web, kita membutuhkan kanvas HTML. Elemen kanvas ini adalah lapisan target untuk merender unit bagan.
Dalam tutorial sebelumnya, kita telah merender diagram batang sederhana menggunakan Chart.js ke dalam kanvas HTML5.
Kode berikut menampilkan elemen kanvas bagan untuk dirender menggunakan pustaka ini.
Kode HTML mengimpor URL CDN dari library chart.js. Ini juga mencakup graph.js JavaScript khusus untuk meminta inisialisasi untuk membuat grafik.
index.php
<!DOCTYPE html>
<html>
<head>
<title>Creating Dynamic Data Graph using PHP and Chart.js</title>
<style type="text/css">
.chart-container {
display: inline-block;
width: 40%;
}
.pie-chart {
margin: 40px 20px;
}
</style>
<script type="text/javascript" src="https://phppot.com/php/how-to-create-dynamic-stacked-bar-doughnut-and-pie-charts-in-php-with-chart-js/vendor/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
</head>
<body>
<div class="chart-container">
<canvas id="bar-chart"></canvas>
</div>
<div class="chart-container pie-chart">
<canvas id="pie-chart"></canvas>
</div>
<div class="chart-container pie-chart">
<canvas id="doughnut-chart"></canvas>
</div>
<div class="chart-container">
<canvas id="stacked-vertical-chart"></canvas>
</div>
<script src="./assets/js/graph.js"></script>
<script>
$(document).ready(function () {
showBarChart();
showPieChart();
showDoughnutChart();
showStackedVerticalChart();
});
</script>
</body>
</html>Inisialisasi Chart.js dan muat data ke dalam grafik dinamis
JavaScript berikut berisi empat fungsi terpisah. Ini menciptakan grafik batang, donat, pai, dan kolom bertumpuk.
Setiap fungsi meminta titik akhir PHP untuk mendapatkan data grafik dinamis.
Ia menggunakan metode posting jQuery untuk memanggil file PHP dari JavaScript. Dalam tutorial sebelumnya, kita telah melihat bagaimana menggunakan metode load jQuery untuk merender HTML secara dinamis
URL titik akhir menyertakan jenis bagan dalam string kuerinya. Berdasarkan param ini, data respons akan bervariasi.
Skrip ini memuat data respons dinamis ke dalam bagan. Legenda dan label bagan juga dinamis dari database yang diambil menggunakan PHP.
assets/js/graph.js
function showBarChart() {
{
$.post("ajax-endpoint/get-chart-data.php?chart_type=bar",
function(data) {
console.log(data);
var name = [];
var marks = [];
for (var i in data) {
name.push(data[i].student_name);
marks.push(data[i].marks);
}
var chartdata = {
labels: name,
datasets: [
{
label: 'Student Marks',
backgroundColor: '#49e2ff',
borderColor: '#46d5f1',
hoverBackgroundColor: '#CCCCCC',
hoverBorderColor: '#666666',
data: marks
}
]
};
var graphTarget = $("#bar-chart");
var graph = new Chart(graphTarget, {
type: 'bar',
data: chartdata
});
});
}
}
function showPieChart() {
{
$.post("ajax-endpoint/get-chart-data.php?chart_type=pie",
function(data) {
var name = [];
var marks = [];
var bgColor = [];
for (var i in data) {
name.push(data[i].label);
marks.push(data[i].data);
bgColor.push(data[i].backgroundColor);
}
var chartdata = {
labels: name,
datasets: [
{
label: 'Student Marks',
backgroundColor: bgColor,
data: marks
}
]
};
var graphTarget = $("#pie-chart");
var graph = new Chart(graphTarget, {
type: 'pie',
data: chartdata
});
});
}
}
function showDoughnutChart() {
{
Chart.pluginService.register({
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height + 35,
ctx = chart.chart.ctx;
ctx.save();
ctx.font = "bold 1.5em sans-serif";
ctx.textBaseline = "middle";
var text = "100",
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillStyle="rgba(0, 0, 0, 1)";
ctx.fillText(text, textX, textY);
ctx.restore();
}
});
$.post("ajax-endpoint/get-chart-data.php?chart_type=doughnut",
function(data) {
var name = [];
var marks = [];
var bgColor = [];
for (var i in data) {
name.push(data[i].label);
marks.push(data[i].data);
bgColor.push(data[i].backgroundColor);
}
var chartdata = {
labels: name,
datasets: [
{
label: 'Student Marks',
backgroundColor: bgColor,
data: marks
}
]
};
var graphTarget = $("#doughnut-chart");
var graph = new Chart(graphTarget, {
type: 'doughnut',
data: chartdata,
options: {
}
});
});
}
}
function showStackedVerticalChart() {
{
$.post("ajax-endpoint/get-chart-data.php?chart_type=vertical-bar",
function(data) {
var chartdata = {
labels: ['Marks'],
datasets: data
};
var graphTarget = $("#stacked-vertical-chart");
var graph = new Chart(graphTarget, {
type: 'bar',
data: chartdata,
options: {
scales: {
xAxes: [{
barPercentage: 0.3,
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
});
});
}
}
Buat Model PHP, Util untuk menyiapkan data grafik
Saat kami membuat bagan di PHP dengan data dinamis, itu tergantung pada model atau penangan layanan di sisi server.
Model menyiapkan format data dinamis dari sumber eksternal seperti file atau database.
Dalam model ini, handler membaca data grafik dari database. Itu chart.tbl_marks tabel memetakan data identitas siswa dengan tanda satu-satu.
lib/Student.php
<?php
namespace Phppot;
class Student
{
private $dbConn;
public function __construct()
{
require_once __DIR__ . '/DataSource.php';
$this->dbConn = new DataSource();
}
function getStudentMark()
{
$query = "SELECT student_id,student_name,marks FROM tbl_marks ORDER BY student_id";
$result = $this->dbConn->select($query);
return $result;
}
}Dan, ia memiliki kelas utils untuk secara dinamis memasok warna latar belakang ke bagan.
Kelas Util menghasilkan kode warna acak ke irisan bagan dan batang bertumpuk.
Saat kita melihat cara membuat bagan menggunakan Google Charts, ia memiliki susunan warna tetap yang disediakan untuk irisan bagan.
Layanan Google Charts juga memberikan hasil yang sangat baik untuk menampilkan grafik statistik.
lib/Util.php
<?php
namespace Phppot;
class Util
{
function getRGBRandom()
{
$rgbRandom = str_pad(dechex(mt_rand(0, 255)), 2, '0', STR_PAD_LEFT);
return $rgbRandom;
}
function getRandomColor()
{
$randomColor = "#";
for ($i = 0; $i < 3; $i ++) {
$randomColor .= $this->getRGBRandom();
}
return $randomColor;
}
}Skrip basis data
Script database ini menunjukkan pernyataan untuk membuat struktur tabel. Ini juga memiliki data sampel untuk dimuat ke dalam proses inisialisasi bagan. Unduh kode dan impor skrip untuk menjalankan contoh bagan ini.
Pada artikel sebelumnya, kami telah membuat database untuk menyimpan data kehadiran. Dengan demikian, ia membuat grafik menggunakan grafik Google.
-- -- Database: `chart` -- -- -------------------------------------------------------- -- -- Table structure for table `tbl_marks` -- CREATE TABLE `tbl_marks` ( `student_id` int(10) UNSIGNED NOT NULL, `student_name` varchar(35) NOT NULL, `marks` int(11) DEFAULT 0 ) ENGINE=InnoDB DEFAULT CHARSET=utf8; -- -- Dumping data for table `tbl_marks` -- INSERT INTO `tbl_marks` (`student_id`, `student_name`, `marks`) VALUES (1, 'Matthew', 39), (2, 'Hannah', 46), (3, 'Merlin', 65), (4, 'Jelin', 90), (5, 'Hilda', 75); -- -- Indexes for dumped tables -- -- -- Indexes for table `tbl_marks` -- ALTER TABLE `tbl_marks` ADD PRIMARY KEY (`student_id`); -- -- AUTO_INCREMENT for dumped tables ---- -- AUTO_INCREMENT for table `tbl_marks` -- ALTER TABLE `tbl_marks` MODIFY `student_id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
Output untuk grafik dinamis
Tangkapan layar ini menunjukkan format data dinamis yang dibuat di sisi server. Jendela inspeksi browser menunjukkan titik akhir PHP yang diminta. Dengan memilih URL titik akhir, itu menunjukkan grafik JSON yang sesuai seperti di bawah ini.
Kesimpulan
Artikel ini menjelaskan cara membuat bagan di PHP dengan pustaka JavaScript Chart.js. Kode contoh memiliki blok dinamis terstruktur dan logika backend.
Kami telah menampilkan statistik tanda dalam bentuk diagram lingkaran, diagram donat, dan diagram batang bertumpuk. Dalam bagan donat, ini menampilkan teks untuk menyatakan nilai yang menunjukkan nilai siswa.
Skrip inisialisasi grafik terpisah membuat proses rendering grafik lebih mudah. Ini berisi kode untuk memasok respons JSON ke dalam JavaScript untuk memplot metrik ke dalam UI bagan.
Dengan pemuatan data yang dinamis, kode ini dapat digunakan dalam aplikasi waktu nyata dengan mudah.
Unduh
Kembali ke Atas
Source link
