Grafik

Yaklaşık 8 dk okuma

TwChart · Kategori: Trend Grafikleri

Ayarlar

Bu ayarlar widget seçiliyken sağ özellikler panelinde yer alır. Varsayılan değer, widget sayfaya ilk eklendiğindeki değerdir.

Grafik Yapılandırması

Ayar	Tip	Varsayılan	Açıklama
Eksenler axesConfigJson	Eksen yapılandırması	[ { "id": "left-1", "name": "Primary", "type": "value", "position": "left", "autoScale": true, "min": null, "max": null, "unit": "", "axisLabelShow": true, "axisLabelFormat": "{value} {unit}", "alignTicks": true, "axisLine": { "show": true, "lineStyle": { "color": "" } }, "axisLabel": { "formatter": "{value} {unit}" } } ]	Grafikte kullanılacak eksenleri tanımlarsınız. Her eksen için konum, birim, renk ve ölçekleme ayarları yapılır.
Seriler seriesConfigJson	Seri yapılandırması	[ { "id": "series-1", "name": "Series 1", "tagName": "", "logInfoId": 0, "logIntervalMs": null, "axisId": "left-1", "type": "line", "color": "", "lineWidth": 2, "areaOpacity": 0, "smooth": false, "step": false, "showSymbol": false, "enabled": true, "markPointItems": [], "markLineItems": [ { "type": "average" } ], "markLineCustomValues": [] } ]	Grafikte gösterilecek serileri tanımlarsınız. Her seri için tag, log değişkeni, eksen ve görünüm ayarları yapılır.

Zaman ve Veri

Ayar	Tip	Varsayılan	Açıklama
Maksimum Nokta Sayısı maxPoints	Sayı	50	Seri başına en fazla nokta sayısı (en az 2, varsayılan 50). Otomatik örnekleme süresini belirler ve canlı modda tutulan nokta sayısını sınırlar.
Zaman Kaynağı timeSource	Seçim	local	Yerel, bu grafiğin kendi aralık ayarlarını kullanır (varsayılan). Sayfa zamanı, sayfadaki Sayfa zaman seçiciyi izler: seçicinin aralığı Aralık Modu, Geçmiş Aralık Dakika ve takvim ayarlarının yerine geçer, araç çubuğundaki aralık düğmeleri gizlenir ve canlı mod yalnızca aralık şimdiki zamanı içerdiğinde çalışır. Seçici yoksa grafik kendi aralığını kullanır. Seçenekler: local Yerel, page Sayfa zamanı
Karşılaştırma comparisonMode	Seçim	none	Ana aralığın yanında bir karşılaştırma dönemi de yüklenir ve aynı seriler kesikli, daha açık çizgiyle ana zaman eksenine yerleştirilir. Önceki dönem: aynı uzunluktaki hemen önceki aralık (takvim aralığında bir önceki takvim dönemi). Geçen yıl: aynı takvim aralığının bir yıl öncesi (365 gün değil, takvim yılı). İpucu gerçek tarihi, iki değeri ve değişimi gösterir; eksik veri sıfır sayılmaz. Karşılaştırma yığın modu açıkken çizilmez (Yığınlama 'Seri ayarına göre' olmalıdır); canlı mod karşılaştırma serisine nokta eklemez. Seçenekler: none Yok, previousPeriod Önceki dönem, previousYear Geçen yıl
Aralık Modu rangeMode	Seçim	relative	Göreli, şimdiye kadarki son Geçmiş Aralık Dakika süresini yükler (kayan pencere, varsayılan). Takvim, tarayıcı saat diliminde bir takvim dönemini yükler (Takvim Dönemi, Takvim Kaydırma), ör. 1 Ocak'tan itibaren bu yıl; geçerli dönem şimdi biter ve yenilemede ve canlı modda yeni aya veya yıla kendiliğinden geçer. Araç çubuğundaki takvim menüsü aralığı çalışma anında kaydetmeden değiştirir. Seçenekler: relative Göreli, calendar Takvim
Gezinme Adımı Dakika historyStepMinutes	Sayı	60	Araç çubuğundaki geri/ileri butonlarının zaman aralığını kaydırdığı süre, dakika (varsayılan 60). Takvim aralık modunda bir takvim dönemi kaydırır.
Örnekleme Süresi (sn, 0=Otomatik) sampleBySeconds	Sayı	0	Bir örnekleme aralığının saniye cinsinden süresi. 0 ise zaman aralığından ve en fazla nokta sayısından (veya zaman kovasından) otomatik hesaplanır.
Geçmiş Aralık Dakika timeRangeMinutes	Sayı	60	Göreli aralık modunda kayan zaman aralığının dakika cinsinden uzunluğu (varsayılan 60). Takvim aralık modunda kullanılmaz.
Karşılaştırma Hizalaması comparisonAlignment	Seçim	elapsed	Geçen süre kadar (varsayılan): devam eden bir dönem, önceki dönemin yalnızca aynı geçen kısmıyla karşılaştırılır (ör. bugün 00:00-şimdi ile dün 00:00-aynı saat). Tam dönem: önceki dönemin tamamı yüklenir. Kapanmış dönemlerde ve kayan aralıklarda iki seçenek aynıdır. Seçenekler: elapsed Geçen süre kadar, calendar Tam dönem
Takvim Dönemi calendarPeriod	Seçim	year	Takvim aralık modunda dönem: gün, hafta (pazartesiden), ay, çeyrek veya yıl (varsayılan yıl). Seçenekler: day Gün, week Hafta, month Ay, quarter Çeyrek, year Yıl
Canlı Yenileme Aralığı ms liveRefreshIntervalMs	Sayı	0	Canlı moddaki güncelleme aralığı (ms). 0 ise serilerin en kısa log aralığı, yoksa 1000 ms kullanılır; en düşük değer 500 ms'dir. Tüketim Fark Toplam modunda aralık en fazla dakikada bir yeniden sorgulanır.
Takvim Kaydırma calendarOffset	Sayı	0	Takvim aralık modunda hangi dönem: 0 geçerli dönem, -1 bir önceki (ör. geçen ay veya geçen yıl), -2 ondan önceki; pozitif değerler 0 sayılır.

