Ionic 3 i Highcharts - prikaz grafikona

Ionic 3 i Highcharts – prikaz grafikona

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

$ ionic start Ionic3Highcharts blank
$ cd Ionic3Highcharts

Highcharts implementacija

Highcharts ćemo u naš Ionic 3 projekt dodati koristeći naredbu:

$ npm install highcharts --save

I spremni smo za korištenje.

Datoteka home.html sada će izgledati ovako

<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

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:

Ionic 3 i Highcharts – primjer grafikona

Ako želite prikaz nekog drugog grafikona dovoljno je promijeniti parametar type iz npr. type: ‘bar’ u npr. type: ‘line’ kako bi dobili sljedeće:

Ionic 3 i Highcharts - primjer grafikona

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.

$ ionic generate provider ApiProvider

Sadržaj izgleda ovako:

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:

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:

Ionic 3 i Highcharts - RestCountries API

Zaključak

Kao što ste mogli vidjeti iz ranije navedenih primjera korištenje Highchartsa unutar Ionic 3 aplikacije je vrlo jednostavno.

Objavio

Tomislav Stanković

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

5 misli o “Ionic 3 i Highcharts – prikaz grafikona”

  1. 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?

    1. 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.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *