Mô-đun ti.charts mà bạn có thể tìm thấy trong thị trường Appcelerator chỉ dành cho iOS. Tôi muốn một giải pháp gọn 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, bánh, v.v. Cách đơn giản nhất để sử dụng thư viện javascript biểu đồ này trong chế độ xem web.
Trình độ của tôi:
- Nhanh
- Không phụ thuộc vào jQuery
- Hoạt ảnh khi vẽ đầu tiên
- 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à một toàn bộ rất nhiều đáp ứng tất cả các bằng cấp trên. Một số tiền phụ thuộc vào jQuery. Tôi đã rối tung xung quanh với một vài phụ thuộc vào jQuery trước đây, và họ thường có thời gian render chậm khi có được quá nhiều điểm dữ liệu, và bởi quá nhiều tôi có nghĩa là không phải là toàn bộ rất nhiều. WebView là một trong những thành phần chuyên sâu về tài nguyên nhất mà bạn có thể sử dụng, do đó, càng có nhiều thứ có thể được thực hiện để giữ cho mọi thứ đơn giản, 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 những gì tôi muốn. ChartJS. Dưới đây là cách triển khai biểu đồ thành một webView, đồng thời cũng 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
source / 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, touchEnabled: false, url: '/source/chart.html'}); win.add (chartView); Nút var = Ti.UI.createButton ({title: 'Regenerate', top: 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 đồ bằng dữ liệu mới. Khi nút được nhấp, chúng tôi tạo một đối tượng được gọi là tùy chọn. 5 số ngẫu nhiên từ 1 đến 1000 được tạo và gán cho mảng options.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 đó trong mã của chúng ta, chúng ta cần phải có một trình 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 gắn mảng vào đối tượng, chúng ta có thể chuyển dữ liệu đó đến trình nghe sự kiện sẽ được đặt trong tệp html của chúng tôi.
Đối với webView để 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.
views / chart.html Biểu đồ Ti.App.addEventListener ('renderChart', hàm (tùy chọn) {Ti.API.info ('biểu đồ hiển thị'); var canvas = document.getElementById ('myChart'); canvas.width = 310 ; canvas.height = 190; var data = {labels: ["Jan", "Feb", "Mar", "Apr", "May"], tập dữ liệu: [{fillColor: "rgba (220, 220, 220, 0.5)", strokeColor: "rgba (220, 220, 220, 1)", dữ liệu: options.data}]} var ctx = document.getElementById ("myChart"). getContext ("2d"); biểu đồ mới (ctx) .Bar (dữ liệu);} ); 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 đã tìm thấy có thể có xung đột với Titanium khi sử dụng phần mở rộng .js, vì vậy hãy chắc chắn rằng bạn đổi tên các tệp javascript của bạn đang được gọi từ mộ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 hiện khi fireEvent được thực thi từ mã Titanium của chúng tôi. Chiều rộng và chiều cao cho canvas được chỉ định từ javascript thay vì thêm thuộc tính vào HTML, điều này phục vụ mục đích xóa những gì tồn tại trong canvas khi chúng tôi tạo lại biểu đồ mới với dữ liệu mới.
