İyonik 2'de etkileşimli grafikler oluşturun

Sep 11, 2025
Nasıl Yapılır

Küçük bir takımda çalıştığınızda, Android, iOS ve Windows için ayrı kod yazmak ve korumak zor olma eğilimindedir. Bu, iyonik gibi hibrit çerçevelerin resme girdiği yer. Sadece üç platformda kullanılabilecek tek bir kod parçası yazmamızı sağlamakla kalmaz, ancak mevcut teknoloji yığımızı kullanarak bunu yapabileceğimiz anlamına gelir.

Bu eğitimde, en umut verici hibrit uygulama çerçevelerinden biri olan Ionic 2'de veri görselleştirme gibi ortak bir görevle nasıl başa çıkacağız. Bu proje için bu proje için Fusioncharts JavaScript grafik kütüphanesini (Fusioncharts.com) kullanacağım.

İyonik 2 Ayarlama

İyonik 2 ile Uygulamalar geliştirmek için, OS'nizde çalışan 4+ ve NPM NODE.JS sürümüne ihtiyacınız var. NODE.JS paketini indirebilirsiniz. nodejs.org/tr/download ve NPM ile birlikte kurulacak. Zaten farklı bir NODE.JS'nin farklı bir sürümünüz varsa ve 4+ sürümünü de çalıştırmak istiyorsanız, bunu yapabilirsiniz. Düğüm sürümü yöneticisi .

Daha sonra NPM kullanarak İyonik 2 Beta'yı kurmanız gerekir. Bunu yapmak için koşun npm install -g ionic @ beta Terminalinizde bir kullanıcı hesabından kök ayrıcalıklarıyla (modülü küresel olarak takıyoruz). İyonik uygulamayı simüle etmek için birden fazla platformda yarattığımız, bir düğüm modülüne ihtiyacımız var: Cordova . Bunu küresel olarak kullanarak yükleyebilirsiniz. npm yüklemek -g cordova .

Şimdi ilk İyonik uygulamamızı oluşturmaya hazırız. Ancak, bu kurulumla, başvuruyu yalnızca bir tarayıcıda görebileceğiz. Bir iOS veya Android cihaz için uygulamayı simüle etmek için, bu özel platform modülünü Cordova'ya yapmamız gerekiyor. Bu eğitimde iOS modülünü oluşturacağız, bu yüzden çalıştırmanız gerekir. İyonik platform IOS ekleyin .

Son olarak, XCODE'yi yüklemeniz gerekir. Bunun için talimatlar bulacaksın İşte .

İyonik 2 uygulaması oluşturma

Bu eğitimde, 'Grafikler' adlı bir Ionic 2 uygulaması oluşturacağız. Mevcut çalışma dizininizde bir 'grafikler' klasörü oluşturacağız ve uygulamayı bir örnek uygulamayla önyükleme yapacağız. Örnek uygulama burada açıklandığı gibi temel bir sayfa içerecektir.

