Opret interaktive diagrammer i Ionic 2

Sep 13, 2025

hvordan

Når du arbejder i et lille team, har det tendens til at være svært at skrive og vedligeholde separat kode for Android, IOS og Windows. Det er her, hvor hybridrammer som ioniske kommer ind i billedet. De gør det ikke kun muligt for os at skrive et enkelt stykke kode, der kan bruges på alle tre platforme, men mener, at vi kan gøre det ved at bruge vores eksisterende Tech Stack.

I denne tutorial skal vi undersøge, hvordan man tackler en fælles opgave som datalisualisering i Ionic 2, en af de mest lovende hybrid app rammere derude. Jeg vil bruge FusionCharts JavaScript Chart Library (FusionCharts.com), for dette projekt, da det tilbyder et stort bibliotek på over 90 diagrammer, er kompatibelt med hver enhed og browser, og det er meget nemt at arbejde med.

Opsætning af Ionic 2

For at udvikle apps med Ionic 2, har du brug for node.js version 4+ og npm kører på dit operativsystem. Du kan downloade Node.js-pakken fra nodeejs.org/en/download. og npm vil blive installeret sammen med det. Hvis du allerede har en anden version af node.js kører og vil også køre version 4+, kan du gøre det igennem Node version manager .

Dernæst skal du installere ionisk 2 beta ved hjælp af NPM. At gøre dette, løbe npm installere -g ionic @ beta I din terminal fra en brugerkonto med rod privilegier (vi installerer modulet globalt). For at simulere den ioniske app skaber vi i flere platforme, vi har brug for et mere node modul: Cordova. . Du kan installere dette globalt ved hjælp af NPM Installer -G Cordova .

Vi er nu klar til at oprette vores første ioniske app. Men med denne opsætning vil vi kun kunne se applikationen i en browser. For at simulere appen til en iOS- eller Android-enhed, skal vi bygge det pågældende platformmodul til Cordova. I denne vejledning vil vi bygge iOS-modulet, så du skal køre Ionisk platform Tilføj iOS .

Endelig skal du installere Xcode. Du finder instruktioner til dette her .

Oprettelse af en ionisk 2 app

I denne tutorial skal vi oprette en ionisk 2 app med navnet 'diagrammer'. Vi opretter en 'diagrammer' mappe i din nuværende arbejdskatalog og bootstrap appen med en prøveapplikation. Prøveappet indeholder en basisside, som beskrevet her.

For at oprette denne app, Kør Ioniske Start Charts --v2 i den nuværende arbejdskatalog ( Diagrammer. er navnet på appen og - V2. fortæller ionisk, vi ønsker at oprette en ionisk 2 app). Ved udførelse af denne kommando, a Diagrammer. Mappe oprettes i den aktuelle arbejdskatalog. For at teste appen i browseren, navigér til Diagrammer. mappe og kørsel ionisk tjene . Dette vil lancere appen i din standardbrowser.

Tilføjelse af en ny side

Lad os nu tilføje en side / komponent til Diagrammer. applikation, der vil oprette JavaScript-diagrammer. For det første vil vi bare tilføje en simpel HTML-side med 'Hello World' i den.

I ionisk 2 kan sider tilføjes til den ioniske app ved hjælp af @Side Dekorator (et ionisk modul baseret på vinkel 2 komponenter), som har adgang til den komplette ioniske funktionalitet. En blot-minimumsside kræver en skabelon HTML-fil (som indeholder markupen) og en JavaScript-fil (indeholdende den logik, der er nødvendig). Du kan finde flere detaljer om ioniske sider her .

For at oprette siden tilføjes vi donut-chart.js. og donut-chart.html. filer til Diagrammer / App / Pages Donut-Chart vejviser. I HTML-filen kan vi tilføje koden til app navigation og en simpel 'Hello World' overskrift:

 & lt; Ion-NavBar * NavBar & GT;
& lt; knap menutoggle & gt;
  & lt; ion-ikon navn = "menu" & gt; & lt; / ion-ikon & gt;
& lt; / knap & gt;
& lt; Ion-titel & GT; Hej Ionic & Lt; / Ion-Titel & GT;
& lt; / ion-NavBar & GT;

& lt; ion-content & gt;
  & lt; h1 & gt; Hello World & Lt; / Div & GT;
& lt; / ion-content & gt;

I JavaScript-filen refererer vi til HTML-filen, der er oprettet som skabelonen for denne komponent. Da vi ikke gør noget fancy lige endnu, kan vi bare tilføje en tom konstruktør Chartspage. .

 Import {Side} fra 'ionisk vinkel';

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

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

Vi har netop oprettet en selvstændig komponent; Nu skal vi linke dette til hovedappen. For at gøre dette skal vi referere til den komponent, vi har oprettet i app.js. fil i app-mappen, og brug komponenten i sider Ejendom af app komponentkonstruktøren.

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

