Модуль ti.charts, который вы можете найти на торговой площадке Appcelerator, предназначен только для iOS. Мне нужно было легкое решение, которое могло бы работать как на Android, так и на iOS и предоставлять наиболее распространенные диаграммы, гистограммы, линии, круговые диаграммы и т. Д. Самый простой способ сделать это - использовать библиотеку JavaScript-диаграмм в веб-представлении.
Мои квалификации:
- Быстрый
- Нет зависимости JQuery
- Анимация при начальном розыгрыше
- Хороший стиль по умолчанию
В настоящее время существует множество библиотек JavaScript-диаграмм, но не так много, которые соответствуют всем вышеперечисленным требованиям. Неоправданное количество полагаться на JQuery. Ранее я сталкивался с некоторыми из них, которые зависят от jQuery, и у них обычно медленное время рендеринга, когда получается слишком много точек данных, и слишком много я имею в виду не много. WebView - это один из наиболее ресурсоемких компонентов, который вы можете использовать, поэтому чем больше будет сделано, чтобы упростить задачу, тем лучше.
Я наткнулся на новую библиотеку на днях после нескольких недель поиска, который делает именно то, что я хочу. ChartJS. Вот как внедрить диаграмму в веб-представление, а также передать пользовательские точки данных.
В этом проекте есть 3 файла, кроме автоматически сгенерированных файлов
app.js
источник / chart.html
source / chart.wvjs - этот файл содержит javascript из Chart.js, расположенный здесь
app.js var win = Titanium.UI.createWindow ({backgroundColor: '# fff'}); var chartView = Ti.UI.createWebView ({высота: 200, ширина: 320, слева: 0, верх: 0, showScrollbars: false, touchEnabled: false, url: '/source/chart.html'}); win.add (chartView); var button = Ti.UI.createButton ({title: 'Regenerate', top: 220, }); win.add (кнопка); 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', параметры); }); win.open ();
Мы начнем с создания нашего окна, веб-представления и кнопки, чтобы перерисовать график новыми данными. Когда кнопка нажата, мы создаем объект с именем options. 5 случайных чисел от 1 до 1000 генерируются и присваиваются массиву options.data.
Ti.App.fireEvent затем вызывается с 2 аргументами. renderChart - это первый передаваемый элемент, и это означает, что где-то в нашем коде нам нужен соответствующий прослушиватель событий с тем же именем. Второй пункт - объект параметров. Теперь вы можете спросить себя, почему я не передал массив напрямую …… Он не будет работать, ожидается объект. Прикрепив массив к объекту, мы можем передать эти данные в прослушиватель событий, который будет находиться в нашем html-файле.
Для взаимодействия WebView с самим Titanium необходимо использовать подобные обработчики событий. Titanium и WebView нужен способ открыть линию связи, и это именно то, что он делает.
просмотров / chart.html
Расширение файла нашей библиотеки графиков по умолчанию - .js. Я обнаружил, что могут быть конфликты с Titanium при использовании расширения .js, поэтому убедитесь, что вы переименовываете свои файлы javascript, которые вызываются из webView. Я предпочитаю .wvjs, но вы действительно можете использовать что угодно.
Вы можете видеть, что у нас есть код JavaScript для построения диаграмм в eventListener для renderChart . Это выполняется, когда fireEvent выполняется из нашего кода Titanium. Ширина и высота для холста задаются из javascript вместо добавления атрибутов в HTML, это служит для очистки того, что существует в холсте, когда мы воссоздаем новую диаграмму с новыми данными.
