Hướng dẫn tạo biểu đồ cho WordPress bằng Visualizer

Hướng dẫn tạo biểu đồ cho WordPress bằng Visualizer

     

Đánh giá: star star star star star 5/5 - (9244 Votes)

Hiện nay có rất nhiều plugin giúp bạn thêm cột, biểu đồ, đồ thị vào bài viết. Tuy nhiên đa số plugin này có cách sử dụng hơi phức tạp đối với các bạn mới làm quen WordPress. Thậm chí có một số plugin yêu cầu người dùng chèn dữ liệu bằng shortcode rối rắm. Dĩ nhiên bạn có thể tạo những biều đồ trong các ứng dụng văn phòng, sau đó chuyển thành hình ảnh rồi chèn vào bài viết. Nhưng biểu đồ hình ảnh thiếu đi tính tương tác khi người đọc rê chuột vào các thông tin trong biểu đồ. Và mỗi khi cần cập nhật dữ liệu thì bạn phải chỉnh sửa nó rồi chuyển lại thành file ảnh. Để khắc phục những hạn chế trên, mình xin giới thiệu với các bạn plugin tạo biểu đồ chuyên nghiệp nhưng sử dụng vô cùng đơn giản.

Hướng dẫn thêm biểu đồ bằng Visualizer

Đầu tiên bạn cài đặt và kích hoạt plugin Visualizer. Sau đó tạo một bài viết mới hoặc chỉnh sửa bài viết có sẵn. Trong khung soạn thảo, bạn chọn Add Media. Chú ý trong thanh phía bên trái sẽ có thêm mục mới là Visualizations. Bạn nhấn chọn nó để truy cập thư viện Visualizations. Khi mới cài đặt thì thư viện không có gì cả :) . Hãy chọn Create New để bắt đầu tạo biểu đồ chèn vào bài viết. Trong phần Create New, bạn sẽ chọn loại biều đồ mình muốn rồi nhấn Next. Kế tiếp bạn sẽ chọn cách thức nhập dữ liệu vào trong phần Upload CSV File trong thanh bên phải. Có hai lựa chọn là tải lên tập tin CSV từ máy tính hoặc bảng tính từ Google Drive.

Tạo biểu đồ từ Google Drive

Để tạo biểu đồ từ Google Drive, bạn phải đăng nhập vào Google Drive và tạo một bảng tính hoặc chỉnh sửa từ cái có sẵn. Bạn nhớ đặt tên cho cột ở hàng đầu tiên và hàng thứ hai là kiểu dữ liệu (data type). Các kiểu dữ liệu được hỗ trợ là string, number, bolean, date, datetime, và timeofday. Ví dụ bạn muốn tạo một biểu đồ thống kê số lượng trình duyệt được khách ghé thăm sử dụng. Dữ liệu cần có là tên trình duyệt (Browser) và số lượng khách sử dụng trình duyệt dó (visitors). Giở tạo bảng tính có hai cột là Browser và visitor, kiểu dữ liệu của Browser là một chuỗi vì vậy mình đặt là kiểu string, còn visitor có kiểu number. Sau khi hoàn thành bảng tính, bạn chọn File » Publish to the web…. Một của sổ pop-up hiện ra. Nhấn vào nút publish để đưa bảng tính lên web. Dưới phần Get a link to the published data, chọn CSV (comma-separated values) rồi sao chép đoạn URL bên dưới. Giờ trở lại phần Upload CSV File, bạn chọn From Web và dán đoạn URL bạn vừa sao chép từ Google Drive. Visualizer sẽ tải dữ liệu từ Google Drive và hiển thị một biểu đồ mẫu. Chọn Next để tiến hành chỉnh sửa biểu đồ. Bây giờ xuất hiện một menu bên phải để bạn chỉnh sửa biểu đồ của mình. Phần này bạn từ nghiên cứu nhé, thú vị lắm đấy. Khi chỉnh sửa xong thì nhấn Insert Chart để chèn vào bài viết. Biều đồ sẽ không hiện trong khung soạn thảo đâu mà thay vào đó là một shortcode, biểu đồ sẽ hiển thị khi bạn xem trước hoặc đăng bài viết.

Tạo biểu đồ từ file CSV

Thêm biểu đồ từ file CSV cũng gàn giống như trên Google Drive thôi. Bạn cũng tạo một file CSV trong máy tính. Trong phần Upload CSV File, bạn chọn From Computer rồi chọn file CSV trong máy tính. Ví dụ một file CSV dưới đây:

1
2
3
4
5
Trình duyệt,Khách
string,number
FF,123
IE,456
Opera,789

Mỗi biểu đồ đều có một file CSV mẫu trong phần Upload CSV File, bạn nhấn vào đó để xem cách nhập dữ liệu nhé.

Cập nhật biểu đồ trong WordPress

Những biểu đồ bạn tạo bằng Visualizer đều được lưu trữ trong Media » Visualizer Library. Để thay đổi một biểu đồ được tạo từ Google Drive, bạn chỉ cần cập nhật dữ liệu từ Google Drive rồi chọn File » Publish to the web….Biểu đồ sẽ được cập nhật tự động. Còn với cách thức upload, bạn chọn biểu đồ cần chỉnh sửa rồi upload file CSV mới lên.

Đưa biểu đồ vào Sidebar

Visualizers sử dụng shortcode để chèn biểu đồ. Để đưa biểu đồ vào thanh sidebar, bạn truy cập vào Visualizer Library rồi sao chép shortcode ở dưới biểu đồ. Truy cập vào Appearance » Widgets rồi dán shortcode vào Widget Text. Vậy là mình đã giới thiệu cơ bản cách sử dụng plugin Visualizer rồi, bạn có thể tiếp tục khám phá trong quá trình sử dụng. Nhớ là hãy cập nhật WordPress 3.9.2 nhé vì các phiên bản cũ hơn có thể bị lỗi đấy.   Nguồn : wordpress.taisao.vn