Pages
Özel Döner Bar Grafiği(Rotating Bargraph)
Rotating Bargraph (Dönen Bar Grafiği), standart bar grafiğin görsel özelliklerini döner bir öğeyle birleştiren dinamik bir görselleştirme bileşenidir.
Değerleri bar ile gösterirken aynı zamanda rotateGroup adlı dönen bir SVG öğesi içerir. Bu sayede pusula, açı göstergesi veya gemi enstrümantasyonu gibi uygulamalarda kullanıma uygundur.
Genel Bakış
Custom Bargraph gibi, Rotating Bargraph da gerçek zamanlı verileri doldurulabilir bar şeklinde gösterir.
Ek olarak döndürme özelliği sayesinde yönlü veya açısal verilerin görsel olarak temsil edilmesini sağlar.
Temel Özellikler
Dönme Görselleştirmesi
- Gerçek zamanlı değere göre dönen
rotateGroupSVG öğesi içerir - Pusula yönü, rüzgar yönü veya radar taramaları gibi açısal veriler için idealdir
Bar Grafiği Özelliği
- Mevcut değere göre yatay veya dikey olarak dolan bar grafiği
- Eşik değerler, alarm sınırları ve referans noktaları desteklenir
Gerçek Zamanlı Veri Bağlantısı
- CODESYS veya MQTT gibi kaynaklara bağlanarak sürekli veri güncellenmesi sağlar
- Döndürme ve bar görselleştirme aynı veya farklı değerlere bağlanabilir
Sayısal Değer ve Birim Gösterimi
- İsteğe bağlı olarak °、N、RPM gibi birimlerle birlikte sayısal değeri gösterir
- Görselleştirmenin yanında daha fazla açıklık sağlar
Etiket ve Stil Özelleştirmesi
- Renk, etiket ve görsel stil yapılandırılabilir
- Hem sembolik hem de ölçülebilir değerler desteklenir
Kullanım Senaryoları
Navigasyon Araçları
- Örnek: Gemi yönü, dümen açısı, rüzgar yönü gösterimi
Endüstriyel İzleme
- Örnek: Valf veya döner tabla gibi mekanik bileşenlerin açısal konumu
Yön Geri Bildirimi
- Örnek: Jiroskop ya da pusula sensöründen alınan açı geri bildirimi
SVG ID Referans Tablosu
[img_1]
Aşağıdaki SVG ID’lerini kullanarak döner bar grafik öğelerine veri bağlayabilirsiniz:
| # | Eleman | SVG ID |
|---|---|---|
| 1 | Bar Yolu | [code_block_2] |
| 2 | Bar Dolgu Alanı | [code_block_3] |
| 3 | Kaydırıcı (Thumb) | [code_block_4] |
| 4 | Döner Grup (Merkez) | rotateGroup |
Kod Örneği(Code Snippet Example)
[code_block_6]
rotateGroup
