Lag interaktive diagrammer i ionisk 2

Sep 12, 2025

hvordan

[1. 3]

Når du jobber i et lite lag, har det en tendens til å være vanskelig å skrive og vedlikeholde separat kode for Android, iOS og Windows. Det er her hybrid rammer som ionisk kommer inn i bildet. De gjør det ikke bare mulig å skrive et enkelt stykke kode som kan brukes på alle tre plattformene, men mener at vi kan gjøre det ved hjelp av vår eksisterende tekniske stabel.

I denne opplæringen skal vi utforske hvordan man kan takle en felles oppgave som datavisualisering i ionisk 2, en av de mest lovende hybridapprammer der ute. Jeg vil bruke FusionCharts JavaScript Chart Library (FusionCharts.com), for dette prosjektet som det tilbyr et stort bibliotek på over 90 diagrammer, er kompatibelt med hver enhet og nettleser, og er veldig lett å jobbe med.

Sette opp ionisk 2

For å utvikle apper med ionisk 2, trenger du node.js versjon 4+ og NPM som kjører på operativsystemet ditt. Du kan laste ned node.js-pakken fra nodejs.org/en/download og NPM vil bli installert sammen med den. Hvis du allerede har en annen versjon av node.js som kjører og ønsker å kjøre versjon 4+, kan du gjøre det gjennom Node Version Manager .

Deretter må du installere ioniske 2 beta ved hjelp av NPM. For å gjøre dette, løp NPM Installer -G ionisk @ beta I terminalen fra en brukerkonto med root privilegier (vi installerer modulen globalt). For å simulere den ioniske appen skaper vi i flere plattformer, trenger vi en mer nodemodul: Cordova. . Du kan installere dette globalt ved hjelp av NPM Install -G Cordova .

Vi er nå klare til å lage vår første ioniske app. Men med dette oppsettet, vil vi imidlertid bare se søknaden i en nettleser. For å simulere appen for en iOS eller Android-enhet, må vi bygge den aktuelle plattformmodulen til Cordova. I denne opplæringen skal vi bygge IOS-modulen, så du må løpe Ionisk plattform Legg iOS .

Endelig må du installere Xcode. Du finner instruksjoner for dette her .

Opprette en ionisk 2 app

I denne opplæringen skal vi lage en ionisk 2 app kalt "diagrammer". Vi lager en "diagrammappe i din nåværende arbeidskatalog og oppstart av appen med en prøveapplikasjon. Prøveprogrammet vil inneholde en grunnleggende side, som beskrevet her.

For å lage denne appen, løp ioniske startdiagrammer --v2 I den nåværende arbeidskatalogen ( Diagrammer er navnet på appen og --v2. Forteller ionisk vi ønsker å lage en ionisk 2-app). På utførelse av denne kommandoen, a Diagrammer Mappen vil bli opprettet i gjeldende arbeidskatalog. For å teste appen i nettleseren, naviger til Diagrammer mappe og kjøre ionisk tjener . Dette vil starte appen i standard nettleseren din.

Legge til en ny side

La oss nå legge til en side / komponent til Diagrammer Søknad som vil opprette Javascript-diagrammer. Først vil vi bare legge til en enkel HTML-side med 'Hello World' i den.

I ionisk 2 kan sider legges til ioniske appen ved hjelp av @Side Dekorator (en ionisk modul basert på vinkel 2 komponenter), som har tilgang til den komplette ioniske funksjonaliteten. En bare-minimums side krever en mal HTML-fil (som inneholder markeringen), og en JavaScript-fil (som inneholder den nødvendige logikken). Du finner flere detaljer om ioniske sider her .

For å lage siden vil vi legge til doughnut-chart.js. og doughnut-chart.html. filer til Diagrammer / App / Sider Donut-Chart katalog. I HTML-filen kan vi legge til koden for App Navigation og en enkel "Hello World" -hodet:

 & lt; ion-navbar * Navbar & gt;
& lt; button menutoggle & gt;
  & lt; ion-icon name = "Meny" & gt; & lt; / ion-ikon & gt;
& lt; / knappen & gt;
& lt; ion-title & gt; Hei ionic & lt; / ion-title & gt;
& lt; / ion-navbar & gt;

& lt; ion-content & gt;
  & lt; h1 & gt; hei verden & lt; / div & gt;
& lt; / ion-content & gt;

I Javascript-filen refererer vi til HTML-filen som er opprettet som malen for denne komponenten. Siden vi ikke gjør noe fancy ennå, kan vi bare legge til en tom konstruktør ChartSpage. .

 Importer {side} fra 'ionisk-vinkel';

@Side({
  Templateurl: 'Build / Pages / Pie-Chart / Pie-Chart.html'
})

Eksporter klasse ChartsPage {
  konstruktør () {
  }
}

Vi har nettopp opprettet en frittstående komponent; Nå må vi koble dette til hovedappen. For å gjøre dette må vi referere til komponenten vi har opprettet i app.js. fil i app-mappen, og bruk komponenten i Sider Eiendom av App Component Constructor.

 Importer {ChartSpage} fra './pages/donut-chart/donut-chart'

