Utwórz interaktywne wykresy w jonowym 2

Feb 7, 2026

Jak

Kiedy pracujesz w małym zespole, trudno jest napisać i utrzymywać oddzielny kod dla Androida, iOS i okien. Tam pojawiają się ramy hybrydowe, takie jak jonik. Nie tylko pozwalają nam napisać pojedynczy kod, który może być używany na wszystkich trzech platformach, ale oznacza, że możemy to zrobić za pomocą naszej istniejącej stosu technicznego.

W tym samouczku zamierzamy zbadać, jak rozwiązać wspólne zadanie, takie jak wizualizacja danych w IIONIC 2, jedna z najbardziej obiecujących struktury aplikacji hybrydowych. Wykorzystam bibliotekę Wykres JavaScript Fusioncharts (Fusioncharts.com), w tym projekcie, ponieważ oferuje dużą bibliotekę o ponad 90 wykresach, jest kompatybilny z każdym urządzeniem i przeglądarką i jest bardzo łatwy do pracy.

Konfigurowanie jonika 2

Aby opracować aplikacje z IIONIC 2, potrzebujesz Node.js wersja 4+ i NPM działa w systemie operacyjnym. Możesz pobrać pakiet węzła. nodejs.org/en/download. a NPM zostanie zainstalowany wraz z nim. Jeśli masz już inną wersję Node.js działa i chcesz również uruchomić wersję 4+, możesz to zrobić Node Version Manager. .

Następnie musisz zainstalować Ionic 2 beta za pomocą NPM. Zrobić to, uruchom NPM install -g jonic @ beta W terminalu z konta użytkownika z przywilejami root (instalujemy moduł globalnie). Aby symulować aplikację jonową, tworzymy w wielu platformach, potrzebujemy jeszcze jednego modułu węzła: Cordova. . Możesz zainstalować to na całym świecie NPM install -g cordova .

Jesteśmy teraz gotowi do utworzenia naszej pierwszej aplikacji jonowej. Jednak z tym konfiguracją będziemy mogli zobaczyć aplikację w przeglądarce. Aby symulować aplikację na urządzenie IOS lub Android, musimy zbudować ten konkretny moduł platformy do Cordova. W tym samouczku będziemy budować moduł IOS, więc musisz uruchomić platforma jonowa dodaj IOS .

Wreszcie musisz zainstalować XCode. Znajdziesz instrukcje dla tego tutaj .

Tworzenie aplikacji jonowej 2

W tym samouczku zamierzamy utworzyć aplikację jonową 2 nazwę "wykresy". Utworzymy folder "wykresów" w bieżącym katalogu roboczym i bootstrap aplikacji za pomocą przykładowej aplikacji. Aplikacja Przykładowa będzie zawierała podstawową stronę, jak opisano tutaj.

Aby utworzyć tę aplikację, uruchom Jonowe wykresy startowe --v2 W obecnym katalogu roboczym ( Wykresy to nazwa aplikacji i --v2. Powiedzi IIONIC chcemy utworzyć aplikację jonową 2). Na wykonaniu tego polecenia, a Wykresy Folder zostanie utworzony w bieżącym katalogu roboczym. Aby przetestować aplikację w przeglądarce, przejdź do Wykresy folder i uruchomiony Podawanie jonowe . Spowoduje to uruchomienie aplikacji w domyślnej przeglądarce.

Dodawanie nowej strony

Teraz dodajmy stronę / komponent do Wykresy Aplikacja, która utworzy wykresy JavaScript. Po pierwsze, po prostu dodamy prostą stronę HTML z "Hello World" w nim.

W joniku 2 strony można dodać do aplikacji jonowej za pomocą @Strona Dekorator (moduł jonowy oparty na składnikach kątowych), który ma dostęp do pełnej funkcjonalności jonowej. Naga minimalna strona wymaga szablonu pliku HTML (który zawiera znacznik) i plik JavaScript (zawierający potrzebną logikę). Więcej informacji na temat stron jonowych można znaleźć tutaj .

Aby utworzyć stronę, którą dodamy pączek i Donut-Chart.html. pliki do Wykresy / aplikacja / strony Pączek informator. W pliku HTML możemy dodać kod nawigacji aplikacji i prosty "Hello World" nagłówku:

 Jon-Navbar * Navbar & GT;
& LT; przycisk Menutoggle & GT;
  & LT; Ikona jonowa = "Menu" & GT; & LT; / ION-Icon & GT;
& lt; / button & gt;
& lt; jon-title & GT; Hello Ionic '/ Ion-Title & GT;
& LT; / ION-NAVBAR & GT;

& lt; jon-content & gt;
  & LT; H1 & GT; Hello World & Div & GT;
& LT; / ION-Content & GT;

W pliku JavaScript odwołujemy się do pliku HTML utworzonego jako szablon tego komponentu. Ponieważ jeszcze nie robimy nic nadzorczego, możemy po prostu dodać pusty konstruktor Chartspage. .

 Importuj {strona} z "jonika-kątowa";

@Strona({
  Szablonurl: "Budowa / strony / wykres / wykres cipki.html"
})

Eksportuj klasy Chartspage {
  konstruktor () {
  }
}

Właśnie stworzyliśmy samodzielny składnik; Teraz musimy połączyć to do głównej aplikacji. Aby to zrobić, musimy odwołać się do komponentu, który stworzyliśmy w app.js. Plik w folderze aplikacji i użyj komponentu w strony właściwość konstruktora komponentu aplikacji.

 Importuj {Chartspage} z "./pages/donut-chart/donut-chart"

