Vytvořit interaktivní grafy v iontovém 2

Jan 31, 2026

jak

Když pracujete v malém týmu, má tendenci být obtížné psát a udržovat samostatný kód pro Android, IOS a Windows. To je místo, kde se do obrázku přicházejí hybridní rámce jako iontové. Nejen nám umožňují napsat jeden kus kódu, který lze použít na všech třech platformách, ale znamená to, že můžeme tak učinit pomocí našeho stávajícího tech zásobníku.

V tomto tutoriálu probíháme, jak řešit společný úkol, jako je vizualizace dat v iontovém 2, jeden z nejvíce slibnějších hybridních rámců app. Budu používat knihovnu fúzních diagramů JavaScript (fuseCharts.com), protože tento projekt nabízí velkou knihovnu přes 90 grafů, je kompatibilní s každým zařízením a prohlížečem a je velmi snadné pracovat.

Nastavení iontového 2

Chcete-li vytvořit aplikace s iontovým 2, potřebujete node.js verze 4+ a npm běží v operačním systému. Můžete si stáhnout balíček node.js od nodejs.org/en/download. a NPM bude nainstalován spolu s ním. Pokud již máte jinou verzi node.js spuštění a chcete spustit verzi 4+, můžete to udělat Správce verzí uzlu .

Dále je třeba instalovat iontovou 2 beta pomocí NPM. Chcete-li to udělat, spusťte NPM Instalovat -G iontic @ beta Ve vašem terminálu z uživatelského účtu s oprávněními uživatele root (instalujeme modul globálně). Chcete-li simulovat iontovou aplikaci, vytváříme se ve více platformách, potřebujeme ještě jeden modul uzlů: Cordova . Toto globálně můžete nainstalovat NPM Instalovat -G Cordova .

Nyní jsme připraveni vytvořit naši první iontovou aplikaci. S tímto nastavením však budeme moci zobrazit pouze aplikaci v prohlížeči. Chcete-li simulovat aplikaci pro zařízení iOS nebo Android, musíme vytvořit konkrétní modul plošiny na Cordová. V tomto tutoriálu budeme budovat modul IOS, takže musíte běžet iontová platforma přidat ios .

Konečně musíte instalovat XCODE. Najdete zde pokyny tady .

Vytvoření iontové aplikace 2

V tomto tutoriálu budeme vytvořit iontovou aplikaci s názvem "grafy". Vytvoříme složku "Grafy" ve svém aktuálním pracovním adresáři a bootstrap aplikace s ukázkovou aplikací. Vzorová aplikace bude obsahovat základní stránku, jak je zde popsáno.

Chcete-li vytvořit tuto aplikaci, spusťte iontové startovní grafy --v2 v aktuálním pracovním adresáři ( grafy je název aplikace a --v2. Říká Ionic, který chceme vytvořit Ionic 2 App). Při provádění tohoto příkazu, a grafy Složka bude vytvořena v aktuálním pracovním adresáři. Chcete-li otestovat aplikaci v prohlížeči, přejděte na grafy Složka a běh iontový sloužit . To spustí aplikaci ve výchozím prohlížeči.

Přidání nové stránky

Nyní přidejte stránku / komponentu grafy Aplikace, která vytvoří grafy JavaScript. Za prvé, budeme jen přidat jednoduchou stránku HTML s 'Hello World' v něm.

V iontovém 2 mohou být stránky přidány do iontové aplikace pomocí @Strana Dekoratér (iontový modul založený na úhlových 2 komponentách), který má přístup k kompletní iontové funkčnosti. Holá minimální stránka vyžaduje šablonu HTML soubor (který obsahuje značku) a soubor JavaScript (obsahující logiku potřebný). Více informací o ionských stránkách naleznete na stránkách tady .

Chcete-li vytvořit stránku, kterou přidáme Donut-Chart.js. a Donut-Chart.html. soubory do. Grafy / App / Stránky Donut-Graf adresář. V souboru HTML můžeme přidat kód pro navigaci aplikací a jednoduchý světový svět ':

 & lt; ION-NAVBAR * NAVBAR & GT;
& lt; tlačítko menutogle & gt;
  & lt; ion-icon název = "menu" & gt; & lt; / iontová ikona & gt;
& lt; / tlačítko & gt;
& lt; iontový titul & gt; hello iontový & lt; / iontový titul & gt;
& lt; / ion-navbar & gt;

& lt; iontový obsah & gt;
  HELLO H1 & GT; Ahoj World & Lt; / div & gt;
& lt; / iontový obsah & gt;

V souboru JavaScript odkazujeme na soubor HTML vytvořený jako šablona pro tuto komponentu. Protože ještě neděláme nic fantazie, můžeme jen přidat prázdný konstruktor ChartSpage. .

 Import {Stránka} z "iontového úhlového";

@Strana({
  TemplateUrl: 'Build / Stránky / Pie-Chart / Pie-Chart.html'
})

Exportní třída ChartSpage {
  konstruktor () {
  }
}

Právě jsme vytvořili samostatnou složku; Nyní to musíme propojit do hlavní aplikace. Chcete-li to udělat, musíme odkazovat na složku, kterou jsme vytvořili v app.js. soubor ve složce App a použijte komponentu v Stránky Vlastnost konstruktoru komponenty App.

 Import {ChartSpage} z './pages/donut-chart/donut-chart'