Constructor (app, plattform, meny) {
    // standard app konstruktør
    this.app = app;
    This.platform = plattform;
    this.menu = meny;
    denne.initializepp ();
    // Sett våre apps sider - vi legger donutdiagrammet her
    This.pages = [
      {Title: 'Velkommen', Komponent: HelloionicPage},
      {Tittel: 'Donut Chart', Komponent: ChartSpage}
    ];

    // gjør halloionicpage roten (eller første) siden - Standard trinn
    this.rootpage = halloionicpage;
}

Etter at du har gjort disse endringene, bør den ioniske appen i nettleseren auto-reload (eller bruke ionisk tjener fra terminalen igjen). Nå skal en ny lenke være synlig i siden-menyen i appen, og på å klikke på at du bør se 'Hello World' skrevet på skjermen.

Opprette et Javascript-diagram

Nå er det på tide å endre vår "Hello World" -side for å lage et donutdiagram. For å kunne bruke FusionCharts-biblioteket, må vi først inkludere fusioncharts.js. og fusioncharts.charts.js. filer i den www / index.html. fil.

Hurtig tips: Hvis begge filene er i samme mappe, så legger du til fusioncharts.js. vil være nok, da dette automatisk vil inkludere fusioncharts.charts.js. .

 & lt; script type = "tekst / javascript" src = "bane / to / fusioncharts.js" & gt;

Vi vil nå endre HTML fra forrige trinn for å lage en diagrambeholder:

 & lt; div id = "chart-container" & gt;

I konstruktøren i doughnut-chart.js. , som vi opprettet ovenfor, må vi legge til følgende kode for å lage diagrammet inne i diagrambeholderen:

 FusionCharts.Ready (funksjon () {
  VAR REVENUECART = nye fusjonskart ({
    Type: 'Doughnut2D',
    Renderat: 'Chart-Container',
    Bredde: '100%',
    Høyde: '450',
    DATAFORMAT: 'JSON',
    datakilde: {
      "diagram": {
        "Caption": "Split of Revenue av produktkategorier",
        "Underkapsjon": "I fjor",
        "NumberPrefix": "$",
        "Palettecolors": "# 0075C2, # 1AAF5D, # F2C500, # F45B00, # 8E0000",
        // flere diagramattributter
      },
      "Data": [{
          "Etikett": "mat",
          "Verdi": "28504"
        } // Flere data
      ]
    }
  }). Render ();
});

I denne koden skaper vi et nytt diagram gjennom FusionCharts 'Constructor. Egenskapene som brukes, forklares kort nedenfor:

type Definerer typen diagram

Rolderat er agen til beholderen der vi ønsker å gjøre diagrammet

bredde og høyde brukes til å angi diagramdimensjonene

DATAFORMAT er formatet der vi skal mate diagramdataene (du kan bruke JSON samt XML)

datakilde inneholder diagram kosmetikk inne i fusjonscharts Figur objekt og de faktiske dataene som skal plottes inn i data array

Selv om jeg bare har vist fire attributter i Figur Objekt, det er mer enn hundre andre du kan bruke til å forbedre diagrammets design. Du kan lese mer om det her .

Når denne koden er lagt til, kjør ionisk tjener å gjenopprette appen. Du bør se en "Donut Chart" -kobling i sidemenyen din. Hvis du fulgte alle mine skritt riktig, når du klikker den linken, bør du se et donutdiagram! Hvis ikke, vennligst se koden på Github repo for dette prosjektet å se hvor du gikk galt.

Merk: Etter å ha sjekket det i nettleseren, bruk ionisk etterligner iOS. Slik legger du på appen din i iOS-simulatoren.

Oppsummering

Our doughnut chart representing the revenue split of a hypothetical company by product categories — Vårt donutdiagram som representerer inntektsdelingen av et hypotetisk selskap av produktkategorier

Som du nettopp har sett, er det ikke vanskelig å komme i gang med datavisualisering i ionisk 2. Selv om jeg nettopp har laget et enkelt donutdiagram for å demonstrere prosessen, er det mulig å lage komplekse diagrammer med flere datasett som bruker samme prosess . Det eneste du trenger å finne ut er formatet der FusionCharts aksepterer dataene for den aktuelle karttype. Når du er i stand til å gjøre det, vil du kunne gjøre et diagram fra biblioteket.

Hvis du trenger hjelp med dette emnet, eller hvis du har spørsmål om innholdet i denne veiledningen, er du velkommen til å fange meg på Twitter .Jeg er alltid glad for å hjelpe!

Denne artikkelen opprinnelig dukket opp i Net Magazine. utgave 283; Kjøp det her .

Lag interaktive diagrammer i ionisk 2

Sette opp ionisk 2

Opprette en ionisk 2 app

Legge til en ny side

Opprette et Javascript-diagram

Oppsummering

hvordan - Mest populære artikler

Lag din egen stylus med bare 4 husholdningsartikler (seriøst)

Jamstack: Bygg raskere, mer effektive nettsteder i dag

Kom i gang med Redux Thunk

Affinity Designer: Slik bruker du eksportpersonen

Legg til visuelle signaler til nettstedet ditt

Hvordan tegne et landskap med pasteller

Hvordan få mer fra gifs

Hvordan kombinere skulpturerte og malte forskyvningskart

Kategorier