Hướng dẫn dùng googlecharts JavaScript
I. Tổng quan về google chartĐồ thị luôn là công cụ hữu hiệu để thể hiện dữ liệu một cách trực quan, nhanh chóng và có thể bắt gặp ở bất cứ đâu trong cuộc sống. Đối với môi trường web thì Google Charts là bộ công cụ mạnh và phổ biến nhất để tạo các mẫu đồ thị. Google Charts cung cấp rất nhiều những dạng đồ thị khác nhau, tất cả đều được Google chau chuốt rất kĩ lưỡng nên bạn hoàn toàn có thể yên tâm đặt chúng vào các sản phẩm web của mình. Và quan trọng hơn là sử dụng Google Charts không hề khó. Dưới đây là hình ảnh một số mẫu đồ thị của Google Charts: Show Toàn bộ công việc tạo, load dữ liệu, cấu hình đồ thị đều có thể thực hiện bằng các dòng code JavaScrip. Do đó bạn có thể sử dụng Google Charts rộng rãi với nhiều nền tảng phát triển web khác nhau. Riêng đối với Ruby, Google Chart có thể được sử dụng rất dễ dàng thông qua các gem. Một trong những gem được sử dụng phổ biến nhất để tạo các đồ thị trong ruby là chartkick. Trên Viblo cũng đã có bài viết hướng dẫn chi tiết cách sử dụng gem chartkick cho ruby tại đây. Mặc dù bạn có thể sử dụng Google Chart rất dễ dàng thông qua các gem này nhưng chúng đều không cung cấp hoặc cung cấp rất ít các lựa chọn để bạn có thể tùy biến các đồ thị. Và khi mà những tùy chọn mặc định, những dạng đồ thị có sẵn trong các gem là không đủ thì bài viết này có thể sẽ giúp các xây dựng được những mẫu đồ thị đúng như ý muốn ngay cả khi bạn sử dụng Ruby hoặc một ngôn ngữ lập trình web nào khác. II. Tạo đồ thị với Google ChartGoogle cung cấp cho người dùng 3 cách khác nhau để tạo các mẫu đồ thị:
Trong nội dung bài viết các đồ thị sẽ được xây dựng chủ yếu bằng cách thứ nhất đó là sử dụng hàm chart.draw() Dưới đây là 1 đoạn code ngắn tạo biểu đồ dạng piechart sử dụng chart.draw()
Và đây là kết quả: Các bạn có thể thử trực tiếp sửa và tạo đồ thị theo ý mình tại đây. Ta có thể thấy để tạo một đồ thị theo cách này cần các bước:
III. Tùy chỉnh đồ thịToàn bộ phần phần trước của bài viết đủ để bạn có thể tạo được không ít các mẫu đồ thị khác nhau và phần này mình sẽ cung cấp một số cách để bạn có thể tùy biến đồ thị theo ý của mình để phù hợp hơn với từng mục đích sử dụng. 1. Tùy chỉnh đồ thị theo optionCác tùy chọn của đồ thị sẽ được lưu theo từng cặp name:value trong biến
Và khi tạo đồ thị bạn chỉ cần thêm biến Google chart có rất nhiều loại đồ thị và với từng loại đồ thị sẽ có rất nhiều những option khác nhau. Để tham khảo thêm về các option hoặc event của một dạng đồ thị cụ thể nào đó bạn có thể tham khảo tại trang của Google Charts tại đây Dưới đây sẽ là một số những tùy chọn phổ biến của Google Charts
Trên đây mình đã giới thiệu một số tùy chỉnh đơn giản và hay dùng của Google Chart giúp các bạn có thể dễ dàng hơn trong việc làm quen với các tùy chỉnh của Google Chart. 2. Tùy chỉnh đồ thị với DataTable RolesNgoài việc tùy chỉnh đồ thị sử dụng biến
Column này sẽ thêm vào đồ thị một cột chứa nội dung của các tooltip dưới dạng text, thay thế cho những nội dung mặc định của tooltip khi chart được tạo ra. Bạn có thể thử làm quen với các role qua ví dụ ở đây. Sau đây là những Roles được cung cấp bởi Google Charts: Thực sự với rất nhiều những gì Google đã cung cấp trong Google Charts thì một bài viết sẽ là không thể đủ để giới thiệu hết các các phần của bộ công cụ này. Tuy nhiên trên đây là những gì mình cho là cần thiết, phổ biến nhất để bạn có thể bắt đầu với Google Chart. Rất mong bài viết sẽ hữu ích khi các bạn cần sử dụng tới các đồ thị trên trang web của mình. Thanks for reading! Nguồn tham khảohttps://developers.google.com/chart/ |