Trong hướng dẫn này, chúng tôi đang học cách vẽ biểu đồ thanh bằng cách sử dụng dữ liệu từ bảng MySQL và PHP.
Sử dụng tải xuống ChartJS 2.x
Ghi chú! Bạn có thể lấy mã của hướng dẫn này từ kho GitHub của tôi.
Yêu cầu
Chúng tôi sẽ cần các mục sau đây để hoàn thành hướng dẫn này.
- Trình chỉnh sửa văn bản như Sublimetext, TextMate, Coda, Notepad ++ hoặc IDE như Eclipse
- Trình duyệt web như Chrome hoặc Firefox
- Môi trường phát triển PHP trên Localhost của bạn. Đối với điều này, bạn có thể sử dụng XAMPP [người dùng Windows/Linux/OS X] hoặc MAMP [người dùng Windows/OS X]
- Mysql
- Biểu đồ
- jQuery
Vậy hãy bắt đầu...
Bảng MySQL
Đối với hướng dẫn này, chúng tôi sẽ xem xét một bảng điểm rất đơn giản có hai cột playerid và điểm số và 5 mục.playerid and score and 5 entries.
Bảng điểm
CREATE TABLE `score` [
`playerid` int[10] unsigned NOT NULL AUTO_INCREMENT,
`score` int[11] DEFAULT '0',
PRIMARY KEY [`playerid`]
] ENGINE=InnoDB DEFAULT CHARSET=utf8;
Dữ liệu bảng điểm
INSERT INTO `score` VALUES [1,10],[2,40],[3,20],[4,9],[5,20];
Tạo một dự án mới
Tạo một thư mục dự án mới và đặt tên cho nó là biểu đồ. Ghi chú! Hãy đặt tên cho dự án của bạn theo lựa chọn của bạn. Bên trong thư mục dự án ChartJS tạo một thư mục con và đặt tên cho nó là js. Điều này sẽ chứa tất cả các tệp JavaScript.chartjs. Note! Feel free to name your project as per your choice. Inside the chartjs project folder create a subfolder and name it js. This will hold all the javascript files.
Di chuyển các tệp JS trong thư mục JS
Sao chép các tệp biểu đồ.min.js và jquery.min.js bên trong thư mục JS mà chúng tôi đã tạo bên trong thư mục dự án ChartJS. Và tạo tệp app.js bên trong thư mục JS. Điều này sẽ chứa tất cả các mã JavaScript mà chúng tôi sẽ viết cho dự án này.app.js file inside the js folder. This will contain all the javascript code that we are going to write for this project.
Tạo tệp data.php để tìm nạp dữ liệu từ bảng MySQL
Tạo một tệp mới dữ liệu.php bên trong thư mục ChartJS. Tệp này sẽ chứa mã PHP sẽ tìm nạp dữ liệu từ bảng điểm và hiển thị nó ở định dạng JSON.data.php inside the chartjs folder. This file is going to contain php code that will fetch data from the score table and display it in JSON format.
Tệp: Data.php