Luo vuorovaikutteisia kaavioita Ionic 2

Sep 13, 2025

Miten tehdään

Kun työskentelet pienessä tiimissä, se on vaikea kirjoittaa ja ylläpitää erillistä koodia Android, iOS ja Windows. Siellä hybridit, kuten ioni, tulevat kuvaan. He eivät ainoastaan anna meille kirjoittaa yhtä koodia, jota voidaan käyttää kaikilla kolmella alustalla, mutta se tarkoittaa, että voimme tehdä niin olemassa olevaa teknistä pinoa.

Tässä opetusohjelmassa aiomme tutkia, miten käsitellään yhteistä tehtävää, kuten datan visualisointi Ionic 2: ssa, yksi lupaavimmista hybridisovelluksista siellä. Käytän FusionCharts JavaScript Chart Library (FusionCharts.com), sillä se tarjoaa suuren kirjaston yli 90 kaavion, on yhteensopiva jokaisen laitteen ja selaimen kanssa ja on erittäin helppo työskennellä.

Ionic 2: n perustaminen

Jotta voit kehittää sovelluksia Ionic 2: n kanssa, tarvitset solmun.js version 4+ ja NPM käynnissä OS. Voit ladata solmun.js-paketin nodej.org/en/download ja NPM asennetaan sen kanssa. Jos sinulla on jo erilainen versio Node.js käynnissä ja haluat käyttää myös versiota 4+, voit tehdä sen läpi Solmu Version Manager .

Seuraavaksi sinun on asennettava ioninen 2 beta käyttäen NPM: ää. Tehdä tämä, ajaa NPM Install -g ionic @ beta Terminaalissasi käyttäjätilistä, jossa on juurioikeudet (asennamme moduulin maailmanlaajuisesti). Jos haluat simuloida ionisen sovelluksen, luomme useilla alustoilla, tarvitsemme vielä yhden solmumoduulin: Cordova . Voit asentaa tämän maailmanlaajuisesti NPM Install -g Cordova .

Olemme nyt valmiita luomaan ensimmäinen ioninen sovellus. Tällä asetuksella voit kuitenkin nähdä vain sovelluksen selaimessa. Jos haluat simuloida sovellusta iOS- tai Android-laitteelle, meidän on rakennettava kyseinen alustamoduuli Cordovalle. Tässä opetusohjelmassa rakentamme IOS-moduulia, joten sinun täytyy juosta Ionic Platform Lisää iOS .

Lopuksi sinun on asennettava Xcode. Löydät tämän ohjeet tästä tässä .

Ionic 2 -sovelluksen luominen

Tässä opetusohjelmassa aiomme luoda Ionic 2 -sovelluksen nimeltä "kaaviot". Luomme nykyisen työhakemiston "kaavioiden kansion ja käynnistää sovelluksen näytteenovelluksella. Näytteen sovellus sisältää perussivun, kuten tässä on kuvattu.

Voit luoda tämän sovelluksen, suorita Ionic Start Charts --v2 Nykyisessä työhakemistossa ( Kaaviot on sovelluksen nimi ja --v2 kertoo ionille haluamme luoda ionisen 2-sovelluksen). Tämän komennon suorittamisesta a Kaaviot Kansio luodaan nykyisessä työhakemistossa. Testaa sovellus selaimessa siirry kohtaan Kaaviot kansio ja juoksu ioninen palvella . Tämä käynnistää sovelluksen oletusselaimessasi.

Uuden sivun lisääminen

Lisätään nyt sivu / komponentti Kaaviot Sovellus, joka luo JavaScript-kaavioita. Ensinnäkin lisäämme yksinkertaisen HTML-sivun "Hello World".

Ionic 2: ssa sivuja voidaan lisätä ioniseen sovellukseen @Sivu Sisustorit (ioninen moduuli, joka perustuu kulma-2-komponenttiin), jolla on pääsy täydelliseen ioniin toiminnallisuuteen. Paljaan vähimmäissivun edellyttää mallin HTML-tiedostoa (joka sisältää merkintää) ja JavaScript-tiedosto (joka sisältää tarvittavan logiikan). Löydät lisätietoja ionisista sivuista tässä .

