Açısal ve Chart.js herhangi bir veri görselleştirme uygulaması oluştururken popüler bir kombinasyondur. Birincisi, çok büyük bir veri hacmini işleyebilir ve ikincisi, Canvas API sayesinde çizimleri gerçek zamanlı olarak işleme yeteneğine sahiptir. Bu yazıda, Angular ve Chart.js kullanarak gerçek zamanlı bir grafik oluşturma sürecinde size rehberlik edeceğim.
Önkoşullar
Herhangi bir kod yazmaya başlamadan önce, aşağıdakilere sahip olduğunuzdan emin olun:
- Node.js — 13.2.0 sürümünü kullanıyorum
- açısal CLI — 8.3.20 sürümünü kullanıyorum
- 10 dakika boş zaman
Yeni Angular projesi oluşturma
Gerekli ilk adım, yeni bir Angular projesi oluşturmaktır. Önkoşullarda belirtildiği gibi, bunu yapmak için Angular CLI kullanıyorum ve size de aynısını yapmanızı şiddetle tavsiye ediyorum. Bir terminal penceresi açın, istediğiniz dizine gidin ve şu komutu yürütün:
ng new angular-charts --routing=true --styling=scss
Bu komut, adında yeni bir Angular projesi oluşturur. açısal grafikler aynı isimli dizinde. Ayrıca, isteğe bağlı iki bayrak ekledim — |__+_| uygulamaya yönlendirici modülünü ekler ve |__+_| kullanılan stil sayfalarının uzantılarını ayarlar.
Oluşturulan projeyle, tercih ettiğiniz IDE'de açın - bunun için Visual Studio Code kullanacağım.
Servis katmanı ekleme*
Bu öğreticinin bir sonraki adımı, bir hizmet katmanı eklemektir. Bu adımı yıldızla işaretledim, çünkü isteğe bağlı . Zaten sahipseniz veya ihtiyacınız yoksa bu bölümü atlamaktan çekinmeyin.
Bu bölüme, |_+_| kullanarak gerçek zamanlı veri kaynağına erişim sağlayacak bir hizmet üreterek başlayalım. Bir hizmet oluşturmak için aşağıdaki komutu kullanın:
routing
Komutu yürüttükten sonra ve |__+_| oluşturulur ve hizmet katmanı kodunun yerleştirileceği yer burasıdır. Bu eğitim için SSE veya Sunucudan Gönderilen Olaylar veri kaynağını kullanıyorum, öğreticiyi bulabileceğiniz Burada . Daha fazla açıklamaya ihtiyacınız varsa, bu öğreticiyi okumaktan çekinmeyin. Bu yazıda tekrardan kaçınmak için, sadece aşağıdakileri yapıştıracağım:
styling
Chart.js'yi bağlama
Bir sonraki adım, Chart.js kitaplığını Angular projemize bağlamaktır. Bunu yapmanın birkaç yolu var ama ben özel bir paket kullanacağım. Ag2-Grafikler . Bu paket, gerekli tüm işlevselliği korurken çok daha güzel bir API sunar. Benim durumumda, aşağıdaki bağımlılıkları |_+_| dosya:
Observable
|_+_| dosyasını çalıştırmayı unutmayın |_+_| veya |__+_| paket yöneticinize bağlı olarak.
HTML şablonu ekleme
Daha da ileri giderek, grafiği oluşturacak bir HTML şablonu eklemeliyiz. Bu öğretici durumunda, onu istediğiniz yere yerleştirebilirsiniz - kod, bir sonraki adımda inceleyeceğimiz özel özelliklere sahip tek bir HTML etiketidir. |__+_| adlı bir bileşen HTML şablonuna yerleştiriyorum. HTML şablonu aşağıdakileri içermelidir:
ng generate service sse
Grafiğimi sayım olayları klasörüne yerleştirdim, bu nedenle tüm değişkenler bunlarla başa çıkıyor. |__+_| etiketine karşılık gelen |_+_| yerleştirilecek yükseklik, genişlik ve değişken konfigürasyonu belirtiriz. dosya.
#typescript #charts #angular #frontend #javascript
orta.com
Gerçek zamanlı grafikler oluşturmak için Angular ve Chart.js kullanma
Angular ve Chart.js, herhangi bir veri görselleştirme uygulaması oluştururken popüler bir kombinasyondur. Birincisi, çok büyük bir veri hacmini işleyebilir ve ikincisi, Canvas API sayesinde çizimleri gerçek zamanlı olarak işleme yeteneğine sahiptir.