Когда вы работаете в небольшой команде, он имеет тенденцию быть трудно написать и поддерживать отдельный код для Android, iOS и Windows. Вот где гибридные рамки, такие как Ionic, вступают в картину. Они не только позволяют нам написать один кусок кода, который можно использовать на всех трех платформах, но означает, что мы можем сделать это, используя наш существующий технологический стек.
В этом руководстве мы рассмотрим, как решать общую задачу, такую как визуализация данных в Ionic 2, один из самых перспективных гибридных структур приложений там. Я буду использовать библиотеку диаграммы диаграммы JavaScript Fusioncharts (fusioncharts.com), для этого проекта, поскольку он предлагает большую библиотеку более 90 графиков, совместима с каждым устройством и браузером и очень легко работать.
Настройка Ionic 2
Для разработки приложений с IONIC 2 вам нужен Node.js версия 4+ и NPM работает на вашей ОС. Вы можете скачать пакет Node.js из
nodejs.org/en/download.
И NPM будет установлен вместе с ним. Если у вас уже есть другая версия Node.js работает и хочу запустить версию 4+, вы можете сделать это через
Узел версии менеджера
Отказ
Далее вам нужно установить IONIC 2 BETA, используя NPM. Сделать это, беги
NPM установить -G IONIC @ BETA
В вашем терминале с учетной записи пользователя в корневых привилегиях (мы устанавливаем модуль во всем мире). Для имитации ионного приложения мы создаем в нескольких платформах, нам нужен еще один модуль узла:
Cordova.
Отказ Вы можете установить это глобально, используя
NPM установить -G Cordova
Отказ
Теперь мы готовы создать наше первое ионное приложение. Однако с этой установкой мы сможем увидеть только приложение в браузере. Чтобы моделировать приложение для iOS или Android-устройства, нам нужно построить этот конкретный модуль платформы для Cordova. В этом руководстве мы будем строить модуль iOS, поэтому вам нужно запустить
Ионная платформа Добавить iOS
Отказ
Наконец, вам нужно установить XCode. Вы найдете инструкции для этого
здесь
Отказ
Создание приложения Ionic 2
В этом руководстве мы собираемся создать IONIC 2 приложение, названные «графики». Мы создадим папку «Диаграммы» в вашем текущем рабочем каталоге и загрузочном приложении с приложением приложения. Пример приложения будет содержать основную страницу, как описано здесь.
Чтобы создать это приложение, запустить
Ionic Start Charts --v2
В текущем рабочем каталоге (
диаграммы
это название приложения и
--v2.
Рассказывает IONIC, мы хотим создать IONIC 2 приложение). На исполнение этой команды,
диаграммы
Папка будет создана в текущем рабочем каталоге. Чтобы проверить приложение в браузере, перейдите к
диаграммы
папка и пробег
Ионическая подача
Отказ Это запустит приложение в вашем браузере по умолчанию.
Добавление новой страницы
Теперь давайте добавим страницу / компонент на
диаграммы
Приложение, которое создаст диаграммы JavaScript. Во-первых, мы просто добавим простой HTML-страницу с «Hello World» в нем.
В Ionic 2 страницы могут быть добавлены в ионное приложение, используя
@Страница
Декоратор (ионный модуль на основе угловых 2 компонентов), который имеет доступ к полной ионной функциональности. Голая минимальная страница требует шаблона HTML-файла (который содержит разметку), а файл JavaScript (содержащий необходимую логику). Вы можете найти более подробную информацию о Ionic Pages
здесь
Отказ
Чтобы создать страницу, мы добавим
Donut-Chart.js.
и
Donut-Chart.html.
Файлы к тому
Диаграммы / приложение / страницы пончик-график
каталог. В файле HTML мы можем добавить код на навигацию APP и простую заголовок «Hello World»:
В файле JavaScript мы ссылаемся на HTML-файл, созданный в качестве шаблона для этого компонента. Поскольку мы уже ничего не делаем, мы можем просто добавить пустой конструктор
ChartSpage.
Отказ
Мы только что создали автономный компонент; Теперь нам нужно связать это в основное приложение. Для этого нам нужно ссылаться на компонент, который мы создали в
app.js.
файл в папке приложения и используйте компонент в
страницы
Свойство конструктора компонентов приложений.
Импорт {ChartSpage} из './pages/donut-Chart/donut-Chart'
Конструктор (приложение, платформа, меню) {
// конструктор приложения по умолчанию
this.app = приложение;
this.platform = платформа;
this.menu = меню;
Это. ИНИТИАЛИЗЕАНПП ();
// установить страницы нашего приложения - мы добавляем диаграмму пончики здесь
this.pages = [
{Название: «Добро пожаловать», компонент: Helloionicpage},
{Название: «Диаграмма пончика», компонент: ChartSpage}
];
// сделать helloionicpage root (или первый) страницу - шаг по умолчанию
this.rootpage = helloionicpage;
}
После выполнения этих изменений ионное приложение в браузере должно автоматически перезагрузить (или использовать Ionic служить снова с терминала). Теперь новая ссылка должна быть видна в боковом меню приложения, и нажав, что вы должны увидеть «Hello World», написанный на экране.
Создание диаграммы JavaScript
Теперь пришло время изменить нашу страницу «Hello World» для создания диаграммы пончиков. Чтобы иметь возможность использовать библиотеку Fusioncharts, нам нужно сначала включить
fusioncharts.js.
и
fusioncharts.Charts.js.
Файлы в
www / index.html.
файл.
Быстрый совет: если оба файла находятся в одной папке, а затем добавлять
fusioncharts.js.
будет достаточно, так как это будет автоматически включать
fusioncharts.Charts.js.
Отказ
Теперь мы изменим HTML с предыдущего шага, чтобы создать контейнер диаграммы:
& lt; div id = "Диаграмма-контейнер" & gt;
В конструкторе в
Donut-Chart.js.
, который мы создали выше, нам нужно добавить следующий код для создания диаграммы внутри контейнера диаграммы:
fusioncharts.ready (Функция () {
var revenuechart = новый fusioncharts ({{
Тип: 'Doughnut2D',
Renderat: «Диаграмма-контейнер»,
Ширина: «100%»,
Высота: '450',
DataFormat: «JSON»,
источник данных: {
"Диаграмма": {
«Caption»: «Сплит выручки по категориям продукции»,
«Субкоптация»: «В прошлом году»,
«NumbleFix»: «$»,
«Палитлетки»: «# 0075C2, # 1AAF5D, # F45B00, # 8E0000»,
// больше атрибутов диаграммы
},
"данные": [{
«Ярлык»: «Еда»,
«Значение»: «28504»
} // Больше данных
Несомненно
}
}).оказывать();
});
В этом коде мы создаем новый график через конструктор Fusioncharts. Используемые свойства кратко объяснены ниже:
тип
Определяет тип диаграммы
рендерьют
это идентификатор контейнера, где мы хотим сделать график
ширина
и
высота
используются для установки размеров диаграммы
формат данных
Является ли формат, в котором мы собираемся кормить данные диаграммы (вы можете использовать JSON, а также XML)
источник данных
содержит график косметики внутри Fusioncharts
Диаграмма
объект и фактические данные, которые будут нанесены внутри
данные
множество
Хотя я показал только четыре атрибута в
Диаграмма
Объект, есть более ста других, вы можете использовать для улучшения дизайна вашей графики. Вы можете прочитать больше об этом
здесь
Отказ
Как только этот код добавлен, запустите
Ионическая подача
Чтобы отправить приложение. Вы должны увидеть ссылку «Donut Chart» в вашем боковом меню. Если вы правильно соблюдали все мои шаги, когда вы нажмете эту ссылку, вы должны увидеть диаграмму пончика! Если нет, пожалуйста, обратитесь к коду на
GitHub Repo для этого проекта
чтобы увидеть, где вы пошли не так.
Примечание. После проверки его в браузере используйте
Ионный эмулировать IOS.
загрузить ваше приложение в симуляторе iOS.
Суммирование
Наша диаграмма пончика, представляющая доход выручки гипотетической компании по категориям продукции
Как вы только что видели, не сложно начать с визуализацией данных в Ionic 2. Несмотря на то, что я только что сделал простую диаграмму пончика, чтобы продемонстрировать процесс, можно создавать сложные диаграммы с несколькими наборами наборах данных, используя тот же процесс. Отказ Единственное, что вам нужно выявить, является формат, в котором Fusioncharts принимает данные для этого конкретного типа диаграммы. Как только вы сможете это сделать, вы сможете сделать любой график из библиотеки.
Если вам нужна помощь с этой темой или если у вас есть какие-либо вопросы о содержании этого урока, не стесняйтесь поймать меня
в Твиттере
ОтказЯ всегда рад помочь!
