Ví dụ biểu đồ thanh php

Question

Bài viết này đề cập đến một trong những chủ đề nâng cao đó là cách phát triển khai thác dữ liệu Mysql với Biểu đồ Morris. js to create biểu tượng bằng cách sử dụng PHP Script

Nội dung chính Show

Tạo cơ sở dữ liệu
Constructor directory
Giới thiệu
Tạo cơ sở dữ liệu
Constructor directory
Kết luận

Chúng tôi đã biết hầu hết dữ liệu trong bất kỳ ứng dụng dựa trên web nào đều xuất phát từ nguồn cơ sở dữ liệu và dựa trên dữ liệu mà chúng tôi muốn yêu cầu hiển thị dữ liệu đó ở định dạng biểu đồ hoặc biểu đồ . Vì vậy, hiển thị cơ sở dữ liệu dưới dạng biểu đồ hoặc trực quan hóa biểu đồ trên trang web là vấn đề đau đầu của hầu hết các thành viên lập trình và nhiệm vụ này cần phải mất các bước để hiển thị dữ liệu

Nhưng sau khi đến với các biểu đồ của Morris. js, nó làm cho công việc này nhanh hơn trước đây mà chúng tôi đã thực hiện để tạo biểu đồ từ dữ liệu. Chúng tôi chỉ thực hiện truy vấn Mysql đơn giản và thực hiện truy vấn cũng như chuyển kết quả truy vấn vào biểu đồ javascript và sau đó, nó sẽ tạo ra biểu đồ theo yêu cầu của chúng tôi. Thư viện Charts của Morris. js là thư viện được chúng tôi yêu thích nhất để hiển thị dữ liệu ở định dạng biểu đồ trên trang web

Trong bài viết này, trước hết chúng tôi sẽ thực hiện truy vấn đơn giản và tạo dữ liệu cho biểu đồ Morris. js, dựa trên dữ liệu đó, chúng tôi sẽ tạo biểu đồ đường, biểu đồ khu vực, biểu đồ thanh và biểu đồ thanh với tùy chọn xếp hạng chồng. Để tạo biểu đồ này, chúng tôi đã lấy dữ liệu của dữ liệu lợi nhuận, mua và bán trong 10 năm qua từ bảng Mysql

Trước tiên, chúng tôi đã tải xuống liên kết thư viện CDN cần thiết để sử dụng biểu đồ Morris. js với PHP và Mysql

Sau khi xác định liên kết thư viện CDN cần thiết, chúng tôi đã tạo thẻ và chúng tôi sẽ hiển thị biểu đồ bên dưới thẻ này

Để tìm dữ liệu từ bảng, chúng tôi đã viết mã php để tìm tải dữ liệu từ bảng Mysql và sắp xếp chúng theo dữ liệu có định dạng được cho phép trong thư viện javascript của biểu đồ

Sau khi tìm tải dữ liệu từ bảng Mysql, bây giờ chúng ta đã viết mã javscript để tải thư viện biểu đồ Morris. js cho các biểu đồ khác nhau như biểu đồ đường, biểu đồ vùng, biểu đồ thanh và biểu đồ thanh với tùy chọn xếp chồng

Hiện nay các trang web quản lý ngày càng trở nên phong phú và đa dạng nên việc sử dụng thống kê quản lý và báo cáo là điều khá phổ biến. Để việc thống kê dữ liệu trở nên trực quan hơn thì biểu tượng là một trong những công cụ hỗ trợ tuyệt vời. Biểu đồ là gì?

Biểu đồ là hình vẽ biểu diễn các số liệu, thường được sử dụng để so sánh nhận ra sự khác biệt và biết tỷ lệ cụ thể của từng thành phần so với tổng thể

Ưu điểm của công việc biểu diễn dữ liệu bằng biểu đồ là giúp dễ dàng so sánh dữ liệu được đưa ra dự đoán xu thế tăng giảm của các số liệu

Có rất nhiều loại biểu đồ khác nhau và việc vẽ các biểu đồ này trên trang web rất dễ dàng bởi vì hiện tại đã có rất nhiều thư viện hỗ trợ như



    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "student_chart";
    $conn = new PDO("mysql:host=$servername;dbname=$dbname;", $username, $password);
    if(!$conn){
        die("Connect database failed");
    }
?>

0,



    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "student_chart";
    $conn = new PDO("mysql:host=$servername;dbname=$dbname;", $username, $password);
    if(!$conn){
        die("Connect database failed");
    }
?>

