Створення інтерактивних діаграм у Ionic 2

Sep 12, 2025

Як

Коли ви працюєте в маленькій команді, це, як правило, важко написати та підтримувати окремий код для Android, iOS та Windows. Ось де гібридні рамки, такі як іонні, приходять у картину. Вони не тільки дозволяють нам написати єдиний шматок коду, який можна використовувати на всіх трьох платформах, але означає, що ми можемо зробити це за допомогою нашого існуючого технічного стека.

У цьому підручнику ми розглядаємо, як вирішити спільне завдання, як візуалізація даних у іонному 2, один з найбільш перспективних гібридних додатків там. Я буду використовувати бібліотеку діаграм графіків Javascript (FusionChats.com), для цього проекту, оскільки він пропонує велику бібліотеку понад 90 графіків, сумісна з кожним пристроєм та браузером, і дуже легко працювати.

Налаштування іонного 2

Для розробки додатків з Ionic 2, вам потрібен вузол.js версії 4+ і NPM, що працює на вашій ОС. Ви можете завантажити пакет Node.js з nodejs.org/en/download і NPM буде встановлено разом з ним. Якщо у вас вже є інша версія Node.js, і хочете, щоб запустити версію 4+, ви можете зробити це через це через це Менеджер версії вузла .

Далі потрібно встановити іонну 2 бета-версію за допомогою NPM. Для цього NPM Install -G Ionic @ beta У вашому терміналі з облікового запису користувача за допомогою кореневих привілеїв (ми встановлюємо модуль у всьому світі). Для моделювання Ionic App ми створюємо у кількох платформах, нам потрібен ще один модуль вузлів: Кордова . Ви можете встановити це у всьому світі NPM Install -G Cordova .

Тепер ми готові створити наше перше іонне додаток. Однак, з цією установкою, ми зможемо лише побачити програму в браузері. Для того, щоб імітувати додаток для пристрою iOS або Android, нам потрібно побудувати цей конкретний модуль платформи до Кордова. У цьому підручнику ми будемо побудувати модуль iOS, тому вам потрібно запустити Іонна платформа додають iOS .

Нарешті, вам потрібно встановити XCode. Ви знайдете інструкції для цього тут .

Створення іонного 2 додатки

У цьому підручнику ми збираємося створювати іонні 2 додатки, названі "графіками". Ми створимо папку "Charts" у вашому поточному робочому каталозі та завантаження програми з прикладом програми. Програма зразка буде містити базову сторінку, як описано тут.

Щоб створити цю програму, запустіть Ionic Start Charts - V2 У поточному робочому каталозі ( графік це назва програми та --v2 Розповідає іонну, яку ми хочемо створити Ionic 2 App). При виконанні цієї команди a графік Папка буде створена у поточному робочому каталозі. Щоб перевірити додаток у браузері, перейдіть до графік папки і запустити іонний служити . Це запуститиме додаток у своєму браузері за умовчанням.

Додавання нової сторінки

Тепер давайте додати сторінку / компонент до графік додаток, який створить графіки JavaScript. По-перше, ми просто додамо просту HTML-сторінку з "Hello World" у ньому.

У Ionic 2, сторінки можна додати до іонного додатку за допомогою @Page Декоратор (іонний модуль на основі кутових компонентів 2), який має доступ до повної іонної функціональності. Гола мінімальна сторінка вимагає шаблону HTML-файлу (який містить розмітку), а файл JavaScript (що містить логіку). Ви можете знайти докладнішу інформацію про іонні сторінки тут .

Щоб створити сторінку, яку ми додаємо donut-chart.js і donut-chart.html файли до Графіки / додаток / сторінки Donut-діаграма каталог. У файлі HTML ми можемо додати код для навігації додатків та простий "Hello World" заголовок:

 & lt; Ion-Navbar * Navbar & GT;
& lt; кнопка menutoggle & gt;
  & lt; іонний іменник = "меню" & gt; & lt; / ion-icon & gt;
& lt; / кнопка & gt;
& lt; іон-назва & gt; hello ionic & lt; / ion-title & gt;
& lt; / Ion-Navbar & GT;

& lt; іонний вміст & gt;
  & lt; h1 & gt; hello world & lt; / div & gt;
& lt; / ion-content & gt;

У файлі JavaScript ми посилаємо файл HTML, створений як шаблон для цього компонента. Оскільки ми ще не робимо нічого, що просто, ми можемо просто додати порожній конструктор Чаркуляція .

 Імпорт {сторінка} від "іонно-кутової";

