Bạn có sếp dễ bị ấn tượng bởi trò nhìn đẹp mắt bất kể nội dung? Bạn là người marketing? Bạn sở hữu website và muốn làm sống động trang web với đồ thị flash مذهل? Bạn cần công cụ trình bày trực tuyến vượt qua trang web tĩnh? Bạn nên xem FusionCharts.
FusionCharts là phần mềm vẽ biểu đồ Flash cho phép tích hợp đồ thị và biểu đồ Flash đẹp mắt, có animation vào dự án Web. FusionCharts cung cấp nhiều loại biểu đồ 2D và 3D, bao gồm area, bar, pie, column, scatter, và nhiều loại khác, tất cả có thể dùng với file HTML thuần túy hoặc ASP, PHP, Ruby on Rail, Python, và công nghệ web khác. FusionCharts cũng hoạt động với cơ sở dữ liệu, như SQL và Oracle.
FusionCharts là một trong nhiều sản phẩm của InfoSoft. Trong các sản phẩm khác, bạn sẽ tìm thấy Flash widget cho dashboard, Flash bản đồ và biểu đồ tương tác cho Adobe Flash, Dreamweaver, FileMaker, Visual Basic, và Google Gadgets.
Tất cả chương trình này tốn tiền, nhưng FusionCharts cũng có phiên bản miễn phí! Dù kém mạnh hơn bản trả tiền, FusionCharts Free đủ dùng cho hầu hết người dùng cá nhân. Hơn nữa, nó rất không phiền toái, không có watermark quảng cáo kiểu shareware.
Thích thú? Hãy để tôi chỉ bạn cách thiết lập FusionCharts. Trong hướng dẫn này, tôi sẽ demo với FusionCharts v3, bạn có thể dùng thử một thời gian. Tôi để khía cạnh pháp lý cho bạn. Để so sánh hai phiên bản, hãy xem trang sau.
Tải và cài đặt
Bạn phải đăng ký để tải FusionCharts. Sau khi tải archive về máy, giải nén file zip vào thư mục bất kỳ.
Các bước đầu
Mở thư mục vừa giải nén FusionCharts. Bạn sẽ thấy nó chứa khá nhiều thư mục con.
File là file tài liệu/hướng dẫn giúp bạn tạo dự án Web đầu tiên và dùng FusionCharts bên trong. Bạn nên dành thời gian đọc hướng dẫn, nhưng cũng có thể lướt qua bài viết của tôi.
Tạo dự án
Bạn cần tạo thư mục cho dự án. Sau khi tạo, copy tất cả file trong thư mục Charts vào thư mục dự án. Bạn sẽ thấy các file ở định dạng SWF. Tiếp theo, copy file FusionCharts.js từ thư mục JSClass vào thư mục dự án.
Lưu ý: Người dùng bản freeware cũng có script. Tuy nhiên, bộ sưu tập loại biểu đồ sẽ nhỏ hơn. Xem so sánh trên để biết chi tiết.
Tất nhiên, bạn không bắt buộc làm vậy, bạn có thể dùng bất kỳ thư mục nào và dùng đường dẫn tương đối trong code web để trỏ đến file đúng, như bất kỳ dự án web nào. Tuy nhiên, lần đầu dùng FusionCharts, dễ hơn nếu trang web, script và biểu đồ Flash cùng một thư mục.
Bước tiếp theo là copy và tạo dữ liệu cho biểu đồ. FusionCharts yêu cầu dùng XML làm container dữ liệu.
Tạo dữ liệu
Trong bản free, bạn phải tự tạo file bằng trình soạn thảo văn bản. Bản full v3 cho phép dùng XML Generator Utility, rất tiện, vì nó tự động chuyển cài đặt thành HTML hoặc code liên quan.
XML Generator nằm trong thư mục Tools.
Nhập dữ liệu bất kỳ cách bạn muốn. Khi xong, click Convert to XML.
Dữ liệu sẽ hiển thị dạng XML. Như đã nói, bạn có thể tự tạo file bằng trình soạn thảo như Notepad. Thực tế, bạn phải copy code vào trình soạn thảo và lưu file thành something.xml.
Hướng dẫn FusionCharts khuyên đặt tên file Data.xml. Nếu bạn không thoải mái tự edit file HTML, bạn chắc chắn nên dùng tên mặc định. Nếu không, bạn có thể dùng bất kỳ tên nào.
Click Configure Chart để tùy chỉnh giao diện biểu đồ. Bạn có thể thêm tiêu đề và phụ đề cho biểu đồ và trục, thay đổi palette màu, hiển thị giá trị trên đồ thị, và các thuộc tính liên quan.
Tiếp theo, click Generate HTML để tạo file. Ở đây, bạn chọn loại biểu đồ. Giá trị này trỏ trực tiếp đến file SWF chúng ta copy trước, nên nếu bạn chỉ copy một phần file biểu đồ từ thư mục Charts, hãy chắc chắn chúng ở trong thư mục dự án. Nếu không, dự án sẽ không chạy. Giống như thiếu file ảnh ở nơi nó nên ở.
Bạn cũng có thể thay đổi chiều rộng và cao của đồ thị. Có thể tinh chỉnh sau bằng cách sửa code HTML.
Cuối cùng, copy nội dung vào trình soạn thảo và tạo file HTML của bạn. Đặt tên tùy ý. Để biết chi tiết, xem file kèm trong gói tải xuống.
Xem lại dữ liệu
Hãy xem file của chúng ta. Đây là file Data.xml:
Như bạn thấy, đó là XML tiêu chuẩn. Bạn có thể edit file trực tiếp nếu muốn hoặc biết cách. Bạn có thể thay giá trị và key, chỉnh caption biểu đồ và hơn thế.
Đây là file HTML:
Đây là file của chúng ta. Phần bạn cần nằm giữa hai comment: Start Code for FusionCharts chart và End code for FusionCharts chart. Bạn có thể copy vào bất kỳ dự án nào. Chú ý đường dẫn tương đối đến file .js, .swf, kích thước biểu đồ, v.v. Bạn có thể tùy chỉnh tất cả. Bây giờ, xem FusionCharts làm được gì.
Đồ thị tuyệt vời
Đây, đồ ăn thật ngon, một số pie 2D và 3D:
Ví dụ khác, 3D bar:
Hãy xem những biểu đồ đẹp này khi tích hợp vào trang web, với văn bản trước và sau biểu đồ, tạo thành bài viết khá ổn:
Phần tốt nhất là bạn có thể thao tác đồ thị, xoay chúng, tách các phần dữ liệu, mọi trò hay. Tất nhiên, bạn phải bật Javascript và cài plugin Flash để mọi thứ chạy.
Đồ thị cũng có animation đẹp khi tải, thêm phong cách. Đây là giao diện, ghi lại bằng Wink:
Tóm tắt nhỏ
Trước khi đến Kết luận, đây là danh sách ngắn các bước cần làm để FusionCharts chạy:
- Tải và giải nén archive.
- Copy file Flash (.swf trong Charts) và file Javascript (.js, trong JSClass) vào thư mục dự án. Có thể dùng một thư mục hoặc nhiều vị trí. Người ít kinh nghiệm nên dùng một thư mục dự án thống nhất.
- Tạo dữ liệu biểu đồ, copy vào file text và lưu thành Data.xml.
- Tạo code HTML, tùy chỉnh và copy vào file text và lưu; đặt tên tùy ý. Bạn có thể dùng đường dẫn tương đối hoặc tuyệt đối cho vị trí file. Người nâng cao sẽ tinh chỉnh thiết lập tùy ý.
- Mở file HTML mới tạo trong trình duyệt web và bắt đầu tận hưởng biểu đồ đẹp. Thay đổi key, value, caption, size, type, palette theo nhu cầu.
Như bạn thấy, cài đặt FusionCharts không phải plug-and-play, nhưng hoàn toàn khả thi. Nếu bạn đã quen với thiết kế web, dù sao bạn cũng sẽ nếu định dùng công nghệ trình bày trực tuyến, thì dùng FusionCharts sẽ dễ dàng. Nếu bạn newbie, có chút việc phía trước, nhưng hy vọng hướng dẫn của tôi làm nó đơn giản.
Kết luận
FusionCharts chắc chắn là công nghệ hữu ích, độc đáo. Nó cho phép làm giàu trình bày trực tuyến, nhanh và dễ dàng. Tốt nhất, bạn không cần là bậc thầy code để dùng FusionCharts. Việc khó đã được làm, bạn chỉ cần làm cho những biểu đồ đẹp ngồi yên trên trang web.
Kết hợp với Wink và có thể Slidy, bạn sẽ được phục vụ. Nếu bạn nghiêm túc, bạn có thể cân nhắc mua bản full, trả tiền.
Tôi hy vọng bạn thích hướng dẫn này. Hẹn gặp lại.
Chào.