110,
"Feb" => 130,
"Mar" => 215,
"Apr" => 81,
"May" => 310,
"Jun" => 110,
"Jul" => 190,
"Aug" => 175,
"Sep" => 390,
"Oct" => 286,
"Nov" => 150,
"Dec" => 196
];
$img_width=450;
$img_height=300;
$margins=20;
# ---- Find the size of graph by substracting the size of borders
$graph_width=$img_width - $margins * 2;
$graph_height=$img_height - $margins * 2;
$img=imagecreate[$img_width,$img_height];
$bar_width=20;
$total_bars=count[$values];
$gap= [$graph_width- $total_bars * $bar_width ] / [$total_bars +1];
# ------- Define Colors ----------------
$bar_color=imagecolorallocate[$img,0,64,128];
$background_color=imagecolorallocate[$img,240,240,255];
$border_color=imagecolorallocate[$img,200,200,200];
$line_color=imagecolorallocate[$img,220,220,220];
# ------ Create the border around the graph ------
imagefilledrectangle[$img,1,1,$img_width-2,$img_height-2,$border_color];
imagefilledrectangle[$img,$margins,$margins,$img_width-1-$margins,$img_height-1-$margins,$background_color];
# ------- Max value is required to adjust the scale -------
$max_value=max[$values];
$ratio= $graph_height/$max_value;
# -------- Create scale and draw horizontal lines --------
$horizontal_lines=20;
$horizontal_gap=$graph_height/$horizontal_lines;
for[$i=1;$i
Đồ thị có thể được tạo theo nhiều cách, từ thủ công đến sử dụng máy tính và các gói phần mềm vẽ đồ thị tinh vi. Bài viết này mô tả ngắn gọn về việc sử dụng PHP để vẽ đồ thị và đặc biệt là gói JpGraph
Có nhiều gói phần mềm giúp tạo đồ thị, biểu đồ bằng PHP. Một gói như vậy là JpGraph. Nó được phát hành theo giấy phép kép QPL 1. 0 [Giấy phép miễn phí Qt] cho mục đích sử dụng mã nguồn mở hoặc giáo dục và Giấy phép chuyên nghiệp JpGraph cho mục đích thương mại. Hãy cùng thảo luận về phiên bản mã nguồn mở của JpGraph trong bài viết này
Cài đặt
Gói có thể được tải xuống từ http. //jpđồ thị. mạng/tải xuống/. Hiện tại, có hai gói khác nhau cho PHP4 và PHP5. Chọn liên kết phù hợp. Bạn có thể giải nén các tệp ở bất kỳ đâu, tốt nhất là trong thư mục gốc của tài liệu [e. g. , /var/www]
Để sử dụng JpGraph, bạn cũng sẽ phải tải xuống thư viện gd cho PHP
- Quảng cáo -
sudo apt-get install php5-gd
Để kiểm tra xem thư viện đã được cài đặt đúng chưa, gõ lệnh sau
php5 -m
Bạn sẽ thấy gd trong danh sách. Xem Hình 1
Đó là nó. Bây giờ chúng ta có thể bắt đầu tạo biểu đồ
Tạo biểu đồ đường
Chúng ta hãy xem cách tạo một biểu đồ đường đơn giản. Xác định vị trí thư mục chứa jpgraph. php có thể được tìm thấy. Bao gồm tệp này trong mã của bạn
require_once[jpgraph/src/jpgraph.php];
Tiếp theo, để vẽ biểu đồ đường, bạn cần bao gồm jpgraph_line. tập tin php, như sau
require_once[jpgraph/src/jpgraph_line.php];
Bây giờ, để tạo một biểu đồ, hãy khởi tạo lớp Graph bằng cách lần lượt chuyển chiều rộng và chiều cao của nó
Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách tạo Biểu đồ trong PHP bằng Cơ sở dữ liệu MySQL. phpChart là một phân đoạn lập biểu đồ và phác thảo PHP tuyệt vời và đơn giản để sử dụng để hiển thị các biểu đồ Ajax HTML5 đáp ứng, trực quan và dựa trên thông tin
Ảnh chụp màn hình
Tạo cơ sở dữ liệu và cùng một dữ liệu
trong bước này, chúng ta sẽ tạo Cơ sở dữ liệu MySQL và dữ liệu mẫu để hiển thị trong biểu đồ
1-Tạo cơ sở dữ liệu
- Mở PHPMyAdmin trong Trình duyệt của bạn
- Nhấp vào Hiển thị tab cơ sở dữ liệu trên Topside
- Đặt tên Cơ sở dữ liệu là “đồ thị”
- Sau khi tạo cơ sở dữ liệu Mở nó
- Nhấp vào Tab SQL trên khu vực Trên cùng
- Sao chép mã nguồn bên dưới và dán nó
- Sau đó bấm vào Đi
-- phpMyAdmin SQL Dump -- version 4.8.4 -- //www.phpmyadmin.net/ -- -- Host: 127.0.0.1 -- Generation Time: Dec 26, 2018 at 08:39 PM -- Server version: 10.1.37-MariaDB -- PHP Version: 7.3.0 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET AUTOCOMMIT = 0; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `graph` -- -- -------------------------------------------------------- -- -- Table structure for table `tblsales` -- CREATE TABLE `tblsales` [ `SalesId` int[11] NOT NULL, `Product` varchar[90] NOT NULL, `TotalSales` double NOT NULL ] ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `tblsales` -- INSERT INTO `tblsales` [`SalesId`, `Product`, `TotalSales`] VALUES [1, 'Mouse', 5000], [2, 'Keyboard', 7000], [3, 'Desktop', 3000], [4, 'Mobile', 8030]; -- -- Indexes for dumped tables -- -- -- Indexes for table `tblsales` -- ALTER TABLE `tblsales` ADD PRIMARY KEY [`SalesId`]; -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tblsales` -- ALTER TABLE `tblsales` MODIFY `SalesId` int[11] NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
HOẶC Nhập tệp DB
Sau khi tải về giải nén mã nguồn trong thư mục gốc của bạn
- Mở PHPMyAdmin trong Trình duyệt của bạn
- Nhấp vào Hiển thị tab cơ sở dữ liệu ở phía trên
- Đặt tên Cơ sở dữ liệu là “ang-crud”
- Sau khi tạo cơ sở dữ liệu Mở nó
- Nhấp vào Nhập Tab trên khu vực Trên cùng
- Bạn có thể Tìm tệp Db trong Mã nguồn đã tải xuống Chọn nó
- Sau đó bấm vào Đi
2- Tạo kết nối cơ sở dữ liệu và tìm nạp dữ liệu từ cơ sở dữ liệu
Sau khi nhập Tệp cơ sở dữ liệu, bước tiếp theo là tạo kết nối cơ sở dữ liệu và tìm nạp dữ liệu từ Cơ sở dữ liệu MySQL bằng PHP, sao chép mã bên dưới và lưu dưới dạng “bản ghi. php”
3-Tạo trang chỉ mục
trong bước này, chúng ta sẽ tạo trang chỉ mục nơi tạo mã JavaScript để hiển thị dữ liệu cơ sở dữ liệu trong biểu đồ. đây là mã nguồn. và lưu nó dưới dạng chỉ mục. php
Graph
Product Sales Reports
var ctx = document.getElementById["chartjs_bar"].getContext['2d'];
var myChart = new Chart[ctx, {
type: 'bar',
data: {
labels:,
datasets: [{
backgroundColor: [
"#5969aa",
"#ff407b",
"#331523",
"#ffc750"
],
data:,
}]
},
options: {
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: '#71748d',
fontFamily: 'Circular Std Book',
fontSize: 14,
}
},
}
}];
Nếu bạn gặp phải bất kỳ loại vấn đề nào với mã nguồn này thì bạn có thể Tải xuống mã nguồn Toàn bộ ở định dạng zip bằng cách nhấp vào nút bên dưới Tải xuống ngay nếu không bạn có thể gửi Nhận xét