LivaBarGauge
DevExtreme'in BarGauge bileşenini saran ince bir katman. Aynı ölçek üzerinde birden fazla değeri iç içe dairesel çubuklarla gösterir; bölge veya dönem bazlı hedef gerçekleşme oranları için uygundur.
Alt bileşenler devextreme-react/bar-gauge paketinden içe aktarılır.
import { LivaBarGauge } from "@dataliva/livalib";
import { Geometry, Label, Legend } from "devextreme-react/bar-gauge";
Temel kullanım
values dizisindeki her sayı bir çubuğa dönüşür; ölçek startValue ve
endValue ile tanımlanır. Label çubuk uçlarındaki değer etiketlerini
yapılandırır.
Dört bölgenin hedef gerçekleşmesi (%)
Önizleme yükleniyor…
Geometri ve lejant
Geometry başlangıç/bitiş açılarıyla göstergeyi yarım daireye çevirir;
Legend her çubuğun rengini ve değerini listeler.
Yarım daire geometrisi ve lejant
Önizleme yükleniyor…
| Prop | Tip | Açıklama |
|---|---|---|
values | number[] | Gösterilecek değerler, her biri bir çubuk |
startValue | number | Ölçek başlangıcı, varsayılan 0 |
endValue | number | Ölçek sonu, varsayılan 100 |
palette | string | string[] | Çubuk renk paleti |
relativeInnerRadius | number | İç boşluk oranı |
height / width | number | string | Gösterge boyutları |
className | string | livalib'e özgü ek prop |
style | React.CSSProperties | livalib'e özgü ek prop |
Geri kalan tüm prop'lar DevExtreme BarGauge'dan miras alınır.