Проверяя свои ежедневные информационные бюллетени по электронной почте, я наткнулся на новую прекрасную библиотеку диаграмм, которая называется диаграммами Frappe.

Поскольку я работаю над проектом с использованием Ionic и мне нужно представить данные в виде графиков, я решил интегрировать диаграмму Frappe и использовать ее в качестве настраиваемого компонента. В этой библиотеке диаграмм хорошо то, что она настолько проста и не имеет (как в нуле) зависимостей!

Вот как я это сделал, давайте начнем с создания нового проекта Ionic.

Установите в проект диаграммы Frappe.

Поскольку диаграммы Frappe были существенно переработаны для версии 1.0.0, мы должны указать версию 0.0.7 при установке пакета.

Создайте новый компонент.

Теперь, когда мы сгенерировали файлы наших компонентов, пришло время их настроить.

Откройте /components/frappe-charts/frappe-charts.ts и введите указанные ниже коды. Мы также импортируем сюда библиотеку диаграмм Frappe.

Я не буду вдаваться в подробности и объяснять, как работает код, потому что считаю его довольно простым. Если вы хотите узнать, как работает компонент Angular, ознакомьтесь с этой документацией на сайте Angular.

Хорошо, теперь откройте /components/frappe-charts/frappe-charts.html и поместите этот код

Мы также должны импортировать стили в /src/app/app.scss

Наконец, импортируйте модуль компонента в /src/app/app.module.ts. Кроме того, убедитесь, что ваше приложение настроено на использование функции отложенной загрузки!

Ура! Теперь мы можем использовать наш компонент на любой странице, какой захотим.

Поэтому, если мы хотим использовать его на нашей домашней странице /src/pages/home/home.ts, нам просто нужно предоставить данные:

Мы также должны импортировать компонентный модуль в модуль домашней страницы.

Затем используйте компонент в /src/pages/home/home.html, например:

Вот и все!

Мне очень понравилось играть с этой замечательной библиотекой диаграмм Frappe, и я надеюсь, что она вам пригодится!

Это первый раз, когда я пытался интегрировать стороннюю библиотеку в проект Ionic, поэтому, пожалуйста, дайте мне знать в разделе комментариев ниже, если у вас есть лучший или более эффективный способ сделать это!

Демо: http://ejfrias.com/playground/frappe-charts-ionic

Репо: https://github.com/ejfrias/Frappe-Charts-Ionic-3

Благодарим Frappe за эту удивительную библиотеку диаграмм!

Отказ от ответственности: этот блог был создан для frappe-charts v0.0.7 еще до выпуска v1.0.0. Я сделаю все возможное, чтобы установить последнюю версию, когда у меня будет время.