1,



    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "student_chart";
    $conn = new PDO("mysql:host=$servername;dbname=$dbname;", $username, $password);
    if(!$conn){
        die("Connect database failed");
    }
?>

2

ChartJS là gì? . js là một thư viện mã nguồn mở hỗ trợ các loại biểu đồ. thanh, đường, khu vực, bánh (bánh rán), radar, vùng cực. ChartJS mặc định là responsive, giúp công việc hoạt động trên đa nền tảng tốt hơn. Chắc chắn ChartJS là một trong những thư viện mã nguồn mở về biểu đồ ấn tượng nhất trong thời gian gần đây

Bài viết này mình sẽ sử dụng ChartJS kết hợp với PHP, MySQL để biểu diễn đồ thị một cách đơn giản nhất, từ đó bạn có thể tự tùy chỉnh thêm để biểu đồ của mình trở nên phù hợp và đẹp hơn

Tạo cơ sở dữ liệu

Đầu tiên ta cần tạo một cơ sở dữ liệu để chứa các thông tin cần tạo biểu tượng

CREATE DATABASE student_chart;

CREATE TABLE student_chart.graph ( 
    user_id INT NOT NULL AUTO_INCREMENT, 
    name VARCHAR(20) NOT NULL , 
    major VARCHAR(40) NOT NULL , 
    status VARCHAR(20) NOT NULL , 
    PRIMARY KEY (user_id)
) ENGINE = InnoDB;


INSERT INTO graph(name, major, status) VALUES ("Hòa","An toàn thông tin","Đồng ý");
INSERT INTO graph(name, major, status) VALUES ("Huy","Công nghệ thông tin","Từ chối");
INSERT INTO graph(name, major, status) VALUES ("Hùng","Điện tử viễn thông","Đang chờ");
INSERT INTO graph(name, major, status) VALUES ("Hải","Điện tử viễn thông","Đồng ý");
INSERT INTO graph(name, major, status) VALUES ("Nam","Công nghệ thông tin","Đang chờ");
INSERT INTO graph(name, major, status) VALUES ("Đông","Điện tử viễn thông","Đang chờ");

Constructor directory

Vũ Tiến Hòa @vu. tiền. hoa

Theo dõi

595 22 16

Đã đăng vào ngày 16 tháng 7 năm 2020 4. 50 SA 4 phút đọc

5. 2k

0

1

Vẽ biểu tượng với PHP và Biểu đồ. js

Report
Add to series of me

Bài đăng này đã không được cập nhật trong 2 năm

Giới thiệu

Hiện nay các trang web quản lý ngày càng trở nên phong phú và đa dạng nên việc sử dụng thống kê quản lý và báo cáo là điều khá phổ biến. Để việc thống kê dữ liệu trở nên trực quan hơn thì biểu tượng là một trong những công cụ hỗ trợ tuyệt vời. Biểu đồ là gì?

Biểu đồ là hình vẽ biểu diễn các số liệu, thường được sử dụng để so sánh nhận ra sự khác biệt và biết tỷ lệ cụ thể của từng thành phần so với tổng thể

Ưu điểm của công việc biểu diễn dữ liệu bằng biểu đồ là giúp dễ dàng so sánh dữ liệu được đưa ra dự đoán xu thế tăng giảm của các số liệu

Có rất nhiều loại biểu đồ khác nhau và việc vẽ các biểu đồ này trên trang web rất dễ dàng bởi vì hiện tại đã có rất nhiều thư viện hỗ trợ như



    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "student_chart";
    $conn = new PDO("mysql:host=$servername;dbname=$dbname;", $username, $password);
    if(!$conn){
        die("Connect database failed");
    }
?>

0,



    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "student_chart";
    $conn = new PDO("mysql:host=$servername;dbname=$dbname;", $username, $password);
    if(!$conn){
        die("Connect database failed");
    }
?>

1,



    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "student_chart";
    $conn = new PDO("mysql:host=$servername;dbname=$dbname;", $username, $password);
    if(!$conn){
        die("Connect database failed");
    }
?>

2

ChartJS là gì? . js là một thư viện mã nguồn mở hỗ trợ các loại biểu đồ. thanh, đường, khu vực, bánh (bánh rán), radar, vùng cực. ChartJS mặc định là responsive, giúp công việc hoạt động trên đa nền tảng tốt hơn. Chắc chắn ChartJS là một trong những thư viện mã nguồn mở về biểu đồ ấn tượng nhất trong thời gian gần đây

