Nếu bạn cần cấu hình dữ liệu thống kê, thì Biểu đồ là một trong những cách tiếp cận tốt để hiển thị dữ liệu dưới dạng ảnh rút gọn. Với sự trợ giúp của biểu đồ hoặc biểu đồ, chúng ta có thể dễ dàng hiểu dữ liệu. Nếu bạn tìm kiếm trên internet thì có các thư viện biểu đồ khác nhau như Google Chart, Highcharts, morris. js, icon. js and more than nữa
Nội dung chính Hiển thị
- Biểu đồ Canvas HTML 5
- Lệnh PHP để tìm tải dữ liệu thăm dò ý kiến từ cơ sở dữ liệu Mysql
- Làm cách nào để tạo biểu đồ trong PHP và MySQL?
- Làm cách nào để sử dụng biểu tượng js với PHP?
- Chart JS có dễ học không?
- Làm cách nào để tạo biểu tượng và biểu tượng đồ trong PHP?
Trong một số hướng dẫn trước, chúng tôi đã xuất bản hướng dẫn về cách sử dụng thư viện Google Chart và morris. thư viện js. Bây giờ theo hướng dẫn này, chúng ta sẽ tạo biểu đồ hình tròn, bánh rán và biểu đồ thanh động trong PHP bằng Dữ liệu động bằng Biểu đồ. thư viện js và Ajax. Chúng tôi sẽ tạo biểu đồ trực tiếp nghĩa là khi dữ liệu thay đổi biểu đồ sẽ tự động thay đổi mà không cần phải làm trang web mới
Tại đây, bạn có thể tìm thấy giải pháp tạo biểu tượng bằng biểu đồ. js một cách rất dễ dàng. Trong hướng dẫn này, chúng tôi sẽ tạo biểu đồ hoặc đồ thị bằng cách sử dụng truy xuất dữ liệu từ cơ sở dữ liệu và tải lên biểu đồ. Tại đây, chúng tôi sẽ tạo một ứng dụng Thăm dò ý kiến đơn giản và dữ liệu thăm dò sẽ hiển thị thông qua biểu đồ hình tròn hoặc biểu tượng bánh rán hoặc biểu đồ thanh và dữ liệu thăm dò này sẽ được tìm thấy tải . Dưới đây, bạn có thể tìm thấy màn hình rút gọn trong đó biểu đồ hình tròn dữ liệu, biểu tượng kính khuyên và biểu tượng thanh đã được tạo bằng cách sử dụng biểu tượng đồ. thư viện js
Xem diễn đàn phiên bản
Tải xuống mã nguồn
Biểu đồ Canvas HTML 5
Đầu tiên, chúng ta cần tải thư viện chartjs từ Github hoặc đặt trực tiếp liên kết cdn trực tuyến ở tiêu đề của trang web. Sau điều này trong trang đích HTML này, trước tiên chúng ta phải tạo một câu hỏi Thăm dò ý kiến với ba tùy chọn và một nút gửi bằng cách sử dụng Mã HTML
Sau this to make Chart. js, ở đây chúng ta phải tạo canvas ba trường. Sau khi tạo canvas trường, chúng tôi cần gửi yêu cầu Ajax tới tệp lệnh PHP để tìm tải Dò tìm từ cơ sở dữ liệu. Vì vậy, yêu cầu ajax này sẽ nhận được dữ liệu ở định dạng JSON và dữ liệu đó sẽ được phân tích cú pháp và cung cấp dưới dạng tham số vào Char. js để tạo các loại biểu tượng khác nhau như biểu tượng hình tròn, biểu tượng bánh rán và biểu tượng thanh. Dưới đây bạn có thể tìm thấy mã nguồn của chỉ mục. php file
chỉ mục. php
How to Create Dynamic Chart in PHP using Chart.js
How to Create Dynamic Chart in PHP using Chart.js
Sample Survey
Which is Popular Programming Language in 2021?
PHP
Node.js
Python
Submit
Pie Chart
Doughnut Chart
Bar Chart
$[document].ready[function[]{
$['#submit_data'].click[function[]{
var language = $['input[name=programming_language]:checked'].val[];
$.ajax[{
url:"data.php",
method:"POST",
data:{action:'insert', language:language},
beforeSend:function[]
{
$['#submit_data'].attr['disabled', 'disabled'];
},
success:function[data]
{
$['#submit_data'].attr['disabled', false];
$['#programming_language_1'].prop['checked', 'checked'];
$['#programming_language_2'].prop['checked', false];
$['#programming_language_3'].prop['checked', false];
alert["Your Feedback has been send..."];
makechart[];
}
}]
}];
makechart[];
function makechart[]
{
$.ajax[{
url:"data.php",
method:"POST",
data:{action:'fetch'},
dataType:"JSON",
success:function[data]
{
var language = [];
var total = [];
var color = [];
for[var count = 0; count < data.length; count++]
{
language.push[data[count].language];
total.push[data[count].total];
color.push[data[count].color];
}
var chart_data = {
labels:language,
datasets:[
{
label:'Vote',
backgroundColor:color,
color:'#fff',
data:total
}
]
};
var options = {
responsive:true,
scales:{
yAxes:[{
ticks:{
min:0
}
}]
}
};
var group_chart1 = $['#pie_chart'];
var graph1 = new Chart[group_chart1, {
type:"pie",
data:chart_data
}];
var group_chart2 = $['#doughnut_chart'];
var graph2 = new Chart[group_chart2, {
type:"doughnut",
data:chart_data
}];
var group_chart3 = $['#bar_chart'];
var graph3 = new Chart[group_chart3, {
type:'bar',
data:chart_data,
options:options
}];
}
}]
}
}];
Tập lệnh PHP để tìm tải dữ liệu thăm dò ý kiến từ cơ sở dữ liệu Mysql
Trong hướng dẫn này, chúng tôi có tệp php với tên dữ liệu. php. Tệp này sẽ thực thi thông qua yêu cầu AJAX để tìm tải dữ liệu Thăm dò từ cơ sở dữ liệu và sau khi tìm tải dữ liệu, nó sẽ trả về dữ liệu cho yêu cầu AJAX ở định dạng JSON. Dưới đây bạn có thể tìm thấy nguồn dữ liệu. php file
Data. php
Nếu bạn muốn có được nguồn hoàn chỉnh với. sql, vì vậy vui lòng viết địa chỉ email của bạn vào hộp nhận xét. Chúng tôi sẽ gửi cho bạn tệp mã nguồn đã chỉnh sửa tại địa chỉ email đã xác định của bạn
Làm cách nào để tạo biểu đồ trong PHP và MySQL?
Bước thứ hai chỉ cần vẽ biểu đồ theo cách bạn đã quen. .
Create PHP file command. Bước đầu tiên là tạo một PHP file.
Khai báo các biến cơ sở dữ liệu MySQL.
Connected to the database.
Thực hiện truy vấn.
Create data from query.
Data metas to JSON format.
Đóng kết nối.
Vẽ biểu tượng
Làm cách nào để sử dụng biểu tượng js với PHP?
Tải xuống thư viện Chartjs từ GitHub và bao gồm các tệp thư viện trong ví dụ của bạn. Trong trang HTML đích, tôi có một phần tử canvas HTML5 để vẽ biểu đồ đầu ra. Khi tải trang đích, tôi gửi yêu cầu AJAX tới PHP để đọc điểm của sinh viên từ cơ sở dữ liệu