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 :)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store