Bu uygulamayı oluşturmak için koşun İyonik start çizelgeleri --V2 Mevcut çalışma dizininde ( grafikler Uygulamanın adı ve --v2 İyonik'e bir Ionic 2 uygulaması oluşturmak istediğimiz için). Bu komutun yürütülmesi üzerine, bir grafikler Klasör geçerli çalışma dizininde oluşturulacaktır. Uygulamayı tarayıcıda test etmek için, grafikler Klasör ve Çalıştır İyonik hizmet . Bu, uygulamayı varsayılan tarayıcınızda başlatır.

Yeni bir sayfa ekleme

Şimdi bir sayfa / bileşen ekleyelim grafikler JavaScript grafikleri oluşturacak uygulama. İlk olarak, sadece 'Hello World' ile basit bir HTML sayfası ekleyeceğiz.

İyonik 2'de, kullanan İyonik uygulamasına sayfalar eklenebilir. @Sayfa Dekoratör (açısal 2 bileşenlere dayanan bir iyonik modül), tamamen iyonik işlevselliğe erişimi olan. Çıplak-minimum sayfa (işaretlemeyi içeren) ve bir JavaScript dosyasını (gerekli mantığı içeren) bir şablon HTML dosyası gerektirir. İyonik sayfalarla ilgili daha fazla ayrıntı bulabilirsiniz. İşte .

Ekleyeceğimiz sayfayı oluşturmak için donut-chart.js ve donut-chart.html dosyalar Grafikler / Uygulama / Sayfa Donut-Grafik dizin. HTML dosyasında, App navigasyonu ve basit bir 'Hello World' başlığı için kodu ekleyebiliriz: 

 & lt; iyon-navbar * Navbar & gt;
& lt; düğme menutoggle & gt;
  & lt; ion-icon name = "Menu" & GT; & lt; / iyon-icon & gt;
& lt; / button & gt;
ve lt; iyon başlığı ve GT; Hello Ionic & LT; / İyon Başlığı ve GT;
& lt; / ion-navbar & gt;

- iyon içeriği ve gt;
  Hello World & lt; / div & gt;
& lt; / iyon içeriği ve gt;

JavaScript dosyasında, bu bileşenin şablonu olarak oluşturulan HTML dosyasına başvururuz. Henüz bir şey fantezi yapmadığımız için, sadece boş bir yapıcı ekleyebiliriz. Şebeke . 

 'İyonik açısal' dan ithalat {sayfa};

@Sayfa({
  Şablon: 'Yapı / Sayfalar / Pie-grafik / Pie-chart.html'
})

İhracat Sınıfı Grafik Kaynağı {
  yapıcı () {
  }
}

Az önce bağımsız bir bileşen yarattık; Şimdi bunu ana uygulamaya bağlamamız gerekiyor. Bunu yapmak için, oluşturduğumuz bileşene başvurmamız gerekiyor. app.js Uygulama klasöründeki dosyayı kullanın ve bileşeni kullanın. sayfalar Uygulama bileşeni yapıcısının özelliği. 

 ithalat {chartspage} './pages/donut-chart/donut-chart' dan ithalat

Yapıcı (Uygulama, Platform, Menü) {
    // default app yapıcısı
    this.app = uygulama;
    this.platform = platformu;
    this.Menu = menü;
    this.initializeApp ();
    // Uygulamamın sayfalarını ayarlayın - burada çörek çizelgesini ekliyoruz
    this.pages = [
      {title: 'Hoşgeldiniz', Bileşen: HelloionicPage},
      {Başlık: 'Donut Chart', Bileşen: Grafik Kaynağı}
    ];

    // helloionicpage'i kök (veya birinci) sayfasını yap - Varsayılan adım
    Bu.rootpage = HelloionicPage;
}

Bu değişiklikleri yaptıktan sonra, tarayıcıdaki İyonik uygulaması otomatik olarak yüklemelidir (veya İyonik Servis kullanımı, tekrar terminalden). Şimdi, uygulamanın yan menüsünde yeni bir bağlantı görünmeli ve ekranda yazılı 'Hello World' görmelisiniz.

Javascript Grafiği Oluşturma

Şimdi bir çörek çizelgesi oluşturmak için 'Hello World' sayfamızı değiştirme zamanı. Fusioncharts kütüphanesini kullanabilmek için önce fusioncharts.js ve fusioncharts.charts.js İçindeki dosyalar www / index.html dosya.

Hızlı İpucu: Her iki dosyalar da aynı klasördeyse, sonra ekleyin fusioncharts.js bu otomatik olarak içereceği kadar yeterli olacaktır fusioncharts.charts.js . 

 & lt; script type = "Metin / JavaScript" SRC = "Yol / / fusioncharts.js" & gt;

Şimdi bir grafik kabı oluşturmak için önceki adımdan HTML'yi değiştireceğiz: 

 & lt; div id = "grafik konteyneri" & gt;

Yapıcıda donut-chart.js Yukarıda oluşturduğumuz, grafik kabının içindeki grafiği oluşturmak için aşağıdaki kodu eklememiz gerekir: 

 fusioncharts.ready (işlev () {
  var revenuechart = yeni fusioncharts ({
    Tip: 'Doughnut2d',
    RAPENTAT: 'Grafik konteyneri',
    Genişlik: '% 100',
    Yükseklik: '450',
    DataFormat: 'JSON',
    veri kaynağı: {
      "Grafik": {
        "Başlık": "Ürün kategorilerine göre gelir bölümü",
        "Subcaption": "Geçen Yıl",
        "NumberPrefix": "$",
        "Palettecolors": "# 0075C2, # 1AAF5D, # F2C500, # F45B00, # 8E0000",
        // daha fazla grafik niteliği
      }
      "Veri": [{
          "Etiket": "Yemek",
          "Değer": "28504"
        } // Daha Fazla Veri
      ]
    }
  }). Render ();
});

Bu kodda, Fusioncharts'ın yapıcısı aracılığıyla yeni bir grafik oluşturuyoruz. Kullanılan özellikler aşağıda kısaca açıklanmıştır:

tip Grafik türünü tanımlar

telâfi etmek grafiği oluşturmak istediğimiz kabın kimliği

Genişlik ve yükseklik grafik boyutlarını ayarlamak için kullanılır

veri formatı Grafik verilerini besleyeceğimiz biçimdir (JSON'u ve XML'yi kullanabilirsiniz)

veri kaynağı Fusioncharts içinde grafik kozmetik içerir grafik nesne ve içinde çizilecek gerçek veriler veri dizi

Her ne kadar sadece dört nitelik gösterdim. grafik Nesne, grafik tasarımınızı geliştirmek için kullanabileceğiniz yüzden fazla kişi var. Bunun hakkında daha fazla bilgi edinebilirsin İşte .

Bu kod eklendikten sonra, çalıştırın İyonik hizmet Uygulamayı yeniden başlatmak için. Yan menünüze bir 'donut grafiği' bağlantısını görmelisiniz. Tüm adımları düzgün takip ettiyseniz, bu bağlantıya tıkladığınızda bir çörek tablosu görmelisiniz! Değilse, lütfen kodun koduna bakın. Bu proje için GitHub Repo Nerede yanlış gittiğini görmek için.

Not: Tarayıcıya kontrol ettikten sonra kullanın İyonik taklit iOS Uygulamanızı iOS simülatörüne yüklemek için.

Özetliyor

Our doughnut chart representing the revenue split of a hypothetical company by product categories

Hipotetik bir şirketin gelirini ürün kategorileriyle temsil eden donut çizelgemiz

Az önce gördüğünüz gibi, Ionic'te veri görselleştirme ile başlamak zor değil. . Bunu çözmeniz gereken tek şey, Fusioncharts'ın bu belirli grafik türü için verileri kabul ettiği biçimdir. Bunu yapabildikten sonra, kütüphaneden herhangi bir grafik yapabileceksiniz.

Bu konuda herhangi bir yardıma ihtiyacınız olursa veya bu eğitimin içeriği hakkında herhangi bir sorunuz varsa, beni yakalamaktan çekinmeyin Twitter'dan .Yardım etmekten her zaman mutluyum!

Bu makale başlangıçta ortaya çıktı net dergisi Sayı 283; buradan satın al .

Nasıl Yapılır - En Popüler Makaleler

'inde Bio'nuzdaki yazı tipi nasıl değiştirilir

Nasıl Yapılır Sep 11, 2025

(Resim Kredi: Getty Images) BIO'nuzdaki yazı tipini nasıl değiştireceğinizi öğrenmek çok hızlı ve kolaydır..

Shapr3d ile giderken Nasıl KIBBASH

Nasıl Yapılır Sep 11, 2025

(Resim Kredisi: Adam Dewhirst) ShapR3D, Kitbashing için harika bir araçtır. Kelimenin tam anlamıyla fikirleri pat..

InDesign'da özel baskı işlemi oluşturun

Nasıl Yapılır Sep 11, 2025

Sayfa 1/4: Folyo Engelleme Folyo Engelleme ..

Apple'ın Fotoğraf App Mastering için 10 İpuçları

Nasıl Yapılır Sep 11, 2025

MacOS fotoğrafları uygulaması iPhoto olarak hayata başladı: dijital fotoğrafları yönetmek için bir tüketici uygulaması..

Suluboya için yaramaz bir tavşan boya

Nasıl Yapılır Sep 11, 2025

Zooloji, hayvanlar ve vahşi yaşam okudu, her zaman benim için büyük bir tutku olmuştur ve onları boyamadan asla yorulmam. Lincolnshire kırsalında yaşayacak kadar şanslıyız ve kap..

15 fantezi portre ipuçları

Nasıl Yapılır Sep 11, 2025

Sayfa 1/2: Sayfa 1 Sayfa 1 Sayfa 2 ..

Dijital dokulardan daha fazla nasıl elde edilir

Nasıl Yapılır Sep 11, 2025

Dijital çalışma, sizin istediğiniz kadar hata yapmanızı sağlar, risk unsurunun alındığı bir çalışma alanında. Bu i..

EL-Çizilmiş İllüstrasyon Tekniklerinizi Kabul Etmek İçin En İyi İpuçları

Nasıl Yapılır Sep 11, 2025

Yapıyorum kalem sanat Çocukluğumdan beri, benimle bir kalem ve kağıt taşıyacağım zaman. Ancak boyama ve b..

Kategoriler