konstruktor (aplikacja, platforma, menu) {
    // Domyślny konstruktor aplikacji
    ta aplikacja;
    ta.platform = platforma;
    to.menu = menu;
    to.initializeApp ();
    // Ustaw strony naszej aplikacji - dodamy tutaj wykres pączkowy
    to.pages = [
      {tytuł: 'Welcome', komponent: HelloionicPage},
      {Tytuł: "Wykres pączkowy", komponent: Chartspage}
    ];

    // Make HelloionicPage The Root (lub First) Page - Domyślny krok
    to.rootpage = helloionicpage;
}

Po dokonaniu tych zmian aplikacja jonowa w przeglądarce powinna automatycznie ładować (lub użyj joniki podawania z terminala). Teraz nowe łącze powinno być widoczne w boku menu aplikacji, a na kliknięciu, który należy zobaczyć "Hello World" na ekranie.

Tworzenie wykresu javascript

Teraz nadszedł czas, aby zmodyfikować stronę "Hello World", aby utworzyć wykres pączkowy. Aby móc korzystać z biblioteki Fusioncharts, musimy najpierw zawierać fusioncharts.js. i fusioncharts.Charts.js. Pliki w. www / index.html. plik.

Szybka wskazówka: Jeśli oba pliki są w tym samym folderze, a następnie dodanie fusioncharts.js. wystarczy, ponieważ będzie to automatycznie fusioncharts.Charts.js. .

 ° C
  
   Teraz modyfikujemy HTML z poprzedniego kroku, aby utworzyć kontener wykresów:
  
   Div ID = "Container" i GT; & LT; / Div & GT;

W konstruktorze pączek , Które stworzyliśmy powyżej, musimy dodać następujący kod, aby utworzyć wykres w kontenerze wykresu:

 FusionCharts.Ready (funkcja () {
  var revenuechart = nowe fusioncharts ({{
    Typ: "Doughnut2d",
    Renderat: "Container",
    Szerokość: "100%",
    Wysokość: "450",
    dataformat: "json",
    źródło danych: {
      "Wykres": {
        "Podpis": "Split of Revenue według kategorii produktów",
        "subcaption": "w zeszłym roku",
        "NumberPrefix": "$",
        "Paletetecolors": "# 0075C2, # 1AAF5D, # F2C500, # F45B00, # 8E0000",
        // Więcej atrybutów wykresów
      },
      "Dane": [{
          "Etykieta": "jedzenie",
          "Wartość": "28504"
        } // Więcej danych
      ]
    }
  }).renderowanie();
});

W tym kodzie tworzymy nowy wykres przez konstruktor Fusioncharts. Użyte właściwości są krótko wyjaśnione poniżej:

rodzaj Określa typ wykresu

renderat. jest identyfikator kontenera, w którym chcemy, aby wykres

szerokość i wysokość są używane do ustawiania wymiarów wykresów

Format danych Czy format, w którym zamierzamy nakarmić dane wykresu (możesz użyć JSON, a także XML)

źródło danych Zawiera kosmetyki wykresu wewnątrz fusioncharts wykres obiekt i rzeczywiste dane, które należy wykreślać wewnątrz dane szyk

Chociaż pokazałem tylko cztery atrybuty w wykres Obiekt, istnieje ponad stu innych, których możesz użyć, aby poprawić projekt wykresu. Możesz przeczytać więcej o tym tutaj .

Gdy ten kod zostanie dodany, uruchom Podawanie jonowe Aby oderwać aplikację. Powinieneś zobaczyć link "wykres pączkowy" w menu bocznym. Jeśli prawidłowo przestrzegasz wszystkich moich kroków, gdy klikniesz ten link, powinieneś zobaczyć wykres pączkowy! Jeśli nie, zapoznaj się z kodem na Github Repo dla tego projektu aby zobaczyć, gdzie poszedłeś źle.

Uwaga: Po sprawdzeniu go w przeglądarce użyj JONIC EUMUMUL IOS. Aby załadować aplikację w symulatorze iOS.

Podsumowując

Our doughnut chart representing the revenue split of a hypothetical company by product categories — Nasz wykres pączkowy reprezentujący podział przychodów spółki hipotetycznej według kategorii produktów

Jak tylko widziałem, nie jest trudno zacząć od wizualizacji danych w IIONIC 2. Chociaż właśnie wykonałem prosty wykres pączkowy, aby zademonstrować proces, możliwe jest tworzenie złożonych wykresów z wieloma zbiorami danych przy użyciu tego samego procesu . Jedyną rzeczą, której potrzebujesz, aby dowiedzieć się, jest formatem, w którym Fusioncharts akceptuje dane dla tego konkretnego typu wykresu. Gdy potrafisz to zrobić, będziesz mógł wykonać dowolną kartę z biblioteki.

Jeśli potrzebujesz pomocy w tym temacie lub masz jakiekolwiek pytania dotyczące treści tego samouczka, zacznij mnie złapać na Twitterze .Zawsze chętnie pomogę!

Ten artykuł pierwotnie pojawił się magazyn netto. wydać 283; Kupuj tutaj .

Utwórz interaktywne wykresy w jonowym 2

Konfigurowanie jonika 2

Tworzenie aplikacji jonowej 2

Dodawanie nowej strony

Tworzenie wykresu javascript

Podsumowując

Jak - Najpopularniejsze artykuły

Ustawienia prywatności na Facebooku: Jak prowadzić profil prywatny

Co znajduje się w kątach 8?

Wszystko, co musisz wiedzieć o Kod JavaScript

Zmiana koloru Photoshopa: 2 narzędzia, które musisz znać

Twórz style i układy CSS Ilość

Mapy optymalizacji kursu konwersji

Stwórz realistyczny rycerz fantasy

Utwórz tekstury gotowe do gry za pomocą malarza substancji

Kategorie