Maak interactieve grafieken in IONIC 2

Sep 13, 2025

Procedures

Wanneer je in een klein team werkt, is het meestal moeilijk om te schrijven en de afzonderlijke code te onderhouden voor Android, iOS en Windows. Dat is waar hybride kaders zoals ionisch in de foto komen. Ze stellen ons niet alleen in staat om een enkel stuk code te schrijven dat op alle drie de platforms kan worden gebruikt, maar betekent dat we dit kunnen doen met behulp van onze bestaande technische stapel.

In deze tutorial gaan we onderzoeken hoe ze een gemeenschappelijke taak moeten aanpakken zoals gegevensvisualisatie in Ionic 2, een van de meest veelbelovende hybride app-frameworks die er zijn. Ik zal de FusionCharts JavaScript-diagrambibliotheek (Fusioncharts.com) gebruiken, voor dit project, omdat het een grote bibliotheek van meer dan 90 kaarten biedt, is compatibel met elk apparaat en de browser en is zeer gemakkelijk mee te werken.

Ionische 2 opzetten

Om apps met Ionic 2 te ontwikkelen, hebt u Node.js versie 4+ en NPM die op uw besturingssysteem nodig heeft. U kunt het Node.js-pakket downloaden van nodejs.org/en/download en NPM wordt ermee geïnstalleerd. Als je al een andere versie van Node.js uitgevoerd hebt en ook versie 4+ wilt uitvoeren, kun je dat doorgaan Knooppuntversiemanager

Vervolgens moet u Ionic 2 Beta installeren met behulp van NPM. Om dit te doen, ren dan NPM installeren -G ionic @ bèta In uw terminal van een gebruikersaccount met root-privileges (wij installeren de module wereldwijd). Om de ionische app te simuleren, maken we op meerdere platforms, we hebben nog een knooppuntmodule nodig: Cordova U kunt dit wereldwijd installeren met behulp van npm install-g cordova

We zijn nu klaar om onze eerste ionische app te maken. Met deze setup kunnen we echter alleen de toepassing in een browser zien. Om de app te simuleren voor een iOS- of Android-apparaat, moeten we die specifieke platformmodule op Cordova bouwen. In deze tutorial zullen we de iOS-module bouwen, dus je moet rennen Ionisch platform Voeg iOS toe

Ten slotte moet u Xcode installeren. Je vindt instructies hiervoor hier

Een Ionic 2-app maken

In deze tutorial gaan we een ionische 2-app met de naam 'grafieken' maken. We maken een map 'Diagrammen' in uw huidige werkdirectory en bootstrap de app met een voorbeeldtoepassing. De voorbeeld-app bevat een basispagina, zoals hier wordt beschreven.

Om deze app te maken, run dan Ionische startgrafieken --V2 in de huidige werkdirectory ( grafieken is de naam van de app en --V2 Vertelt Ionic We willen een Ionic 2-app maken). Bij uitvoering van deze opdracht, a grafieken Map wordt gemaakt in de huidige werkmap. Om de app in de browser te testen, navigeer dan naar de grafieken map en ren Ionisch dienen Hiermee wordt de app in uw standaardbrowser gestart.

Een nieuwe pagina toevoegen

Laten we nu een pagina / component toevoegen aan de grafieken Toepassing die Javascript-tabel maakt. Ten eerste zullen we gewoon een eenvoudige HTML-pagina toevoegen met 'Hallo World' erin.

In ionisch 2 kunnen pagina's worden toegevoegd aan de ionische app met behulp van de @Bladzijde Decorator (een ionische module op basis van hoekige 2 componenten), die toegang heeft tot de complete ionische functionaliteit. Een blote minimale pagina vereist een sjabloon HTML-bestand (dat de markup bevat) en een JavaScript-bestand (met de benodigde logica). U vindt meer informatie over ionische pagina's hier

Om de pagina te maken, zullen we toevoegen donut-chart.js en donut-chart.html bestanden naar de Diagrammen / app / pagina's Donut-diagram Directory. In het HTML-bestand kunnen we de code toevoegen voor app-navigatie en een eenvoudige 'Hallo World'-rubriek:

 & LT; ION-NAVBAR * NAVBAR & GT;
& lt; knop menutoggle & GT;
  & LT; ION-ICON NAME = "MENU" & GT; & LT; / ION-ICON & GT;
& lt; / knop & GT;
& LT; ION-TITEL & GT; HELLO IONIC & LT; / ION-TITLE & GT;
& LT; / ION-NAVBAR & GT;

& LT; ION-INHOUD & GT;
  & LT; H1 & GT; Hallo World & LT; / DIV & GT;
& LT; / ion-inhoud & GT;

In het JavaScript-bestand verwijzen we het HTML-bestand dat is gemaakt als de sjabloon voor dit onderdeel. Omdat we niets aan het doen zijn, kunnen we gewoon een lege constructeur toevoegen Grafiek

 Importeren {pagina} van 'Ionic-Angular';

