Moduł ti.charts, który można znaleźć w sklepie Appcelerator, jest przeznaczony tylko dla systemu iOS. Chciałem mieć lekkie rozwiązanie, które może działać zarówno na Androidzie, jak i iOS i zapewniać najbardziej popularne wykresy, słupki, linie, kołki itp. Najprostszym sposobem, aby to zrobić, było skorzystanie z biblioteki skryptów javascript w widoku sieci.
Moje kwalifikacje:
- Szybki
- Brak zależności jQuery
- Animacja przy pierwszym losowaniu
- Dobra domyślna stylizacja
Obecnie istnieje wiele bibliotek do tworzenia wykresów javascript, ale niewiele z nich spełnia wszystkie powyższe kwalifikacje. Zbyt duża kwota zależy od jQuery. Wcześniej pomieszałem z kilkoma, które są zależne od jQuery, i zazwyczaj mają długi czas renderowania, gdy jest zbyt wiele punktów danych, a przez zbyt wiele nie mam na myśli zbyt wiele. WebView jest jednym z najbardziej wymagających zasobów, z których można korzystać, więc im więcej można zrobić dla uproszczenia, tym lepiej.
Natknąłem się na nową bibliotekę innego dnia po tygodniach poszukiwań, które robią dokładnie to, co chcę. ChartJS. Oto jak zaimplementować wykres do webView, jednocześnie przekazując niestandardowe punkty danych.
Ten projekt zawiera 3 pliki oprócz plików generowanych automatycznie
app.js
source / chart.html
source / chart.wvjs - ten plik zawiera javascript z Chart.js znajdujący się tutaj
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({wysokość: 200, szerokość: 320, lewo: 0, góra: 0, showScrollbars: false, touchEnabled: false, url: '/source/chart.html'}); win.add (chartView); przycisk var = Ti.UI.createButton ({title: 'Regenerate', top: 220, }); win.add (przycisk); 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', opcje);}); win.open ();
Zaczynamy od utworzenia naszego okna, widoku internetowego i przycisku przerysowania wykresu z nowymi danymi. Po kliknięciu przycisku tworzymy obiekt o nazwie opcje. Generowanych jest 5 liczb losowych od 1 do 1000, które są przypisywane do tablicy options.data.
Następnie wywoływany jest Ti.App.fireEvent z 2 argumentami. renderChart jest pierwszym przekazanym elementem, a to oznacza, że gdzieś w naszym kodzie potrzebujemy odpowiedniego detektora zdarzeń o tej samej nazwie. Drugi element to obiekt opcji. Teraz możesz zadać sobie pytanie, dlaczego nie przekazałem tablicy bezpośrednio …… To nie zadziała, obiekt jest oczekiwany. Dołączając tablicę do obiektu, możemy przekazać te dane do detektora zdarzeń, który będzie znajdować się w naszym pliku HTML.
Aby webView mógł komunikować się z samym Titanium, konieczne jest użycie takich procedur obsługi zdarzeń. Tytan i przeglądarka internetowa potrzebują sposobu na otwarcie linii komunikacyjnej i właśnie to robi.
views / chart.html
Domyślne rozszerzenie naszej biblioteki wykresów to .js. Odkryłem, że mogą wystąpić konflikty z Titanium podczas korzystania z rozszerzenia .js, więc upewnij się, że zmienisz nazwę swoich plików javascript, które są wywoływane z webView. Moje preferencje to .wvjs, ale naprawdę możesz używać cokolwiek.
Możesz zobaczyć, że mamy nasz kod JavaScript do tworzenia wykresów w eventListener dla renderChart . Jest to wykonywane, gdy fireEvent jest wykonywany z naszego kodu Titanium. Szerokość i wysokość płótna są określane z javascript zamiast dodawać atrybuty do HTML, służy to wyczyszczeniu tego, co istnieje w płótnie, gdy regenerujemy nowy wykres z nowymi danymi.