Constructor (app, platform, menu) {
    // Standard App Constructor
    denne.app = app;
    this.platform = platform;
    this.menu = menu;
    denne.initializeapp ();
    // Indstil vores apps sider - vi tilføjer donut diagram her
    dette.pages = [
      {titel: 'Velkommen', komponent: helloionicpage},
      {Titel: 'Donut Diagram', Komponent: Chartspage}
    ];

    // gøre helloionicpage rod (eller første) side - standard trin
    denne.rootpage = helloionicpage;
}

Efter at have foretaget disse ændringer, skal den ioniske app i browseren automatisk genindlæs (eller bruge ionisk tjener fra terminalen igen). Nu skal et nyt link være synligt i sidemenuen på appen, og ved at klikke på, at du skal se 'Hello World' skrevet på skærmen.

Oprettelse af et JavaScript-diagram

Nu er det tid til at ændre vores 'Hello World' side for at oprette et donutdiagram. For at kunne bruge FusionCharts-biblioteket skal vi først medtage fusioncharts.js. og fusioncharts.charts.js. filer i www / index.html. fil.

Hurtig tip: Hvis begge filer er i samme mappe, og tilføj derefter fusioncharts.js. vil være nok, da dette automatisk vil indeholde fusioncharts.charts.js. .

 & lt; script type = "tekst / javascript" src = "sti / til / fusioncharts.js" & gt; & lt; / script & gt;

Vi vil nu ændre HTML fra det foregående trin for at oprette en diagrambeholder:

 & lt; div id = "diagrambeholder" & gt; / lt; / div & gt;

I konstruktøren i donut-chart.js. , som vi oprettede ovenfor, skal vi tilføje følgende kode for at oprette diagrammet inde i diagrambeholderen:

 FusionCharts.ready (funktion () {
  VAR REVENUECHART = NYE FUSIONCHARTS ({
    Type: 'Doughnut2d',
    RENDERAT: 'Diagrambeholder',
    Bredde: '100%',
    Højde: '450',
    DATAFORMAT: 'JSON',
    datakilde: {
      "Diagram": {
        "Caption": "Split af indtægter efter produktkategorier",
        "Subcaption": "Sidste år",
        "nummerPrefix": "$",
        "PaletteColors": "# 0075C2, # 1AAF5D, # F2C500, # F45B00, # 8E0000",
        // Flere diagramattributter
      },
      "data": [{
          "Label": "mad",
          "Værdi": "28504"
        } // Flere data
      ]
    }
  }). gøre ();
});

I denne kode skaber vi et nyt diagram gennem FusionCharts 'konstruktør. De anvendte egenskaber forklares kort nedenfor:

type Definerer typen af diagrammet

renderat. er containerens id, hvor vi ønsker at gøre diagrammet

bredde og højde bruges til at indstille diagrammets dimensioner

DATAFORMAT. er formatet, hvor vi skal fodre diagramdataene (du kan bruge JSON såvel som XML)

datakilde Indeholder diagram kosmetik inde i fusioncharts diagram objekt og de faktiske data, der skal plottes inde i data array

Selvom jeg kun har vist fire attributter i diagram Objekt, der er mere end hundrede andre, du kan bruge til at forbedre dit diagrams design. Du kan læse mere om det her .

Når denne kode er tilføjet, Kør ionisk tjene at genoprette appen. Du skal se et 'Donut Chart' link i din side menu. Hvis du fulgte alle mine trin korrekt, når du klikker på det link, skal du se et donutdiagram! Hvis ikke, henvises koden på Github repo for dette projekt at se, hvor du gik galt.

Bemærk: Efter at have kontrolleret det i browseren, brug ioniske emulere iOS. For at indlæse din app i iOS-simulatoren.

Opsummering

Our doughnut chart representing the revenue split of a hypothetical company by product categories — Vores Donut-diagram, der repræsenterer indtægtsdelen af et hypotetisk selskab med produktkategorier

Som du lige har set, er det ikke svært at komme i gang med datavisualisering i Ionic 2. Selvom jeg lige har lavet et simpelt donutdiagram for at demonstrere processen, er det muligt at oprette komplekse diagrammer med flere datasæt ved hjælp af samme proces . Det eneste du skal finde ud af, er det format, hvor fusioncharts accepterer dataene for den pågældende diagramtype. Når du først kan gøre det, vil du være i stand til at lave noget diagram fra biblioteket.

Hvis du har brug for hjælp til dette emne, eller hvis du har spørgsmål om indholdet af denne vejledning, er du velkommen til at fange mig på twitter. .Jeg er altid glad for at hjælpe!

Denne artikel optrådte oprindeligt i Net Magazine. Udgave 283; Køb det her .

Opret interaktive diagrammer i Ionic 2

Opsætning af Ionic 2

Oprettelse af en ionisk 2 app

Tilføjelse af en ny side

Oprettelse af et JavaScript-diagram

Opsummering

hvordan - Mest populære artikler

Pureref: Sådan bruges billedreferenceværktøjet

Arbejdsbilledmaske Magic med Houdini

Sådan korrigeres en fejlfri sammensætning

Sådan opretter du en papircraft robot

Opret en wobbly tekst effekt med JavaScript

Sådan opretter du furry tegneseriefigurer

Tilføj visuelle signaler til dit websted

Sådan oprettes et vintermiljø

Kategorier