konstruktor (aplikace, platforma, menu) {
    // výchozí aplikace constructor
    this.app = app;
    This.platform = platforma;
    this.menu = menu;
    this.initializeApp ();
    // Nastavte stránky naše aplikace - přidáváme zde graf Donut
    this.pages = [
      {Název: 'Vítejte', Složka: HelloionicPage},
      {Název: 'Donut Graf', Složka: ChartSpage}
    ];

    // provést heloionicpage kořen (nebo první) stránku - výchozí krok
    this.rootpage = helloionicpage;
}

Po provedení těchto změn by iontová aplikace v prohlížeči by měla automaticky znovu načíst (nebo použít iontovou sloužit z terminálu). Nyní by měl být viditelný nový odkaz v bočním menu aplikace a kliknutím na kliknutí, že byste měli vidět "Hello World" na obrazovce.

Vytvoření diagramu JavaScriptu

Nyní je čas upravit naši stránku "Ahoj World" vytvořit graf donut. Chcete-li použít knihovnu FusionCharts, musíme nejprve zahrnout fusioncharts.js. a fuseCharts.charts.js. soubory v. \ t www / index.html. soubor.

Rychlý tip: Pokud jsou soubory ve stejné složce, pak přidejte fusioncharts.js. bude stačit, protože to bude automaticky zahrnovat fuseCharts.charts.js. .

 & lt; typ script = "text / javascript" src = "cesta / do / fusioncharts.js" & gt; <& gt; / script & gt;

Nyní upravíme HTML z předchozího kroku k vytvoření kontejneru grafu:

 & lt; dig id = "graf-kontejner" & gt;

V konstruktoru Donut-Chart.js. , kterou jsme vytvořili výše, musíme přidat následující kód vytvořit graf uvnitř kontejneru grafu:

 FuseChart.Ready (funkce () {
  var revenuechart = nové fusioncharts ({
    Typ: 'Doughnut2d',
    Renderat: "Graf-kontejner", \ t
    šířka: '100%',
    Výška: '450',
    DataFormat: 'JSON',
    zdroj dat: {
      "Graf": {
        "titulek": "Rozdělit příjmy podle kategorií výrobků",
        "Podkaption": "loni",
        "numberprefix": "$",
        "palettecolors": "# 0075c2, # 1AAF5D, # f2c500, # f45b00, # 8E0000,
        // Další atributy grafu
      },
      "Data": [{
          "Label": "Jídlo",
          "Hodnota": "28504"
        } // více dat
      ]
    }
  }).poskytnout();
});

V tomto kódu vytváříme nový graf prostřednictvím konstruktoru FuseCharts. Použité vlastnosti jsou stručně vysvětleny níže:

typ Definuje typ grafu

renderat. je id kontejneru, kde chceme poskytnout graf

šířka a výška slouží k nastavení rozměrů grafu

DataFormat. je formát, ve kterém se chystáme podávat data grafu (můžete použít JSON stejně jako XML)

zdroj dat Obsahuje kosmetiku grafu uvnitř fuseCharts schéma objekt a skutečná data, která mají být vyneseny uvnitř data array.

I když jsem ukázal pouze čtyři atributy schéma Objekt, existuje více než sto dalších, můžete použít ke zlepšení designu vašeho grafu. Můžete si o tom přečíst více tady .

Jakmile je tento kód přidán, spusťte iontový sloužit Chcete-li aplikaci znovu získat. Měli byste vidět odkaz "Graf" Donut v bočním menu. Pokud jste správně sledovali všechny své kroky, když kliknete na tento odkaz, měli byste vidět donut! Pokud ne, podívejte se na kód GitHub repo pro tento projekt vidět, kde jste se pokazili.

Poznámka: Po kontrole v prohlížeči použijte Ionic emulovat Ios. Chcete-li načíst aplikaci do simulátoru IOS.

Sčítání

Our doughnut chart representing the revenue split of a hypothetical company by product categories — Náš donutový graf představující rozdělení příjmů hypotetické společnosti podle kategorií produktů

Jak jste se právě viděli, není těžké začít s vizualizací dat v iontovém 2. I když jsem právě udělal jednoduchý graf koblihy . Jediná věc, kterou potřebujete zjistit, je formát, ve kterém fuseCharts přijímá data pro daný typ grafu. Jakmile to budete moci udělat, budete moci učinit nějaký graf z knihovny.

Pokud potřebujete pomoc s tímto tématem nebo máte nějaké dotazy týkající se obsahu tohoto tutoriálu, neváhejte mě chytit na Twitteru .Vždycky jsem rád pomohl!

Tento článek se původně objevil Čistý časopis Vydání 283; koupit to tady .

Vytvořit interaktivní grafy v iontovém 2

Nastavení iontového 2

Vytvoření iontové aplikace 2

Přidání nové stránky

Vytvoření diagramu JavaScriptu

Sčítání

jak - Nejoblíbenější články

Chiaroscuro Art: Průvodce krok za krokem

10 Pravidla pro výrobu uživatelsky příjemných webových formulářů

Jak malovat jako mistr 19. století

Jak připojit kresbu

Malování zlomyslného zajíc v akvarelu

8 Essential WordPress bezpečnostní tajemství

Sestavte aplikaci Design materiálu s úhlovým 2

Vytvořte postavu s stylizovaným realismem

Kategorie