Trong hướng dẫn này, tôi sẽ hiển thị một biểu đồ thể hiện diện tích dữ liệu từ cơ sở dữ liệu của chúng tôi. Tôi cũng đã thêm một hình thức có thể lưu dữ liệu vào cơ sở dữ liệu của chúng tôi để thực hành hướng dẫn này.
Tôi đã sử dụng CDN cho Bootstrap và jQuery trong hướng dẫn này vậy, bạn cần kết nối internet để họ làm việc.
Chart.js sử dụng trong hướng dẫn này được bao gồm trong các tập tin tải về của hướng dẫn này.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn
Tạo cơ sở dữ liệu :
Đầu tiên, chúng ta sẽ tạo ra cơ sở dữ liệu của chúng tôi.
1. Mở phpMyAdmin.
2. Nhấp vào cơ sở dữ liệu, tạo ra một cơ sở dữ liệu và đặt tên cho nó như chartjs .
3. Sau khi tạo một cơ sở dữ liệu, nhấp vào SQL và dán mã dưới đây. Xem hình ảnh dưới đây để được hướng dẫn chi tiết.
-
CREATE TABLE 'sales` (
-
'salesid` INT ( 11 ) NOT NULL AUTO_INCREMENT ,
-
'amount` ĐÔI KHÔNG NULL ,
-
'sales_date` NGÀY KHÔNG NULL ,
-
TIỂU KEY ( 'salesid` )
-
) ENGINE = InnoDB DEFAULT CHARSET = latin1;
Chèn dữ liệu vào cơ sở dữ liệu của chúng tôi
Tiếp theo, chúng ta chèn dữ liệu mẫu để cơ sở dữ liệu của chúng tôi để được sử dụng trong biểu đồ của chúng tôi.
1. Bấm chartjs cơ sở dữ liệu mà chúng ta đã tạo trước đó.
2. Nhấp vào SQL và dán mã sau.
-
INSERT INTO 'sales` ( ' salesid` , 'amount` , ' sales_date` ) GIÁ TRỊ
-
(8, 100, '2017-01-01'),
-
(9, 55, '2016-01-01'),
-
(10, 200, '2017-02-02'),
-
(11, 55, '2016-02-02'),
-
(12, 175, '2017-03-03'),
-
(13, 150, '2016-03-03'),
-
(14, 150, '2017-04-04'),
-
(15, 85, '2016-04-04'),
-
(16, 99, '2017-04-04'),
-
(17, 20, '2016-04-04'),
-
(18, 180, '2017-05-05'),
-
(19, 70, '2016-05-05'),
-
(20, 225, '2016-06-06'),
-
(21, 150, '2017-06-06'),
-
(22, 120, '2017-07-07'),
-
(23, 55, '2016-07-07'),
-
(24, 199, '2017-08-08'),
-
(25, 45, '2016-08-08'),
-
(26, 130, '2017-09-09'),
-
(27, 75, '2016-09-09'),
-
(28, 300, '2017-10-10'),
-
(29, 35, '2016-10-10'),
-
(30, 250, '2017-11-11'),
-
(31, 20, '2016-11-11'),
-
(32, 220, '2017-12-12'),
-
(33, 200, '2016-12-12'),
-
(34, 45, '2016-01-05');
3. Nhấp Go nút bên dưới.