Seri Varsayılanları

Ayar	Tip	Varsayılan	Açıklama
Varsayılan Seri Tipi defaultSeriesType	Seçim	line	Kendi tipi seçilmemiş seriler için kullanılan seri tipi. Seçenekler: line Çizgi, area Alan, bar Çubuk, step Basamak
Zaman Kovası consumptionBucketUnit	Seçim	auto	Tüketim Fark Toplam modunda zaman kovasının uzunluğu. Otomatik, aralığın uzunluğuna göre gün, hafta, ay veya yıl seçer. Haftalar pazartesi başlar; hafta ve çeyrekler takvime hizalanır. Seçenekler: hour Saatlik, day Günlük, week Haftalık, month Aylık, quarter Çeyreklik, year Yıllık, auto Otomatik
Veri Kaynağı dataSourceMode	Seçim	historySample	Geçmiş Örnekleme örneklenmiş geçmiş değerleri gösterir; Tüketim Fark Toplam sayaç tag'lerinin zaman kovası başına tüketimini (farkını) gösterir. Seçenekler: historySample Geçmiş Örnekleme, consumptionDiffSum Tüketim Fark Toplam
Yığınlama stackMode	Seçim	none	Serilerin üst üste yığılarak çizilmesini belirler. 'Seri ayarına göre': yalnız yığın grubu girilmiş seriler yığılır (varsayılan, eski grafikler değişmez). 'Yığılmış': tüm seriler her zaman diliminde üst üste toplanır; aylık trafo tüketimi gibi raporlar için uygundur. '%100 yığılmış': her zaman dilimi %100'e normalize edilir, ipucunda gerçek değer ve yüzde gösterilir; özel limit çizgileri gizlenir, min/maks/ortalama işaretleri yüzde payı gösterir. Bar ve çizgi/alan serilerinde çalışır; farklı eksenlerdeki seriler ayrı yığınlanır. 'Yığılmış' ve '%100 yığılmış' modlarında karşılaştırma çizilmez. Seçenekler: none Seri ayarına göre, stacked Yığılmış, percent %100 yığılmış
Örnekleme Değer Tipi sampleValueType	Seçim	2	Her örnekleme aralığındaki değerlerin nasıl birleştirileceği: minimum, maksimum, ortalama, toplam veya adet. Seçenekler: 0 Minimum, 1 Maksimum, 2 Ortalama, 3 Toplam, 4 Adet

