Một ví dụ về bảng biểu ECharts ưa thích của tôi

Bảng biểu tạo bằng thư viện JS ECharts rất đẹp mắt, bản thân nó cũng có tính năng responsive rồi. Tuy nhiên chúng ta cần chỉnh sửa các cài đặt sao cho phù hợp. Mục đích là để tạo bố cục hợp lý, thuận mắt trên cả giao diện di động lẫn máy bàn. Việc tích hợp này là rất quan trọng để tận dụng được hình thức nổi bật của ECharts. Sự thực vấn đề thường nằm ở giao diện di động, vì màn hình lớn đồ thị thường không gặp vấn đề cản trở nào, nhưng với màn …

Đọc thêm

Đoạn mã JavaScript tự động thay đổi ảnh nền background dựa vào ngày hiện tại

Trong thiết kế giao diện website, sử dụng ảnh nền là một trong những cách đơn giản và hiệu quả nhất để tạo hiệu ứng thẩm mỹ ấn tượng cho website. Chọn được ảnh nền phù hợp bạn sẽ biến một giao diện trông ổn thành cá tính. Tuy nhiên con người cũng không thích sự đơn điệu, ảnh đẹp nhìn mãi cũng chán, nếu bạn muốn ảnh nền của website tự động đổi sang một ảnh khác dựa vào ngày hiện tại thì bài viết này sẽ giúp bạn. Ưu điểm của cách trên là người dùng sẽ không …

Đọc thêm

Lỗi vòng lặp trong JS

Vòng lặp trong JS nói riêng và trong ngôn ngữ lập trình nói chung có cấu trúc như thế này: (điều kiện) {thỏa mãn điều kiện thì làm việc abc xyz; làm điều gì đó để thay đổi điều kiện} Nếu không thỏa mãn điều kiện thì không làm gì (tức là không làm việc abc xyz). Ví dụ về vòng lặp for: Điều kiện: i khởi đầu bằng 0, và phải nhỏ hơn 10; Thay đổi điều kiện là sau mỗi vòng lặp, i tăng lên một đơn vị, thể hiện bằng câu lệnh i++ text += i + …

Đọc thêm

Vài kinh nghiệm thiết kế web đơn giản

Tôi đang làm một ứng dụng trên nền tảng web, dù khá đơn giản nhưng trong quá trình làm cũng vỡ ra được nhiều điều- bài viết này tôi sẽ chia sẻ một số trải nghiệm đó. Đừng đợi (cảm thấy) giỏi rồi mới viết Đây có lẽ là vấn đề với không ít người, chúng ta thường nghĩ mình chưa đủ giỏi để viết một cái gì đó mà chúng ta thực sự muốn. Thực tế là đúng phần nào, bạn sẽ cần đến ngưỡng nào đó để bắt đầu viết một ứng dụng chuyên sâu, làm thuê cho …

Đọc thêm

Thực hành viết hàm trong JavaScript

Hôm nay chúng ta sẽ thực hành viết các hàm JS đơn giản, qua đó sẽ cải thiện dần khả năng tạo các hàm phức tạp hơn. Bài toán 1: nhập vào ba số chỉ độ dài, hãy xem nó có phải là ba độ dài của một cạnh tam giác không? Cách giải: ba độ dài a, b, c chỉ tạo được thành hình tam giác nếu ba điều kiện sau đồng thời thỏa mãn: a + b > c b + c > a a + c > b Như vậy chúng ta sẽ sử dụng đến câu …

Đọc thêm

Code chống copy, click chuột phải và ctrl + u, song kiếm hợp bích CSS và JavaScript

Ngăn thao tác quét bài viết là cách chống copy đơn giản nhưng khá hiệu quả. Tuy nó không chống lại được các đối tượng sao chép có chuyên môn về công nghệ thông tin, nhưng với các đối tượng copy thông thường thì rất hữu hiệu. Trong bài viết này Kiến càng sẽ “song kiếm hợp bích” cả 2 biện pháp là sử dụng CSS kết hợp với JavaScript. Bạn chỉ cần đưa đoạn code sau vào trước thẻ đóng </head> của mẫu HTML trang web của bạn là thành công: Nếu bạn muốn chống thêm cả thao tác …

Đọc thêm

Các câu lệnh JavaScript dùng để thao tác với chuỗi (string)

Tôi vẫn luôn hứng khởi với JavaScript, khía cạnh chủ yếu là vì nó có thể viết ra các ứng dụng chạy trên trình duyệt mà không làm bạn tốn kém đáng kể tài nguyên máy chủ như các ngôn ngữ PHP, lý do là vì các đoạn mã được thực thi trên máy khách. Hôm nay tôi sẽ tìm hiểu các hàm liên quan tới string. Trước tiên chúng ta tạo cái form demo để kiểm tra: Sau đó là hàm JS để bắt đầu viết mã vào bên trong: Các hàm đơn giản Đầu tiên để lấy thông …

Đọc thêm

Tạo biểu đồ tròn cơ bản – học thư viện JS ECharts (phần 3)

Tôi vẫn thường ưu tiên biểu đồ cột nhiều nhất, cơ mà biểu đồ tròn cũng hay khi mà chúng ta chỉ có vài dữ liệu đưa vào hoặc thích sự mềm mại của nó. A. Biểu đồ tròn đơn giản Mã mẫu: Một số câu lệnh mới mà chúng ta thấy: left: ‘center’ dùng để căn giữa; orient: ‘vertical’ bình thường cái legend sẽ xếp từ trái qua phải, để như thế này nó sẽ xếp theo trục đứng; type: ‘pie’: dùng để chỉ biểu đồ tròn; radius: ‘50%’ đùng để chỉ kích cỡ tương đối; phần cuối chỗ …

Đọc thêm

Tạo bảng biểu cột, đường phức tạp hơn – học thư viện JS ECharts (phần 2)

Trong phần một chúng ta đã làm quen với các cú pháp, câu lệnh cơ bản của ECharts, trong bài 2 này tôi sẽ thử tìm hiểu các bảng biểu dạng cột đã được đề cập trong bài đầu nhưng có nhiều tính năng hơn. A. Biểu đồ cột giúp nổi bật thông tin khi di chuột qua (axis align with tick) Đoạn mã mẫu: Phần đầu tiên: Phần thứ hai: Phần thứ ba: Phần cuối có thông tin đáng lưu ý là barWidth: ‘50%’, giúp xác định độ rộng cột tương đối. Bạn cứ điều chỉnh con số này …

Đọc thêm

Tạo biểu đồ đường, cột cơ bản – học thư viện JS ECharts (phần 1)

Học qua ví dụ có lẽ là cách học ưa thích của nhiều người. Và hôm nay chúng ta sẽ thử thực hành với các ví dụ đơn giản nhất của ECharts để bước đầu làm quen. Đầu tiên bạn vào thư viện mẫu này của họ: echarts.apache.org/examples/en/index.html Rồi chọn các ví dụ đơn giản để thực hành trước (đừng vội ham vào mấy biểu đồ lung linh, mã nó rắc rối lắm, chưa hiểu ngay được đâu, mới cả biểu đồ hoa lá cành thực tế cũng ít dùng hơn các biểu đồ đơn giản- vì mục đích của …

Đọc thêm