Введение

Использование графиков / диаграмм - лучший способ представления данных. Поскольку он более удобен для пользователя, а также другие операции, такие как сравнения, можно выполнять аналитику. В 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.