Araç Çubuğu

Ayar	Tip	Varsayılan	Açıklama
Araç Çubuğu Göster showToolbar	Onay kutusu	Açık	Aralık kısayolları, gezinme, canlı/duraklat ve yakınlaştırma butonlarını içeren araç çubuğunu gösterir.
Yakınlaştırma Aktif zoomEnabled	Onay kutusu	Açık	Grafikte yakınlaştırmaya izin verir. Kapalıyken iç yakınlaştırma ve alt filtre paneli de kapanır.
Zoom Sıfırla Butonu Göster showZoomResetButton	Onay kutusu	Açık	Yakınlaştırmayı sıfırlayan araç çubuğu butonunu gösterir; yalnızca yakınlaştırma açıkken.
Saat Kısayolları rangePresetsJson	Çok satırlı metin	[ { "label": "1h", "minutes": 60, "enabled": true }, { "label": "6h", "minutes": 360, "enabled": true }, { "label": "24h", "minutes": 1440, "enabled": true } ]	Araç çubuğundaki hızlı aralık butonları; JSON listesinde her öğe label, minutes ve enabled alanlarını içerir. Boş bırakılırsa 1h, 6h ve 24h kullanılır.
Canlı Modda Başlat autoStart	Onay kutusu	Açık	Sayfa açıldığında canlı modda başlar: zaman aralığı şimdiki zamanı izler ve veriler otomatik yenilenir; duraklatılana kadar geri/ileri gizlenir. Geçmiş Örnekleme yeni tag değerlerini ekler; Tüketim Fark Toplam aralığı en fazla dakikada bir yeniden sorgular. Kapalıysa aralık bir kez yüklenir ve canlı mod başlatılana kadar beklenir; aylık toplamlar gibi yavaş değişen tüketim grafikleri için önerilir.
Zoom Aç/Kapat Butonu Göster showZoomToggleButton	Onay kutusu	Açık	Çalışma anında yakınlaştırmayı açıp kapatan araç çubuğu butonunu gösterir.
Ayarlar Butonu Göster showSettingsButton	Onay kutusu	Açık	Araç çubuğunda ayarlar butonunu gösterir; kullanıcılar grafik ayarlarını çalışma anında değiştirebilir, değişiklikler sayfaya kaydedilmez.

Görünüm

Ayar	Tip	Varsayılan	Açıklama
Izgarayı Göster showGrid	Onay kutusu	Açık	Eski ızgara ayarı; yalnızca Yatay Izgara ve Dikey Izgara ayarlanmamışsa kullanılır.
Dikey Izgara showGridVertical	Onay kutusu	Açık	Zaman ekseninin dikey ızgara çizgilerini gösterir.
X Eksenini Göster showXAxes	Onay kutusu	Açık	Zaman eksenini gösterir.
İç Yakınlaştırma showNavigator	Onay kutusu	Açık	Grafik içinde mouse/touch ile yakınlaştırma ve pan yapmayı açar.
Yan Boşluk (px, 0=Otomatik) gridSidePadding	Sayı	0	Çizim alanının sağında ve solunda bırakılan boşluk (px); 0 ise değer eksenlerinin sayısına göre hesaplanır.
Yatay Izgara showGridHorizontal	Onay kutusu	Açık	Değer ekseninin yatay ızgara çizgilerini gösterir.
Legend Göster showLegend	Onay kutusu	Açık	Seri adlarını içeren lejantı gösterir.
Y Eksenini Göster showYAxes	Onay kutusu	Açık	Değer eksenlerini adları ve etiketleriyle birlikte gösterir.
Alt Filtre Panelini Göster showFilterPanel	Onay kutusu	Açık	Görünen aralığı seçmek için grafiğin altında bir kaydırıcı gösterir; yakınlaştırmayı da açar.
Bar Değerlerini Göster showBarValueLabels	Onay kutusu	Kapalı	Sütun serilerinde her sütunun üstüne değerini yazar.

