Biểu đồ thanh xếp chồng lên nhau php

Trực quan hóa và biểu đồ cho phép người dùng xử lý dữ liệu và thống kê dễ dàng hơn. Bạn đang tìm cách trình bày số liệu thống kê phức tạp trong ứng dụng của mình?

Ngay từ việc trình bày trong các kỳ thi ở trường cho đến các số liệu thống kê phức tạp cao trong phần mềm, biểu đồ và đồ thị đều là ứng cử viên hàng đầu để trở thành người chiến thắng

Tôi đã khai thác nó nhiều lần trong các kỳ thi của mình để đạt điểm cao ;-] Tuy nhiên, nó vẫn hiệu quả với tôi khi tôi trình bày số liệu thống kê cho khách hàng của mình. Cứ liều thử đi. Luôn tìm kiếm cơ hội để trình bày dữ liệu dưới dạng biểu đồ

Có rất nhiều thư viện để tạo biểu đồ trong giao diện người dùng web. Đồ thị. js là một trong những tùy chọn mã nguồn mở để hiển thị biểu đồ HTML5

biểu đồ. thư viện js rất đơn giản để tích hợp vào ứng dụng. Nó cung cấp hướng dẫn dễ dàng để bắt đầu tạo biểu đồ

Bài viết này có một ví dụ để tạo biểu đồ thanh, bánh rán và hình tròn ở giao diện người dùng. Nó sử dụng một nguồn cơ sở dữ liệu để thiết lập tập dữ liệu biểu đồ. Trước đây, chúng ta đã thấy các ví dụ để so sánh dữ liệu với biểu đồ thanh được tạo bằng Hicharts

Bên trong có gì – Cách tạo biểu đồ trong PHP

Về ví dụ này

Ví dụ này sẽ giúp bạn tạo biểu đồ trong PHP. Nó đọc dữ liệu từ cơ sở dữ liệu và tải vào các biểu đồ động được tạo bằng Biểu đồ. js

Cơ sở dữ liệu có một bảng với các điểm sinh viên. Mã này là để tạo các loại biểu đồ khác nhau với điểm của sinh viên

Nó có Biểu đồ. js để tạo biểu đồ cột cơ bản, biểu đồ hình tròn và bánh rán cũng như biểu đồ thanh dọc xếp chồng lên nhau

Tập lệnh sử dụng phương thức đăng bài jQuery để yêu cầu dữ liệu động từ PHP. Điểm cuối này kết nối cơ sở dữ liệu để truy xuất dữ liệu và chuẩn bị phản hồi JSON

Định dạng JSON thay đổi dựa trên loại biểu đồ cần tạo. Có các hàm JavaScript riêng để tạo biểu đồ và hiển thị từng biểu đồ động

Hình ảnh sau đây cho thấy cấu trúc tệp của ví dụ này. Mã này nhập Biểu đồ. thư viện JavaScript js bằng cách sử dụng URL CDN. Bạn cũng có thể giữ nó ở chế độ cục bộ bằng cách tải xuống nguồn từ Github

Canvas HTML để tạo biểu đồ

Để tạo biểu đồ trên web, chúng ta cần một canvas HTML. Phần tử canvas này là một lớp mục tiêu để hiển thị đơn vị biểu đồ

Trong hướng dẫn trước, chúng ta đã kết xuất một biểu đồ thanh đơn giản bằng Biểu đồ. js vào canvas HTML5

Đoạn mã sau hiển thị các phần tử canvas của biểu đồ để hiển thị bằng thư viện này

Mã HTML nhập URL CDN của biểu đồ. thư viện js. Nó cũng bao gồm biểu đồ JavaScript tùy chỉnh. js để gọi khởi tạo để hiển thị biểu đồ

mục lục. php

Creating Dynamic Data Graph using PHP and Chart.js





	

		
	
	

		
	
	

		
	
	

		
	

  


	

	

Khởi tạo biểu đồ. js và tải dữ liệu vào biểu đồ động

