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 rotateGroup SVG öğ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ı

  • Ö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