U ovom ću blog postu pokazati kako na jednostavan način prikazati napredne grafikone unutar Ionic 3 aplikacije koristeći Highcharts.
Više o Highchartsu možete pronaći u njihovoj službenoj dokumentaciji https://www.highcharts.com/docs
Postavljanje aplikacije
Za početak je potrebno kreirati novi Ionic projekt
|
1 2 |
$ ionic start Ionic3Highcharts blank $ cd Ionic3Highcharts |
Highcharts implementacija
Highcharts ćemo u naš Ionic 3 projekt dodati koristeći naredbu:
|
1 |
$ npm install highcharts --save |
I spremni smo za korištenje.
Datoteka home.html sada će izgledati ovako
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ion-header> <ion-navbar> <ion-title> Ionic3 - Highcharts </ion-title> </ion-navbar> </ion-header> <ion-content> <div id="container" style="display: block;"></div> </ion-content> |
A datoteka home.ts će izgledati ovako
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import * as Highcharts from 'highcharts'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor() { } ionViewDidLoad(){ var myChart = Highcharts.chart('container', { chart: { type: 'bar' }, title: { text: 'Fruit Consumption' }, xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] }, yAxis: { title: { text: 'Fruit eaten' } }, series: [{ name: 'Jane', data: [1, 0, 4] }, { name: 'John', data: [5, 7, 3] }] }); } } |
Možete primijetiti jednu stvar koja im je zajednička, a to je id="container".
Također, funkcija ionViewDidLoad(); brine se da se naš grafikon prikaže tek kada je stranice home.html tj. home.ts u potpunosti učitana, a spada pod Lifecycle events.
Lifecycle events are fired during various stages of navigation. They can be defined in any component type which is pushed/popped from a NavController.
I na kraju to izgleda ovako:
Ako želite prikaz nekog drugog grafikona dovoljno je promijeniti parametar type iz npr. type: 'bar' u npr. type: 'line' kako bi dobili sljedeće:
Prikaz dinamičkih vrijednosti
U gornjem primjeru koristimo fiksne podatke za prikaz grafikona, ali to ne mora biti slučaj i u vašoj aplikaciji. Naravno da možete koristiti API koji će vam dati dinamičke vrijednosti za prikaz.
Kako bi to bilo moguće prvo je potrebno kreirati servis za API tj. ApiProvider. U ovom ću primjeru također koristiti https://restcountries.eu/ API.
|
1 |
$ ionic generate provider ApiProvider |
Sadržaj izgleda ovako:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import 'rxjs/add/operator/map'; @Injectable() export class ApiProvider { constructor(public _http: Http) { console.log('Hello ApiProvider Provider'); } getData(){ return this._http.get('https://restcountries.eu/rest/v2/all') .map(res => res.json()) //Uzimam samo 10 vrijednosti iz API-ja .map(res => res.slice(56,66)); } } |
Datoteka home.html ostaje u istom obliku, ali zato home.ts sada izgleda ovako:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import * as Highcharts from 'highcharts'; import { ApiProvider } from "../../providers/api/api"; @Component({ selector: 'page-home', templateUrl: 'home.html', providers: [ApiProvider] }) export class HomePage { countryOptions:any; data:any; constructor(public _apiProvider: ApiProvider) { } getCountries(){ this._apiProvider.getData().subscribe(res => { this.countryOptions = res; console.log(this.countryOptions); let myCountries = []; if(this.countryOptions.length > 0) { for(let i = 0; i < this.countryOptions.length; i++) { myCountries.push( this.countryOptions[i].name ); } } let myPopulation = []; if(this.countryOptions.length > 0) { for(let i = 0; i < this.countryOptions.length; i++) { myPopulation.push( this.countryOptions[i].population ); } } this.data = this.showHighchart(myCountries,myPopulation); }); } ionViewDidLoad(){ this.getCountries(); } showHighchart(myCountries,myPopulation){ console.log(myCountries); console.log(myPopulation); Highcharts.chart('container', { chart: { type: 'bar' }, title: { text: 'Country population' }, xAxis: { categories: myCountries }, yAxis: { title: { text: 'Population' } }, series: [{ name: 'Population', data: myPopulation }] }); } } |
Aplikacija sada izgleda ovako:
Zaključak
Kao što ste mogli vidjeti iz ranije navedenih primjera korištenje Highchartsa unutar Ionic 3 aplikacije je vrlo jednostavno.
Pozdrav, nadam se da odgovor, pratio sam svaki korak, ali samo „Highcharts” koristi da se proglasi grafikona podataka je naglasio i ja dobiti sljedeću pogrešku: ‘Highcharts’ refers to a UMD global, but the current file is a module.
Razmislite o dodavanju uvoz umjesto. Imate bilo kakve prijedloge ili rješenja?
Hi Barbara, you can write in english if you want.
If I understood correctly you get following error: “Highcharts refers to a UMD global, but the current file is a module. Consider adding an import instead”, but it is difficult to say something more concrete without the code. You can put it on GitHub so I can see it.
Something about this you can find at https://github.com/highcharts/highcharts/issues/4994
Oh very, thank you, ok I’ll post my project on github so you can help everyone that may have the same problem.
Hi, here i published my code, the html is the same as yours, i hope you can help me, and if you have questions i’ll be visiting this page everyday. Thank you, in advance.
https://github.com/highcharts/highcharts/issues/8697
You say “Chrome’s console says undefined.” – where is that undefined? Did you try with hard-coded data?
It would be best to create a new repository.
I’m currently on vacation and therefore are possible delays with the answer.