Voit luoda sivun lisäämme donut-chart.js ja donut-chart.html Tiedostot Kaaviot / sovellus / sivut Donut-Chart Hakemisto. HTML-tiedostossa voimme lisätä sovelluksen navigointi koodin ja yksinkertaisen "Hello Worldin" otsikon:

 & lt; ion-navbar * navbar & gt;
& lt; button Menutoggle & GT;
  & lt; ion-kuvake nimi = "MENU" & GT; & LT; / ION-ICON & GT;
& lt; / button & gt;
& lt; ion-otsikko & gt; hello ionic & lt; / ion-otsikko & gt;
& lt; / ion-navbar & gt;

& lt; ion-sisältö & gt;
  & lt; h1 & gt; hello maailma & lt; / div & gt;
& lt; / ion-sisältö & gt;

JavaScript-tiedostossa viitataan tämän komponentin malliksi luotuun HTML-tiedostoon. Koska emme tee mitään hienoa juuri vielä, voimme vain lisätä tyhjän rakentajan Kartahdus .

 Tuonti {sivu} "ioni-kulma";

@Sivu({
  Templateurl: "Rakenna / sivut / Pie-Chart / Pie-Chart.html"
}))

Vientiluokka chartSpage {
  konstruktori () {
  }
}

Olemme juuri luoneet itsenäisen komponentin; Nyt meidän on liitettävä tämä pääohjelmaan. Tätä varten meidän on viitattava siihen, että olemme luoneet app.js tiedosto sovelluskansioon ja käytä komponenttia sivut App Component Constructorin ominaisuus.

 Tuo {chartage} alkaen './pages/donut-Chart/donut-Chart'

konstruktori (sovellus, alusta, valikko) {
    // oletusohjelman konstruktori
    tämä.App = sovellus;
    tämä.platform = alusta;
    tämä.menu = valikko;
    tämä.initializeapp ();
    // Aseta sovelluksen sivut - lisäämme donut-kaaviota täältä
    This.Sages = [
      {Otsikko: "Tervetuloa", Komponentti: HellotionicPage},
      {Otsikko: 'Donut Chart', Component: Charage}
    ];

    // Tee helloionicpage root (tai ensin) -sivulla - oletusvaihe
    tämä.rootPage = helloionicpage;
}

Näiden muutosten tekemisen jälkeen selaimen ioninen sovellus tulee automaattisesti uudelleenlaitteeseen (tai käyttää ionista palvella päätelaitteesta uudelleen). Nyt uusi linkki pitäisi näkyä sovelluksen sivuvalikossa ja napsauttamalla, että sinun pitäisi nähdä "Hello World", joka on kirjoitettu näytölle.

JavaScript-kaavion luominen

Nyt on aika muokata Hello World -sivumme luoda donitsi kaavio. Voit käyttää FusionCharts-kirjastoa, meidän on ensin sisällytettävä fusioncharts.js ja fusioncharts.charts.js tiedostoja www / index.html tiedosto.

Nopea kärki: Jos molemmat tiedostot ovat samassa kansiossa, lisäämällä sitten fusioncharts.js riittää, koska tämä sisältää automaattisesti fusioncharts.charts.js .

 & Lt; Script Type = "Teksti / JavaScript" SRC = "polku / to / fusioncharts.js" & gt; & lt; / script & gt;

Muutetaan nyt HTML edellisestä vaiheesta kaavion säiliön luomiseksi:

 & lt; div id = "chart-kontti" & gt; & lt; / div & gt;