@Bladzijde({
  Temonurl: 'Build / Pages / Pie-diagram / taart-kaart.html'


Exporteer klasse grafiekspanning {
  constructeur () {
  
}

We hebben zojuist een stand-alone component gecreëerd; Nu moeten we dit koppelen aan de hoofd-app. Om dit te doen, moeten we verwijzen naar het onderdeel dat we hebben gemaakt in de app.js bestand in de app-map en gebruik het component in de Pagina's eigendom van de APP-component-constructeur.

 Import {chartspage} van './pages/donut-chart/donut-chart'

Constructor (app, platform, menu) {
    // standaard app-constructeur
    this.app = app;
    dit.platform = platform;
    dit.menu = menu;
    this.initialibeAApp ();
    // Stel de pagina's van onze app in - wij voegen hier doughart
    deze.pages = [
      {titel: 'Welkom', Component: HelloionicPage},
      {Titel: 'Donut Chart', Component: Kaartspanning}
    

    // Make HelloionicPage The Root (of First) -pagina - Standaard stap
    this.ROTPAGE = helloionicpage;
}

Nadat u deze wijzigingen hebt ingediend, moet de Ionische app in de browser automatisch herladen (of ionisch gebruik van de terminal gebruiken). Nu moet een nieuwe link zichtbaar zijn in het menu SUNEN VAN DE APP, en op het klikken op dat u 'Hallo World' op het scherm moet zien.

Een javascript-grafiek maken

Nu is het tijd om onze 'Hallo World'-pagina te wijzigen om een doughour te maken. Om de FusionCharts-bibliotheek te kunnen gebruiken, moeten we eerst de fusioncharts.js en fusioncharts.charts.js bestanden in de www / index.html het dossier.

Snelle tip: als beide bestanden zich in dezelfde map bevinden en vervolgens toevoegen fusioncharts.js zal genoeg zijn, omdat dit automatisch zal opnemen fusioncharts.charts.js

 & LT; Script Type = "Tekst / JavaScript" SRC = "PATH / TO / FUSECHARTS.JS" & GT; & LT; / SCRIPT & GT;

We zullen nu de HTML van de vorige stap wijzigen om een grafiekcontainer te maken:

 & lt; div id = "Chart-container" & GT; & LT; / DIV & GT;

In de constructeur in donut-chart.js , die we hierboven hebben gemaakt, moeten we de volgende code toevoegen om de diagram in het diagramcontainer te maken:

 Fusioncharts.Ready (functie () {
  Var RevenuEchArt = Nieuwe fusioncharts ({
    Type: 'Doughnut2D',
    Renderat: 'Chart-Container',
    Breedte: '100%',
    Hoogte: '450',
    DataFormat: 'JSON',
    databron: {
      "Grafiek": {
        "Caption": "Split of Revenue door productcategorieën",
        "Subcaption": "vorig jaar",
        "PERMERPREFIX": "$",
        "Palettecolors": "# 0075c2, # 1AAF5D, # F2C500, # F45B00, # 8E0000",
        // meer grafiekattributen
      
      "Gegevens": [{
          "Label": "Eten",
          "Waarde": "28504"
        } // meer gegevens
      
    
  }). render ();
});

In deze code maken we een nieuwe grafiek via de constructor van de Fusioncharts. De gebruikte eigenschappen worden hieronder kort uitgelegd:

type Bepaalt het type grafiek

renderat is de ID van de container waar we de grafiek willen renderen

breedte en hoogte worden gebruikt om de diagramafmetingen in te stellen

data formaat is het formaat waarin we de grafiekgegevens gaan voeden (u kunt JSON en XML gebruiken)

databron Bevat diagramcosmetica in de fusioncharts grafiek object en de feitelijke gegevens die in de gegevens array

Hoewel ik slechts vier kenmerken in de grafiek Object, er zijn meer dan honderd anderen die u kunt gebruiken om het ontwerp van uw grafiek te verbeteren. Je kunt er meer over lezen hier

Zodra deze code is toegevoegd, wordt uitgevoerd Ionisch dienen om de app opnieuw te doen. U moet een 'Donut Chart'-link in uw zijmenu bekijken. Als u al mijn stappen op de juiste manier volgt, moet u op die link klikken, een doughour-diagram! Zo niet, raadpleeg dan de code op de Github Repo voor dit project om te zien waar je fout bent gegaan.

OPMERKING: Gebruik na het controleren van deze in de browser ionisch emulate iOS Om uw app in de iOS-simulator te laden.

Opsommen

Our doughnut chart representing the revenue split of a hypothetical company by product categories — Onze Donut-diagram die de Revenue Split van een hypothetisch bedrijf vertegenwoordigt op productcategorieën

Zoals je net hebt gezien, is het niet moeilijk om aan de slag te gaan met gegevensvisualisatie in Ionic 2. Hoewel ik net een simpele donutgrafiek heb gemaakt om het proces aan te tonen, is het mogelijk om complexe grafieken te maken met meerdere datasets met hetzelfde proces . Het enige dat u nodig hebt, is het formaat waarin Fusioncharts de gegevens voor dat specifieke diagramtype accepteert. Zodra u dat kunt doen, kunt u elke grafiek uit de bibliotheek maken.

Als u hulp nodig heeft bij dit onderwerp of als u vragen heeft over de inhoud van deze tutorial, voel dan vrij om me te vangen op Twitter Ik ben altijd blij om te helpen!

Dit artikel verscheen oorspronkelijk in netto tijdschrift kwestie 283; koop het hier

Maak interactieve grafieken in IONIC 2

Ionische 2 opzetten

Een Ionic 2-app maken

Een nieuwe pagina toevoegen

Een javascript-grafiek maken

Opsommen

Procedures - Meest populaire artikelen

Hoe Download Instagram foto's: alles wat u moet weten

Aan de slag met GraM CMS

Hoe u uw JavaScript-code verbergen vanaf de view-bron

Bouw mobiele apps met mobiele apparaten met Google's Flutter

Creëer aantal specifieke CSS-stijlen en lay-outs

Maak een eenvoudige kleurenkaart

Verf een sci-fi game-instelling in Photoshop

Hoe een chatbot-ervaring te ontwerpen

Categorieën