Creați diagrame interactive în ionice 2

Sep 11, 2025

să

Când lucrați într-o echipă mică, acesta tinde să fie dificil să scrieți și să mențineți codul separat pentru Android, IOS și Windows. Aici sunt în imagine cadre hibridice ca ionice. Ele nu numai că ne permit să scriem o singură bucată de cod care poate fi utilizată pe toate cele trei platforme, dar înseamnă că putem face acest lucru utilizând stiva noastră tehnică existentă.

În acest tutorial vom explora cum să abordăm o sarcină comună, cum ar fi vizualizarea datelor în Ionic 2, una dintre cele mai promițătoare cadre hibride de aplicații de acolo. Voi folosi Biblioteca Chart FusionCharts JavaScript (FusionCharts.com), pentru acest proiect, deoarece oferă o bibliotecă mare de peste 90 de diagrame, este compatibilă cu fiecare dispozitiv și browser și este foarte ușor de lucrat.

Configurarea ionică 2

Pentru a dezvolta aplicații cu Ionic 2, aveți nevoie de NODE.JS Versiunea 4+ și NPM care rulează pe sistemul dvs. de operare. Puteți descărca pachetul NODE.JS de la nodejs.org/en/download. și npm va fi instalat împreună cu ea. Dacă aveți deja o versiune diferită de NODE.JS care rulează și doriți să rulați și versiunea 4+, puteți face asta prin Manager de versiune NODE. .

În continuare trebuie să instalați ionic 2 beta utilizând NPM. Pentru a face acest lucru, alerga NPM Install -G Ionic @ beta În terminalul dvs. dintr-un cont de utilizator cu privilegiile rădăcină (instalează modulul la nivel global). Pentru a simula aplicația ionică, creăm în mai multe platforme, avem nevoie de un modul de nod: Cordova. . Puteți instala acest lucru la nivel global npm install -g cordova .

Suntem gata să creăm prima noastră aplicație ionică. Cu toate acestea, cu această configurare, vom putea vedea numai aplicația într-un browser. Pentru a simula aplicația pentru un dispozitiv IOS sau Android, trebuie să construim modulul de platformă particular la Cordova. În acest tutorial vom construi modulul iOS, deci trebuie să fugiți platformă ionică adaugă iOS .

În cele din urmă, trebuie să instalați Xcode. Veți găsi instrucțiuni pentru acest lucru Aici .

Crearea unei aplicații ionice 2

În acest tutorial, vom crea o aplicație ionică 2 numită "diagrame". Vom crea un dosar "Charts" în directorul de lucru curent și bootstrap aplicația cu o aplicație de probă. Aplicația de probă va conține o pagină de bază, așa cum este descris aici.

Pentru a crea această aplicație, rulați diagrame de pornire ionice - V2 În directorul de lucru curent ( Diagrame este numele aplicației și - V2. îi spune ionic dorim să creăm o aplicație ionică 2). Privind executarea acestei comenzi, a Diagrame Dosarul va fi creat în directorul de lucru curent. Pentru a testa aplicația în browser, navigați la Diagrame Dosar și Run ionică servește . Aceasta va lansa aplicația în browserul dvs. implicit.

Adăugarea unei noi pagini

Acum, să adăugăm o pagină / o componentă la Diagrame aplicație care va crea diagrame JavaScript. În primul rând, vom adăuga doar o pagină simplă HTML cu "Bună ziua" în ea.

În ionic 2, paginile pot fi adăugate la aplicația ionică utilizând @Pagină Decorator (un modul ionic bazat pe componente unghiulare 2), care are acces la funcționalitatea totală a ionică. O pagină minimă de culoare necesită un fișier HTML șablon (care conține marcajul) și un fișier JavaScript (care conține logica necesară). Puteți găsi mai multe detalii despre paginile ionice Aici .

Pentru a crea pagina pe care o vom adăuga Donut-chart.js. și Donut-Chart.html. Fișiere la. Grafice / App / Pagini Dont-diagramă Directory. În fișierul HTML, putem adăuga codul pentru navigarea aplicațiilor și o simplă "Hello World":

 & Lt; Ion-Navbar * Navbar & GT;
& buton MenUtoggle & GT;
  & Lt; Ion-icon Name = "Meniu" & gt; / lt; / ion-icon & gt;
& lt; / buton & gt;
& Lt; Ion-titlu & GT; Hello Ionic & Lt; / Ion-titlu & GT;
& lt; / ion-navbar & gt;

& lt; ion-content & gt;
  & lt; h1 & gt; salut World & Lt; / Div & Gt;
& lt; / ion-content & gt;

În fișierul JavaScript, referință fișierul HTML creat ca șablon pentru această componentă. Din moment ce nu facem nimic fantezist încă, putem adăuga un constructor gol Diagramă .

 import {pagina} din "ionic-angular";

@Pagină({
  Templateurl: "Build / Pagini / Pie-Chart / Pie-Chart.html '
})

Clasa de export ChargePage {
  Constructor () {
  }
}

Tocmai am creat o componentă independentă; Acum trebuie să le conectăm la aplicația principală. Pentru a face acest lucru, trebuie să facem referire la componenta pe care am creat-o în App.js. Fișier în dosarul App și utilizați componenta în Pagini Proprietatea constructorului de componente ale aplicației.

 Import {diagrama} de la "./pages/donut-chart/donut-chart"