Araç İpucu

Ayar	Tip	Varsayılan	Açıklama
Tooltip Tetikleyici tooltipTrigger	Seçim	axis	İpucunun ne zaman görüneceği: Eksen imleç zamanındaki tüm serileri, Öğe yalnızca imlecin altındaki noktayı gösterir, Yok kapatır. Seçenekler: axis Eksen, item Öğe, none Yok
Tooltip Eksen İşaretçisi tooltipAxisPointerType	Seçim	cross	Eksen tetikleyicisinde imleçte çizilen kılavuz: Artı İmleç, Çizgi, Gölge veya Yok. Seçenekler: cross Artı İmleç, line Çizgi, shadow Gölge, none Yok

Çizim

Ayar	Tip	Varsayılan	Açıklama
Render Tipi renderType	Seçim	canvas	Canvas çok sayıda noktada daha hızlıdır; SVG yakınlaştırmada ve yazdırmada keskin kalır. Seçenekler: canvas, svg

Diğer ayarlar

Ayar	Tip	Varsayılan	Açıklama
Enable Flashing enableFlashing	Onay kutusu	Kapalı	Bileşeni yanıp söndürür (saniyede bir saydamlık darbesi). Genellikle bir alarm koşuluna bağlanır.
Log Button logButton	Onay kutusu	Kapalı	Çalışma zamanında bileşenin üzerine gelince bir grafik ikonu gösterir; tıklanınca bileşene bağlı Tag'ler log Tag listesine eklenir.

Bağlantılar

Özellikler panelinin İlişkiler (Binding) bölümünde, Direct bağlantıda bir Tag bu widget'ın aşağıdaki özelliklerine bağlanabilir. Bağlantı tipleri (Direct, IntRange, FloatRange, Boolean, Bit) tüm widget'larda aynıdır; açıklamaları Widget Referansı sayfasındadır.

title, visible, authorization, x, y, width, height, rotation, class, foregroundColor, backgroundColor, borderColor, borderStyle, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, enableFlashing, logButton, seriesValues.series1, seriesValues.series2, seriesValues.series3, seriesValues.series4, seriesValues.series5, seriesValues.series6, seriesValues.series7, seriesValues.series8, seriesValues.series9, seriesValues.series10, axesConfigJson, seriesConfigJson, maxPoints, timeRangeMinutes, timeSource, comparisonMode, comparisonAlignment, rangeMode, calendarPeriod, calendarOffset, historyStepMinutes, liveRefreshIntervalMs, defaultSeriesType, dataSourceMode, sampleValueType, sampleBySeconds, consumptionBucketUnit, rangePresetsJson, showToolbar, showGrid, showGridHorizontal, showGridVertical, gridSidePadding, showLegend, showBarValueLabels, stackMode, showXAxes, showYAxes, showNavigator, showFilterPanel, autoStart, zoomEnabled, showZoomToggleButton, showZoomResetButton, showSettingsButton, tooltipTrigger, tooltipAxisPointerType, renderType

Ortak bölümler

Bu widget seçiliyken özellikler panelinde şu ortak bölümler de görünür: Genel, Yerleşim, Görünüm, İlişkiler (Binding). Bu bölümler Sayfa Editörü sayfasında anlatılır.