@Page ({{
  templateurl: 'build / pages / pie-chart / pie-chart.html'
})

Експортний клас ChartSpage {
  конструктор () {
  }
}

Ми тільки що створювали автономний компонент; Тепер нам потрібно пов'язати це у головне додаток. Для цього ми повинні посилатися на компонент, який ми створили в app.js Файл у папці програми та використання компонента в сторінка властивість конструктора компонентів додатків.

 Імпорт {chartstpage} з "./pages/donut -chart/donut -chart"

конструктор (додаток, платформа, меню) {
    // Конструктор додатків за умовчанням
    це.App = додаток;
    this.platform = Платформа;
    це .menu = меню;
    це.Іітіалізепп ();
    // Встановіть сторінки нашої програми - ми додаємо діаграму Donut
    це.pages = [
      {Назва: "Ласкаво просимо", компонент: helloionicpage},
      {Назва: "Donut Chart", Component: CHARTSPAGE}
    ];

    // Зробити HelloionicPage кореневу (або першу) сторінку - за умовчанням
    this.rootpage = hellooionicpage;
}

Після внесення цих змін іонний додаток у браузері повинен автоматично перезавантажити (або використовувати іонну інформацію з термінала). Тепер нова посилання повинна бути видно в бічному меню програми, і натиснувши, що ви повинні побачити "Hello World" на екрані.

Створення діаграми JavaScript

Тепер пора змінити нашу сторінку "Hello World", щоб створити діаграму пончиків. Щоб мати можливість використовувати бібліотеку FusionCharts, нам потрібно спочатку включати fusioncharts.js і fusioncharts.Charts.js Файли в www / index.html файл.

Швидкий підказка: Якщо обидва файли знаходяться в тій же папці, то додавання fusioncharts.js буде достатньо, оскільки це буде автоматично включати fusioncharts.Charts.js .

 & lt; тип сценарію = "текст / javascript" src = "шлях / до / fusioncharts.js" & gt; & lt; / script & gt;

Тепер ми змінимо HTML з попереднього кроку, щоб створити контейнер діаграми:

 & lt; div id = "діагрант-контейнер" & gt; & lt; / div & gt;

У конструкторі donut-chart.js , який ми створили вище, нам потрібно додати наступний код, щоб створити діаграму всередині контейнера діаграми:

 FusionCharts.Ready (функція () {
  var revenuechart = нові фузинги ({{
    Тип: 'doughnut2d',
    renderat: "діаграма-контейнер",
    Ширина: "100%",
    Висота: '450',
    Dataformat: 'JSON',
    джерело даних: {
      "Діаграма": {
        "Підпис": "Спліт доходів за категоріями продукту",
        "Підкапція": "Минулого року",
        "numberprefix": "$",
        "Палецети": "# 0075C2, # 1AAF5D, # F2C500, # F45B00, # 8E0000",
        // більше атрибутів діаграми
      },
      "Дані": [{
          "Етикетка": "їжа",
          "Значення": "28504"
        } // більше даних
      ]
    }
  }). Рендер ();
});

У цьому коді ми створюємо нову діаграму через конструктор з фузингу. Використовувані властивості коротко пояснюються нижче:

тип визначає тип діаграми

рендерат це ідентифікатор контейнера, де ми хочемо зробити діаграму

ширина і висота використовуються для встановлення розмірів діаграми

даних це формат, в якому ми збираємося отримувати дані діаграми (ви можете використовувати JSON, а також XML)

джерело даних містить діаграму косметику всередині фузингу діаграма об'єкт і фактичні дані, які будуть побудовані всередині дані масив

Хоча я показав лише чотири атрибути діаграма Об'єкт, більше ста інших ви можете використовувати для покращення дизайну вашої діаграми. Ви можете дізнатись більше про це тут .

Після додавання цього коду запустіть іонний служити для відновлення програми. Ви повинні побачити посилання "Donut Chart" у вашому боці. Якщо ви правильно дотримувалися всіх моїх кроків, коли ви натискаєте, що посилання ви повинні побачити діаграму пончиків! Якщо ні, будь ласка, зверніться до коду на Github Repo для цього проекту щоб побачити, де ви пішли не так.

Примітка. Після перевірки його в браузері, використання Іонний емуляційний iOS Щоб завантажити додаток у тренажері IOS.

Підводячи підсумки

Our doughnut chart representing the revenue split of a hypothetical company by product categories — Наша діаграма пончиків, що представляє дохід, розкол гіпотетичної компанії за категоріями продукту

Як ви тільки що бачили, не важко розпочати роботу з візуалізації даних у Ionic 2. Хоча я просто зробив просту діаграму пончиків, щоб продемонструвати процес, можна створити складні графіки з кількома датчиками, використовуючи той самий процес . Єдине, що вам потрібно з'ясувати, - це формат, в якому FusionCharts приймає дані для цього типу схеми. Як тільки ви зможете це зробити, ви зможете зробити будь-яку діаграму з бібліотеки.

Якщо вам потрібна допомога з цією темою, або якщо у вас виникли питання щодо вмісту цього підручника, не соромтеся спіймати мене на Twitter .Я завжди радий допомогти!

Ця стаття спочатку з'явилася чистий журнал випуск 283; купити його тут .

Створення інтерактивних діаграм у Ionic 2

Налаштування іонного 2

Створення іонного 2 додатки

Додавання нової сторінки

Створення діаграми JavaScript

Підводячи підсумки

Як - Найпопулярніші статті

Створіть ефект старої школи

Використовуйте Brain.js для побудови нейронної мережі

Побудуйте AI-Powered ChatBot

Як змінити шрифт у вашій Twitter Bio

ANATOMY MASTERCLASS: PERFECT ваші цифри

Фарба як імпресіоніст

Фарба мокрий на вологих масах

Як створити мангу з диким західний твіст

Категорії