Я всегда пытаюсь придать больше привлекательности разрабатываемым мобильным приложениям, будь то с помощью удобных пользовательских интерфейсов или графики. Некоторое время я хотел возиться с графиками в своих мобильных приложениях, но это продолжало отталкивать меня в прошлое.
Я решил подтолкнуть себя, чтобы дать ему шанс. Используя Ionic Framework для создания мобильных приложений для Android и iOS, у вас остается несколько возможностей для добавления диаграмм, потому что существует очень много библиотек JavaScript. В частности, мы рассмотрим Chart.js и оболочку AngularJS , Angular Chart . Мы рассмотрим эту библиотеку, потому что она не только великолепно выглядит, но и хорошо работает с AngularJS, на которой построен Ionic Framework.
В отличие от некоторых других моих уроков, этот можно протестировать как в веб-браузере, так и на устройстве или в симуляторе. Это потому, что мы не собираемся использовать какие-либо собственные плагины или библиотеки. Это будет все JavaScript и CSS.
Давайте начнем с создания свежего проекта Ionic Framework на нашем рабочем столе с помощью командной строки или терминала:
ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add iosСоздание нового Ionic Android и iOS Project Shell 1 2 3 4 ионный запуск IonicProject blank cd IonicProject ионная платформа добавить андроид ионная платформа добавить ios
Важно отметить, что если вы не на Mac, вы не можете добавлять и собирать для платформы iOS.
Следующее, что вы хотите сделать, это загрузить библиотеки JavaScript для Chart.js и Angular Charts. Начните с загрузки самой последней библиотеки Chart.js и добавления Chart.min.js в каталог вашего проекта www / js . Затем загрузите последнюю версию библиотеки Angular Charts и добавьте angular-charts.min.js в каталог вашего проекта www / js и angular-charts.css в каталог вашего проекта www / css .
Файлы физической библиотеки включены в ваш проект, но их необходимо добавить в ваш исходный код.
Откройте файл www / index.html вашего проекта и сделайте так, чтобы он выглядел следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" href="css/angular-chart.css">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/Chart.min.js"></script>
<script src="js/angular-chart.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
</body>
</html>Обратите внимание на выделенные строки выше и их размещение. Поскольку css / styles.css — ваши пользовательские стили и переопределения, над ним должен быть включен CSS-файл Angular Charts. JS / Chart.min.js файл является исходным файлом JavaScript поэтому он должен быть включен , прежде чем пытаться включить ваши JS / угловатый-chart.min.js оболочку.
Многое из того, что будет дальше, будет взято из официальной документации Angular Charts и Chart.js .
В файле www / js / app.js вашего проекта измените, angular.moduleчтобы включить оболочку Angular Charts следующим образом:
angular.module('starter', ['ionic', 'chart.js'])Затем в раскрывающемся списке опустите файл и создайте новый контроллер с именем ExampleControllerследующего кода:
.controller("ExampleController", function($scope) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
});Мы собираемся использовать эти же данные для нескольких типов диаграмм. Здесь есть семь меток и семь точек данных. Есть несколько серий , которые почему у нас есть два массива данных, один для серии А и один для серии B .
Возвращаясь к файлу www / index.html , найдите <ion-content>теги и замените их следующими:
<ion-content ng-controller="ExampleController">
<div class="card">
<div class="item item-divider">
A line chart
</div>
<div class="item item-text-wrap">
<canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" series="series" options="{showTooltips: false}"></canvas>
</div>
</div>
<div class="card">
<div class="item item-divider">
A bar chart
</div>
<div class="item item-text-wrap">
<canvas id="bar" class="chart chart-bar" data="data" labels="labels" legend="true" series="series" options="{showTooltips: false}"></canvas>
</div>
</div>
</ion-content>Что здесь происходит? У нас есть две ионные карты. Первая карта имеет линейную диаграмму, а вторая карта имеет столбчатую диаграмму, обе с некоторыми пользовательскими параметрами, описанными в документации Chart.js. В частности, мы решили удалить всплывающие подсказки, потому что они могут вызвать странные результаты на старых версиях Android и iOS.
Эти графики являются адаптивными, что отлично подходит для работы с различными разрешениями экрана устройства.
Вывод
В дикой природе существуют различные библиотеки графиков, но здесь мы увидели популярную библиотеку Chart.js с расширением Angular Charts. Он отзывчив, хорошо документирован и прекрасно работает с Ionic Framework.
Видео-версию этой статьи можно увидеть ниже.