Angular Bar Gauge UI Component

JQWidgets ve Angular 9 ile modern Web Uygulamaları oluşturabiliriz. JQWidgets Angular UI bileşenleri ile istediğimiz UI görüntülerini kolayca elde edebiliyoruz.

Angular CLI ile Proje Oluşturma

ng new Bar-Gauge

Uygulama dizinine girelim.

cd Bar-Gauge

jqwidgets-ng Bağımlılığını Yükleme

npm install jqwidgets-ng

Style Ekleme

Eklediğimiz bağımlıkla gelen css dosyasını, angular.json dosyasında styles property’si içerisinde belirtelim.

Modül İmport

İndirdiğimiz bağımlılık içerisinde bulunan jqxBarGaugeModule modülünü module typescript dosyasında aşağıdaki şekilde import edebiliriz.

src/app/app.module.ts

Grafik Değerlerini Belirleme

Grafikte pay edilecek değerlerin ne olması gerektiğini belirledikten sonra component grafiği o değerlere göre çizecektir.

src/app/app.component.ts

Belirlenen Değerlerin Grafik Üzerinde Gösterilmesi

Typescript dosyasında belirlediğimiz sayı dizisini [values] olarak verdiğimizde grafik üzerinde değerleri paylaştırıp bir çıktı üretecek.

UI tarafında gösterilecek grafiğin yükseklik, genişlik gibi değerlerini de değiştirme imkanı sunuyor.

src/app/app.component.html

Uygulamayı Çalıştırma

ng serve -o

Sonuç :

Örnek Kodları Github Hesabımda Bulabilirsiniz.

https://github.com/gizemcifguvercin/Angular-Bar-Gauge-UI-Component

İyi Çalışmalar :)