Rakentajalla donut-chart.js Jos olemme luoneet edellä, meidän on lisättävä seuraava koodi kaavion luomiseksi kaavion sisällä:

 FusionCharts.Reedy (toiminto () {
  var revenuechart = uusi fusionCharts ({
    Tyyppi: 'DoughNut2D',
    Renderat: "Karttasäiliö",
    Leveys: "100%",
    Korkeus: "450",
    DataFormat: 'JSON',
    tietolähde: {
      "kaavio": {
        "Kuvateksti": "Tulojen jakautuminen tuoteryhmillä",
        "Subcaption": "Viime vuonna",
        "NumberPrefix": "$",
        "Paletcolors": "# 0075c2, # 1AAF5D, # F2C500, # F45B00, # 8E0000",
        // Lisää kaavion määritteitä
      },
      "Tiedot": [{
          "Label": "Ruoka",
          "Arvo": "28504"
        } // Lisätietoja
      ]
    }
  }). Render ();
});

Tässä koodissa luomme uuden kaavion FusionChartsin rakentajan kautta. Käytetyt ominaisuudet selitetään lyhyesti seuraavasti:

tyyppi Määrittää kaavion tyyppi

renderat on säiliön tunnus, jossa haluamme tehdä kaavion

leveys ja korkeus käytetään kaavion mitat

dataformati Onko muoto, jossa aiomme syöttää kaavion tietoja (voit käyttää JSON ja XML)

tietolähde Sisältää kaavion kosmetiikka FusionChartsissa kartoittaa esine ja todelliset tiedot, jotka on piirretty tiedot array

Vaikka olen osoittanut vain neljä attribuuttia kartoittaa Objekti, on yli sata muuta, joita voit parantaa kaavion suunnittelua. Voit lukea lisää tästä tässä .

Kun tämä koodi lisätään, suorita ioninen palvella APP: n käynnistäminen. Sinun pitäisi nähdä "Donut Chart" -linkki sivuvalikosta. Jos seurasit kaikkiin askeleeni oikein, kun napsautat tätä linkkiä, sinun pitäisi nähdä donut-kaavio! Jos ei, katso koodi GitHub repo tähän hankkeeseen nähdä missä menit pieleen.

Huomaa: Kun olet tarkistanut sen selaimessa, käytä ioninen emuloida iOS Lataa sovelluksesi IOS-simulaattoriin.

Yhteenvetona

Our doughnut chart representing the revenue split of a hypothetical company by product categories — Meidän donitsi kaavio, joka edustaa hypoteettisen yrityksen tuloja tuoteryhmien mukaan

Kuten olette juuri nähnyt, ei ole vaikea aloittaa datan visualisoinnilla Ionic 2. Vaikka olen juuri tehnyt yksinkertaisen donitsi-kaavion prosessin osoittamiseksi, on mahdollista luoda monimutkaisia kaavioita, joissa on useita tietokokouksia käyttäen samaa prosessia . Ainoa asia, jonka sinun on selvitettävä, on muoto, jossa FusionCharts hyväksyy kyseisen kartan tyypin tiedot. Kun voit tehdä sen, voit tehdä minkä tahansa kaavion kirjastosta.

Jos tarvitset apua tämän aiheen kanssa tai jos sinulla on kysyttävää tämän opetusohjelman sisällöstä, voit vapaasti kiinni Twitterissä .Olen aina iloinen voidessani auttaa!

Tämä artikkeli oli alun perin ilmestynyt Net-aikakauslehti numero 283; Osta se täällä .

Luo vuorovaikutteisia kaavioita Ionic 2

Ionic 2: n perustaminen

Ionic 2 -sovelluksen luominen

Uuden sivun lisääminen

JavaScript-kaavion luominen

Yhteenvetona

Miten tehdään - Suosituimmat artikkelit

Ymmärrä luonnollinen kielen käsittely

Luo Jumalan säteet V-Ray

Luo Ripple-vaikutuksia Pixijsin kanssa

Rakenna materiaalisen suunnittelun sovellus, jossa kulma 2

Kuinka lisätä videota interaktiivisille PDF-tiedostoille

Ikä valokuva Photoshop CC

Maalaa muotokuva kuin vanhat mestarit

Rakenna yksinkertainen musiikkisoitin reagoimaan

Luokat