Mô-đun ti.charts mà bạn có thể tìm thấy trên thị trường Appcelerator chỉ dành cho iOS. Tôi muốn một giải pháp nhẹ có thể hoạt động trên cả Android và iOS và cung cấp phổ biến nhất các biểu đồ, thanh, đường, hình tròn, v.v … Cách đơn giản nhất để thực hiện điều này là cho tôi sử dụng thư viện javascript biểu đồ trong chế độ xem web.
Trình độ chuyên môn của tôi:
- Nhanh
- Không phụ thuộc jQuery
- Hoạt hình trên bản vẽ ban đầu
- Kiểu dáng mặc định tốt
Bây giờ có rất nhiều thư viện biểu đồ javascript, nhưng không phải là toàn bộ đáp ứng tất cả các bằng cấp trên. Một lượng không phù hợp dựa vào jQuery. Trước đây tôi đã loay hoay với một vài thứ phụ thuộc vào jQuery và chúng thường có thời gian kết xuất chậm khi có quá nhiều điểm dữ liệu và có quá nhiều ý tôi không phải là toàn bộ. WebView là một trong những thành phần tiêu tốn nhiều tài nguyên nhất mà bạn có thể sử dụng, do đó, càng có thể thực hiện để giữ cho mọi thứ đơn giản thì càng tốt.
Tôi tình cờ gặp một thư viện mới vào một ngày khác sau nhiều tuần tìm kiếm, đó chính xác là những gì tôi muốn. Biểu đồJS. Đây là cách triển khai biểu đồ vào webView, đồng thời chuyển các điểm dữ liệu tùy chỉnh.
Có 3 tệp trong dự án này, ngoài các tệp được tạo tự động
app.js
nguồn / chart.html
source / chart.wvjs - tệp này chứa javascript từ Chart.js nằm ở đây
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({height: 200, width: 320, left: 0, top: 0, showScrollbars: false, touchEnables: false, url: '/source/chart.html'}); win.add (chartView); nút var = Ti.UI.createButton ({title: 'Tái tạo', đầu trang: 220, }); win.add (nút); button.addEventListener ('click', function () {var Options = {}; Options.data = new Array (Math.floor (Math.random () * 1001), Math.floor (Math.random () * 1001), Math.floor (Math.random () * 1001), Math.floor (Math.random () * 1001), Math.floor (Math.random () * 1001)); Ti.App.fireEvent ('renderChart', tùy chọn);}); win.open ();
Chúng tôi bắt đầu bằng cách tạo cửa sổ, chế độ xem web và nút để vẽ lại biểu đồ với dữ liệu mới. Khi nhấn nút, chúng ta tạo một đối tượng gọi là tùy chọn. 5 số ngẫu nhiên trong khoảng từ 1 đến 1000 được tạo và gán cho mảng tùy chọn.data.
Ti.App.fireEvent sau đó được gọi với 2 đối số. renderChart là mục đầu tiên được thông qua và điều này có nghĩa là ở đâu đó ngoài mã của chúng ta, chúng ta cần phải có một trình lắng nghe sự kiện tương ứng có cùng tên. Mục thứ hai là đối tượng tùy chọn. Bây giờ, bạn có thể tự hỏi tại sao tôi không vượt qua một mảng trực tiếp. Nó sẽ không hoạt động, một đối tượng được mong đợi. Bằng cách đính kèm mảng vào đối tượng, chúng ta có thể truyền dữ liệu đó đến trình nghe sự kiện sẽ nằm trong tệp html của chúng ta.
Để webView tự giao tiếp với Titanium, sử dụng các trình xử lý sự kiện như thế này là cần thiết. Titanium và webView cần một cách để mở một đường truyền thông, và đó chính xác là những gì nó làm.
lượt xem / chart.html
Phần mở rộng tệp mặc định của thư viện biểu đồ của chúng tôi là .js. Tôi đã thấy rằng có thể có xung đột với Titanium khi sử dụng tiện ích mở rộng .js, vì vậy hãy đảm bảo rằng bạn đổi tên các tệp javascript đang được gọi từ webView. Sở thích của tôi là .wvjs, nhưng bạn thực sự có thể sử dụng bất cứ thứ gì.
Bạn có thể thấy chúng tôi có mã javascript biểu đồ của chúng tôi trong eventListener cho renderChart . Điều này được thực thi khi fireEvent được thực thi từ mã Titanium của chúng tôi. Chiều rộng và chiều cao của khung vẽ được chỉ định từ javascript thay vì thêm các thuộc tính vào HTML, điều này phục vụ mục đích xóa sạch những gì tồn tại trong khung vẽ khi chúng tôi tạo lại biểu đồ mới với dữ liệu mới.
