Введение
Использование графиков / диаграмм - лучший способ представления данных. Поскольку он более удобен для пользователя, а также другие операции, такие как сравнения, можно выполнять аналитику. В Javascript есть много библиотек для графиков / диаграмм Благодаря открытому исходному коду. Такие библиотеки, как Charts.js, Highcharts.js, Fusion-charts.js и т. Д. Являются довольно хорошими библиотеками с открытым исходным кодом для выполнения подобных задач.
Но поскольку мы знаем, что объем данных увеличивается очень быстро, нам нужна библиотека, с помощью которой мы можем отображать большой набор данных в небольшом коде. Эта возможность предоставляется библиотекой High-charts. В этом уроке мы научимся рисовать высокоуровневые и высшие биржевые графики, используя Angular 2 и Ionic 2.
Предварительные требования
Прежде чем продолжить, у вас должны быть установлены Angular-cli, Ionic, Cordova. Мы создадим приложение ionic 2, которое будет показывать диаграммы с высокими и высокими запасами кейсов. Так что будьте готовы… 😎
⚠️ В этом руководстве у меня установлены ionic 2 (Ionic CLI): 3.16.0 и Cordova (7.0.0). Кроме того, весь приведенный ниже код протестирован только на платформе Android. На других платформах могут быть некоторые изменения в коде.
Давайте теперь напишем код… 🤓
⚠️ Сначала мы увидим, как реализовать диаграммы с высокими показателями, а затем мы будем использовать диаграммы с высокими показателями акций, поскольку оба варианта реализации немного отличаются.
Самые высокие показатели
Для реализации высоких графиков нам необходимо установить следующий плагин:
npm install angular2-highcharts --save
Теперь добавьте этот модуль, который вы установили, в файл App.module.ts следующим образом:
import { ChartModule } from 'angular2-highcharts'; import * as highcharts from 'Highcharts'; // Inside imports block of app.module.ts add following: imports: [ BrowserModule, IonicModule.forRoot(MyApp), ChartModule.forRoot(highcharts) ]
При установке модуля angular2-highcharts модуль «Highcharts» установился сам, так как он является зависимым от модуля angular2-highcharts. Итак, в основном модуль angular2-highcharts - это оболочка вокруг основного модуля «Highcharts», который помогает нам использовать высокие диаграммы в angular 2.
Теперь закройте файл app.module.ts и перейдите на домашнюю страницу в каталоге страниц.
Поскольку мы импортировали ChartModule, мы можем использовать элемент диаграммы на нашей HTML-странице следующим образом:
<ion-content> <chart [options] = "chartOptions" style="display: block" type = "chart"> </chart> </ion-content>
Этот элемент диаграммы имеет свойство «options», к которому мы привяжем нашу диаграмму
В файле home.ts нам нужно объявить chartOptions, чтобы отобразить его на нашей HTML-странице следующим образом:
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { chartOptions : any; constructor(public navCtrl: NavController) { this.chartOptions = { chart: { type: 'bar' }, title: { text: 'Fruit Consumption', style: { color : "#ff0000" } }, xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] }, yAxis: { title: { text: 'Fruit eaten' } }, series: [{ name: 'Jane', data: [1, 0, 4] }, { name: 'John', data: [5, 7, 3] }] } } }
Здесь в конструкторе мы определили chartOptions, имеющие такие свойства, как тип диаграммы - гистограмма, ось x и ось y.
Результат этой диаграммы будет следующим:
Графики высоких запасов
Использование диаграмм High-stock в Ionic 2 / angular 2 немного сложно и отличается, поскольку эта библиотека, в частности, создана только для javascript, а Ionic2 / Angular2 поддерживает машинописный текст, поэтому нам нужно выполнить некоторые другие шаги для создания диаграмм High-Stock.
⚠️ В этом разделе графиков с высоким запасом мы не используем плагин angular2-highcharts, поэтому не стесняйтесь удалить этот плагин или попробовать его в новом приложении.
Как мы знаем, диаграммы Highstock не поддерживают машинописный текст напрямую, но есть способ использовать его здесь .. 😉
Откройте файл index.html вашего проекта и добавьте следующие скрипты для highstock.js
<!-- Implementing High Stock Charts --> <script src="https://code.highcharts.com/stock/highstock.js"></script> <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
Эти скрипты используются для импорта библиотеки highstock внутри нашего проекта.
Теперь перейдите в файл home.html, и здесь мы добавим div, чтобы отобразить диаграмму следующим образом:
<ion-content padding> <div id="container" style="height: 400px"></div> </ion-content>
Этот «контейнер» с идентификатором будет использоваться для привязки диаграммы highstock…
Откройте файл home.ts и добавьте в код следующее:
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; declare var Highcharts : any; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController) { } ngAfterViewInit ( ) { // create the chart Highcharts.stockChart('container',{ chart: { alignTicks: false }, rangeSelector: { selected: 1 }, title: { text: 'AAPL Stock Volume' }, series: [{ type: 'column', name: 'AAPL Stock Volume', data: [ [1298851200000,100768479], [1298937600000,114032163], [1299024000000,150647189], [1299110400000,125196764], [1299196800000,113316483], [1299456000000,136530149], [1299542400000,89078955], [1299628800000,113349033], [1299715200000,126972055], [1299801600000,117770016] ], dataGrouping: { units: [[ 'week', // unit name [1] // allowed multiples ], [ 'month', [1, 2, 3, 4, 6] ]] } }] }); } }
Как вы можете видеть выше, данные должны быть в форме объекта JSON, в котором 1 поле предназначено для метки времени, которая добавляется с помощью getTime (), а другое - значение, соответствующее этому времени.
И мы объявили Highcharts как любые, потому что у него нет определенного типа данных, а stockchart - это свойство, которое мы реализовали с помощью файла highstock.js внутри нашего файла index.html.
⚠️ Не забудьте использовать эту функцию highstock внутри функции ngAfterViewInit (), поскольку иногда для загрузки скрипта в проект требуется время, и это вызывает ошибку неперехваченного обещания. Таким образом, ngAfterViewInit будет отображаться только тогда, когда будет готова вся страница.
Результатом будет:
В последний ..
На этом этапе мы научились реализовывать диаграммы Highcharts и Highstock в angular2 / Ionic2. Надеюсь это поможет !!
Удачного кодирования !!
Если эта статья вам поможет или вам она понравилась, дайте ей немного 👏 и поделитесь ею!
Если это так, подписывайтесь на меня на Medium или Twitter.