Constructor (aplicație, platformă, meniu) {
    // Constructor aplicat implicit
    Acest.app = aplicație;
    the.platform = platformă;
    acest.menu = meniu;
    acest.Iitializepp ();
    // setați paginile aplicației noastre - adăugăm diagramă de donut aici
    acest.pages = [
      {Titlu: "Bine ați venit", Componenta: Helloionicpage},
      {Titlu: "Diagrama Donut", Componenta: ChartSpeage}
    ];

    // face helloionicpage pagina rădăcină (sau prima) - pas implicit
    acest.rootpage = Helloionicpage;
}

După efectuarea acestor modificări, aplicația ionică din browser ar trebui să reîncărcați automat (sau să utilizați din nou ionică de la terminal). Acum, o nouă legătură ar trebui să fie vizibilă în meniul lateral al aplicației și să faceți clic pe că ar trebui să vedeți "Hello World" scris pe ecran.

Crearea unei diagrame JavaScript

Acum este timpul să modificați pagina noastră "Hello World" pentru a crea o diagramă de gogoașă. Pentru a putea utiliza Biblioteca FusionCharts, trebuie să includem mai întâi FusionCharts.js. și FusionCharts.charts.js. Fișiere în www / index.html. fişier.

Sfat rapid: Dacă ambele fișiere sunt în același folder, apoi adăugați FusionCharts.js. va fi suficient, deoarece acest lucru va include automat FusionCharts.charts.js. .

 & lt; script tip = "text / javascript" src = "calea / to / fusioncharts.js" & lt; / scenarit & gt;

Vom modifica acum HTML din pasul anterior pentru a crea un container de diagramă:

 & lt; div id = "charter-container" & lt; / div & gt;

În constructor în Donut-chart.js. , pe care am creat mai sus, trebuie să adăugăm următorul cod pentru a crea graficul în interiorul containerului de diagramă:

 FusionCharts.RaDy (funcția () {
  Var VenityChart = Noi FusionCharts ({{
    Tipul: "Doughnut2d",
    Renderat: "Chart-Container",
    Lățime: "100%",
    Înălțime: '450',
    DataFormat: "JSON",
    sursă de date: {
      "Diagrama": {
        "Caption": "Split de venituri pe categorii de produse",
        "subcapție": "Anul trecut",
        "numerePrefix": "$",
        "PaletteColors": "# 0075C2, # 1AAF5D, # F2C500, # F45B00, # 8E0000",
        // mai multe atribute de diagramă
      },
      "date": [{
          "Etichetă": "alimente",
          "Valoare": "28504"
        } // Mai multe date
      ]
    }
  }).face();
});

În acest cod creăm o nouă diagramă prin constructorul FusionCharts. Proprietățile utilizate sunt explicate pe scurt mai jos:

tip Definește tipul de diagramă

Renderat. este ID-ul containerului în care vrem să facem graficul

lăţime și înălţime sunt utilizate pentru a seta dimensiunile diagramei

Dataformat este formatul în care vom hrăni datele diagramelor (puteți utiliza JSON, precum și XML)

sursă de date Conține cosmetice diagramă în interiorul Schartings diagramă obiect și datele reale care trebuie reprezentate în interiorul date Array.

Deși am arătat doar patru atribute în diagramă Obiect, există mai mult de o sută de alții pe care îi puteți utiliza pentru a îmbunătăți designul diagramei dvs. Puteți citi mai multe despre asta Aici .

După adăugarea acestui cod, executați ionică servește pentru a relansa aplicația. Ar trebui să vedeți o legătură "Donut diagramă" în meniul dvs. lateral. Dacă ați urmărit toate pașii în mod corespunzător, când faceți clic pe acel link, ar trebui să vedeți o diagramă de gogoașă! Dacă nu, consultați codul de pe GitHub Repo pentru acest proiect pentru a vedea unde ați greșit.

Notă: După ce ați verificat-o în browser, utilizați ionică emula iOS. Pentru a încărca aplicația dvs. în simulatorul iOS.

Rezumând

Our doughnut chart representing the revenue split of a hypothetical company by product categories — Diagrama noastră de gogoși reprezentând divizarea veniturilor unei companii ipotetice pe categorii de produse

După cum ați văzut, nu este dificil să începeți cu vizualizarea datelor în Ionic 2. Deși tocmai am făcut o diagramă simplă de gogoși pentru a demonstra procesul, este posibil să se creeze diagrame complexe cu mai multe seturi de date utilizând același proces . Singurul lucru pe care trebuie să-l dați seama este formatul în care FusionCharts acceptă datele pentru tipul de diagramă respectiv. Odată ce ați putea face acest lucru, veți putea face orice diagramă din bibliotecă.

Dacă aveți nevoie de ajutor cu acest subiect sau dacă aveți întrebări cu privire la conținutul acestui tutorial, nu ezitați să mă prindeți pe Twitter .Sunt întotdeauna fericit să vă ajut!

Acest articol a apărut inițial în revista netă Ediția 283; Cumpărați-l aici .

Creați diagrame interactive în ionice 2

Configurarea ionică 2

Crearea unei aplicații ionice 2

Adăugarea unei noi pagini

Crearea unei diagrame JavaScript

Rezumând

să - Cele mai populare articole

Lino PrintMapking: o introducere

Tutorial de artă mixtă: Cum de acuarelă peste opera de artă digitală

Cum să atragă un braț

5 caracteristici noi CSS și cum să le folosească

Cum de a stăpâni Anatomia Creaturii

Cum se creează manga cu un răsucire Wild West

Cum să faci site-ul WordPress multilingv

Boost d3.js diagrame cu gradienți SVG

Categorii