Hướng dẫn bar chart in php mysql source code - biểu đồ thanh trong mã nguồn mysql php

Biểu đồ thanh trong mã và hướng dẫn nguồn miễn phí của PHP và MySQL

Giới thiệu

Biểu đồ thanh là gì?

Biểu đồ thanh là một biểu diễn đồ họa của dữ liệu, thường ở dạng thanh có độ cao khác nhau. Dữ liệu có thể được hiển thị theo chiều ngang hoặc chiều dọc. Các thanh có thể là rắn hoặc bóng mờ. Mục đích của biểu đồ thanh là so sánh dữ liệu giữa các loại khác nhau.

Khi nói đến dữ liệu, có hai định dạng chính: đồ họa và bảng. Mỗi người có những điểm mạnh và điểm yếu riêng, và điều quan trọng là phải hiểu sự khác biệt giữa chúng để bạn có thể chọn định dạng phù hợp nhất cho dữ liệu của mình.

Dữ liệu dạng bảng là loại dữ liệu phổ biến nhất. Nó dễ đọc và hiểu, và nó có thể dễ dàng sắp xếp và lọc. Tuy nhiên, dữ liệu dạng bảng ít trực quan hơn dữ liệu đồ họa, điều này có thể gây khó hiểu.

Dữ liệu đồ họa hấp dẫn trực quan hơn dữ liệu bảng. Nó có thể có nhiều thông tin hơn bởi vì nó cho thấy mối quan hệ giữa các biến theo cách mà dễ hiểu.

Mục tiêu

Đến cuối hướng dẫn này, bạn sẽ có thể:

1. Tạo tập lệnh PHP kết nối với cơ sở dữ liệu MySQL để tạo biểu đồ thanh động.
2. Sử dụng biểu đồ.js để tạo biểu đồ thanh
3. Để tích hợp và áp dụng mã nguồn trong các dự án của bạn

Mã nguồn có liên quan

Trong hướng dẫn này, chúng tôi sẽ học cách tạo biểu đồ thanh trong PHP và MySQL. Chúng tôi sẽ sử dụng thư viện biểu đồ.js để tạo biểu đồ.

Sau đây là các yêu cầu cho hướng dẫn này:

• XAMPP
• Trình chỉnh sửa văn bản (mã vs, cao siêu, dấu ngoặc), tải xuống và cài đặt trình chỉnh sửa văn bản mà bạn chọn

Dòng 1-14-Đây là tập lệnh PHP sẽ kết nối với cơ sở dữ liệu của chúng tôi và chọn bảng cho chúng tôi để tạo biểu đồ thanh động.– this is the PHP script that will connect to our database and select the table for us to create a dynamic bar graph.

Tên của cơ sở dữ liệu của chúng tôi là bán hàng và nó có một bảng có tên TBLSALES. Nếu bạn đang sử dụng XAMPP, xin đừng quên kiểm tra xem Apache và MySQL có đang chạy không.

<?php
$con = mysqli_connect("localhost","root","","sales");
if(!$con){
echo "Problem in database connection..." .mysqli_error();
}else{
$sql = "SELECT * FROM tblsales";
$result = mysqli_query($con,$sql);
$chart_data = "";
while($row = mysqli_fetch_array($result)){
$productname[] = $row['product'];
$sales[] = $row['totalsales'];
}
}
?>

Tạo bảng SQL

-- Table structure for table `tblsales`
--

CREATE TABLE `tblsales` (
`id` int(11) NOT NULL,
`product` varchar(100) NOT NULL,
`totalsales` double NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `tblsales`
--

INSERT INTO `tblsales` (`id`, `product`, `totalsales`) VALUES
(1, 'product 1', 167),
(2, 'product 2', 178),
(3, 'product 3', 198);

Chart.js

- Bao gồm dòng này để sử dụng chức năng của thư viện. – include this line to use the functionality of the library.

Biểu đồ.js là một thư viện JavaScript miễn phí, nguồn mở để trực quan hóa dữ liệu, hỗ trợ tám loại biểu đồ: thanh, dòng, khu vực, pie, bong bóng, radar, polar và phân tán.

Mã bên dưới là mã mẫu về cách tạo biểu đồ thanh bằng biểu đồ.js. Vui lòng tham khảo tài liệu chính thức của thư viện biểu đồ.js

<script type="text/javascript">
var ctx = document.getElementById("chartjs_bar").getContext('2d');
var myChart = new Chart(ctx,{
type: 'bar',
data: {
labels:<?php echo json_encode($productname); ?>,
datasets: [{
backgroundcolor: [
"#ffd322",
"#5945fd",
"#25d5f2",
"#2ec551",
"#ff344e",
],
data: <?php echo json_encode($sales);?>
}]
},
options:{
legend: {
display:true,
position:'bottom',
labels: {
fontColor: '#71748d',
fontFamily: 'Circular Std Book',
fontSize: 14,
}
},
}
});
</script>

Video Demo

Tải xuống mã nguồn miễn phí

Tải xuống miễn phí Hướng dẫn PDF

Bản tóm tắt

Biểu đồ thanh rất hữu ích vì chúng cho phép bạn so sánh các bộ dữ liệu khác nhau. Chúng có thể được sử dụng để so sánh kích thước của hai hoặc nhiều bộ dữ liệu, tỷ lệ của chúng hoặc thay đổi kích thước của hai hoặc nhiều bộ dữ liệu theo thời gian. Hơn nữa, đồ thị thanh rất đơn giản để hiểu và có thể được sử dụng để truyền tải thông tin nhanh chóng và hiệu quả.

Trong bài viết này, bạn có thể tải xuống mã nguồn và cũng như cơ sở dữ liệu được sử dụng để tạo biểu đồ thanh. Để biết tham khảo đầy đủ, vui lòng xem bản trình bày video về cách tạo biểu đồ thanh trong PHP, MySQL và Biểu đồ.js

Chúng tôi hy vọng bạn tìm thấy hướng dẫn này là hữu ích! Chúc bạn những điều may mắn nhất với các dự án của bạn! Mã hóa hạnh phúc!

Bạn có thể truy cập trang & NBSP của chúng tôi để biết thêm thông tin, yêu cầu và nhận xét. Vui lòng đăng ký kênh YouTube của chúng tôi để nhận & NBSP; Tài nguyên dự án Capstone miễn phí và hướng dẫn lập trình máy tính.

Thuê nhóm của chúng tôi để làm dự án.

Các chủ đề và bài viết liên quan:

Cách tạo mật khẩu ngẫu nhiên trong mã nguồn và hướng dẫn nguồn miễn phí PHP

Xác thực email trong mã nguồn và hướng dẫn nguồn miễn phí PHP

Hệ thống thông tin quản lý văn phòng luật trong Bootstrap và Php Script

Trình tạo mã QR trong mã nguồn và hướng dẫn nguồn miễn phí PHP

Hệ thống trợ lý quản lý trang trại dựa trên đám mây Mã nguồn bootstrap miễn phí

Làm cách nào để tạo biểu đồ thanh trong PHP?