JavaScript sau đây chứa bốn chức năng riêng biệt. Nó tạo biểu đồ thanh, bánh rán, bánh và cột xếp chồng lên nhau

Mỗi chức năng yêu cầu điểm cuối PHP để lấy dữ liệu biểu đồ động

Nó sử dụng phương thức bài đăng jQuery để gọi tệp PHP từ JavaScript. Trong hướng dẫn trước, chúng ta đã biết cách sử dụng phương thức tải jQuery để hiển thị HTML động

URL điểm cuối bao gồm loại biểu đồ trong chuỗi truy vấn của nó. Dựa trên thông số này, dữ liệu phản hồi sẽ thay đổi

Tập lệnh này tải dữ liệu phản hồi động vào biểu đồ. Chú thích và nhãn biểu đồ cũng động từ cơ sở dữ liệu được tìm nạp bằng PHP

tài sản/js/đồ thị. 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
					        }]
					    }
					}
				}];
			}];
	}
}

Tạo PHP Model, Utils để chuẩn bị dữ liệu biểu đồ

Khi chúng tôi tạo một biểu đồ trong PHP với dữ liệu động, nó phụ thuộc vào mô hình hoặc trình xử lý dịch vụ ở phía máy chủ

Mô hình chuẩn bị định dạng dữ liệu động từ nguồn bên ngoài như tệp hoặc cơ sở dữ liệu

Trong mô hình này, bộ xử lý đọc dữ liệu biểu đồ từ cơ sở dữ liệu. The chart. bảng tbl_marks ánh xạ dữ liệu nhận dạng sinh viên với các điểm một đối một

lib/Sinh viên. php

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;
    }
}

Và, nó có lớp utils để tự động cung cấp màu nền cho biểu đồ

Lớp Util tạo mã màu ngẫu nhiên cho các lát biểu đồ và các thanh xếp chồng lên nhau

Khi chúng tôi xem cách tạo biểu đồ bằng Google Charts, nó có một mảng màu cố định được cung cấp cho các lát biểu đồ

Dịch vụ Google Charts cũng cung cấp kết quả rất tốt để hiển thị biểu đồ thống kê

lib/Sử dụng. php

getRGBRandom[];
        }
        return $randomColor;
    }
}

Tập lệnh cơ sở dữ liệu

Tập lệnh cơ sở dữ liệu này hiển thị các câu lệnh để tạo cấu trúc bảng. Nó cũng có dữ liệu mẫu để tải vào quá trình khởi tạo biểu đồ. Tải xuống mã và nhập tập lệnh để chạy mẫu biểu đồ này

Trong bài viết trước, chúng ta đã tạo cơ sở dữ liệu để lưu dữ liệu chấm công. Qua đó, nó tạo ra các biểu đồ bằng biểu đồ của 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;

Đầu ra cho biểu đồ động

Ảnh chụp màn hình này hiển thị định dạng dữ liệu động được tạo ở phía máy chủ. Cửa sổ kiểm tra trình duyệt hiển thị điểm cuối PHP được yêu cầu. Bằng cách chọn URL điểm cuối, nó sẽ hiển thị biểu đồ JSON tương ứng như bên dưới

Phần kết luận

Bài viết này mô tả cách tạo biểu đồ trong PHP với thư viện JavaScript Chart. js. Mã ví dụ có các khối động có cấu trúc và logic phụ trợ

Chúng tôi đã hiển thị số liệu thống kê nhãn hiệu dưới dạng biểu đồ hình tròn, biểu đồ bánh rán và biểu đồ thanh xếp chồng lên nhau. Trong biểu đồ vành khuyên, nó hiển thị văn bản để nêu rõ điểm mà điểm của học sinh được hiển thị

Tập lệnh khởi tạo biểu đồ riêng biệt giúp quá trình hiển thị biểu đồ dễ dàng hơn. Nó chứa mã để cung cấp phản hồi JSON vào JavaScript để vẽ các chỉ số vào giao diện người dùng biểu đồ