Bài viết này mình sẽ sử dụng ChartJS kết hợp với PHP, MySQL để biểu diễn đồ thị một cách đơn giản nhất, từ đó bạn có thể tự tùy chỉnh thêm để biểu đồ của mình trở nên phù hợp và đẹp hơn

Tạo cơ sở dữ liệu

Đầu tiên ta cần tạo một cơ sở dữ liệu để chứa các thông tin cần tạo biểu tượng

CREATE DATABASE student_chart;

CREATE TABLE student_chart.graph ( 
    user_id INT NOT NULL AUTO_INCREMENT, 
    name VARCHAR(20) NOT NULL , 
    major VARCHAR(40) NOT NULL , 
    status VARCHAR(20) NOT NULL , 
    PRIMARY KEY (user_id)
) ENGINE = InnoDB;


INSERT INTO graph(name, major, status) VALUES ("Hòa","An toàn thông tin","Đồng ý");
INSERT INTO graph(name, major, status) VALUES ("Huy","Công nghệ thông tin","Từ chối");
INSERT INTO graph(name, major, status) VALUES ("Hùng","Điện tử viễn thông","Đang chờ");
INSERT INTO graph(name, major, status) VALUES ("Hải","Điện tử viễn thông","Đồng ý");
INSERT INTO graph(name, major, status) VALUES ("Nam","Công nghệ thông tin","Đang chờ");
INSERT INTO graph(name, major, status) VALUES ("Đông","Điện tử viễn thông","Đang chờ");

Constructor directory

Sẽ có một thư mục gốc bao gồm các tập tin như dữ liệu. php to get data from server, database. php to connect to database, file index. php để biểu diễn dữ liệu dưới dạng biểu đồ và thư mục js không có thư viện như jquery và Chart. js

1. cơ sở dữ liệu. php

Tiếp theo cần một tệp để kết nối với cơ sở dữ liệu MySQL



    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "student_chart";
    $conn = new PDO("mysql:host=$servername;dbname=$dbname;", $username, $password);
    if(!$conn){
        die("Connect database failed");
    }
?>

2. dữ liệu. php

dữ liệu tệp. php sẽ truy vấn bảng và xuất dữ liệu được trích xuất từ cơ sở dữ liệu MySQL và mã hóa dưới dạng json

2

Để kiểm tra kết quả các bạn có thể truy cập vào đường dẫn đến tập tin ví dụ. http. // localhost/đồ thị/dữ liệu. php

3. mục lục. php

3

Trong đó ta sử dụng hàm post lên file data. php đã xử lý trước đó để lấy dữ liệu được trả về dưới dạng JSON. Sau khi nhận dữ liệu được trả về sẽ tiến hành gán vào từng nhãn và dữ liệu cho từng nhãn đó

Khi gán dữ liệu xong, ta có thể tiến hành tùy chỉnh màu sắc cho biểu đồ bằng cách đặt



    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "student_chart";
    $conn = new PDO("mysql:host=$servername;dbname=$dbname;", $username, $password);
    if(!$conn){
        die("Connect database failed");
    }
?>

3 và



    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "student_chart";
    $conn = new PDO("mysql:host=$servername;dbname=$dbname;", $username, $password);
    if(!$conn){
        die("Connect database failed");
    }
?>

4 tùy theo ý muốn của bạn



    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "student_chart";
    $conn = new PDO("mysql:host=$servername;dbname=$dbname;", $username, $password);
    if(!$conn){
        die("Connect database failed");
    }
?>

5 Là ID của thẻ nơi bạn muốn hiển thị biểu đồ của mình

Sau khi hoàn thành các bước trên hành động tiền của bạn, hãy tạo một Biểu đồ với kiểu biểu tượng bạn muốn. Trong đó Biểu đồ. js hỗ trợ rất nhiều loại biểu tượng như đồ thị

hàng
quán ba
ra-đa
...

Hoặc có thể vẽ biểu đồ cột như sau

7

Kết luận

Bài viết trên là một ví dụ đơn giản về ChartJS hy vọng nó sẽ giúp bạn trong bước đầu tìm hiểu về biểu đồ trên trang web

Để tìm hiểu thêm các bạn có thể tham khảo tại Chart. js hoặc một số tài liệu khác để tùy chỉnh biểu đồ cho đẹp hơn

programming php

Ví dụ biểu đồ thanh php

Tạo cơ sở dữ liệu

Constructor directory

Giới thiệu

Tạo cơ sở dữ liệu

Constructor directory

1. cơ sở dữ liệu. php

2. dữ liệu. php

3. mục lục. php

Hoặc có thể vẽ biểu đồ cột như sau

Kết luận

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội