AreaChart

Veriyi, çizginin altı dolgulu olacak şekilde alan grafiği biçiminde gösteren görsel nesnedir. Zaman içindeki değişimi ve toplamı bir arada göstermek için kullanılır.

Bu nesnenin bir değeri yoktur. Kullanıcıdan veri toplamaz; bir veri kümesini okuyup ekrana çizer. AreaChart, Chart nesnesinden türer ve onunla aynı API yüzeyini paylaşır; tek farkı serileri varsayılan olarak alan (AreaSeries) tipinde çizmesidir. BarChart, LineChart, SplineChart, PieChart ve ScatterChart da aynı taban sınıftan gelir.

Ne zaman kullanılır?

Bir değerin zaman içindeki değişimini ve büyüklüğünü birlikte vurgulamak istediğinizde uygundur: aylık harcama, stok seyri, kümülatif toplamlar. Yalnızca çizgi yeterliyse LineChart, kategorileri çubuklarla karşılaştırmak istiyorsanız BarChart daha iyidir.

Tasarımcı özellikleri

Bir AreaChart seçildiğinde Özellik Görüntüleyici sekmelere ayrılır.

General

Özellik	Açıklama
`Name`	Nesnenin koddaki adı (ör. `AreaChart1`). Koddan bu adla erişirsiniz.
`Caption`	Nesnenin başlık/etiket bloğu.

Data Source

Grafiğin çizdiği veri buradan beslenir.

Özellik	Açıklama
`Data`	Grafiğe doğrudan verilen veri kümesi (`Object`). Satır listesini kodla atayabilirsiniz.
`DataSource`	Grafiğin bağlanacağı veri kaynağı. Bir SQL ya da REST veri kaynağı seçilir.

Behavior

Özellik	Açıklama
`Charts`	Grafikteki seri listesi (`List<ChartItem>`). Her `ChartItem` bir veri alanını çizer. Grafiğin asıl içeriği burada tanımlanır.
`ArgumentAxis`	Yatay eksen (genelde kategori veya zaman) ayarları (`ChartArgumentAxis`).
`ValueAxis`	Dikey eksen (değer) ayarları (`ChartValueAxis`).
`Legend`	Açıklama kutusunun (lejant) görünümü ve konumu (`ChartLegend`).
`Tooltip`	Üzerine gelince çıkan bilgi balonunun ayarları (`ChartTooltip`).
`Hover`	Fareyle üzerine gelindiğinde uygulanan vurgu davranışı (`ChartHover`).
`Selection`	Seri ya da nokta seçimi davranışı (`ChartSelection`).
`Stack`	Serileri üst üste yığma (stacked) davranışı (`ChartStack`).
`Animation`	Çizim sırasındaki animasyon ayarları (`ChartAnimation`).
`Rotate`	Grafiği döndürür; eksenleri yatay/dikey çevirir (`Boolean`).
`ZoomAndPan`	Yakınlaştırma ve kaydırma davranışı (`ChartZoomAndPan`).

Appearance

Özellik	Açıklama
`Title`	Grafiğin başlığı. Tipi `MultiLanguageText`'tir; düz string değil, çok dilli metin atanır.
`Style` / `ContainerStyle`	Nesnenin ve sarmalayan hücrenin stili.
`CustomClassName`	Nesneye eklenen özel CSS sınıfı.
`Visible` / `Client Visible`	Nesnenin görünürlüğü.
`Enabled` / `Client Enabled`	Nesnenin aktif olup olmadığı.
`Loading`	Yükleniyor durumu. `ShowLoading()` / `HideLoading()` ile kodtan açılıp kapatılır.

Özellik	Açıklama
`ContextMenuKey`	Nesneye bağlanacak `ContextMenu` nesnesinin anahtarı.
`ContextMenuColumnKey`	Sütun bazlı menü bağlama anahtarı.
`ContextMenuTarget`	Menünün hangi hedefe bağlanacağı (`ContextMenuTarget` enum: `Container`, `None`, `Row`, `Column`).

ChartItem: serinin yapısı

Grafiğin çizdiği her seri bir ChartItem nesnesidir. Charts özelliği bu nesnelerin listesidir ve grafiğin asıl içeriğini belirler.

Alan	Tip	Açıklama
`Type`	`ChartType`	Serinin çizim tipi. Alan grafiği için `ChartType.AreaSeries`. Enum değerleri: `LineSeries`, `SplineSeries`, `BarSeries`, `ScatterSeries`, `AreaSeries`, `PieSeries`.
`ArgumentField`	`String`	Yatay eksene (kategori/zaman) karşılık gelen veri alanı adı.
`ValueField`	`String`	Dikey eksene (değer) karşılık gelen veri alanı adı.
`Name`	`String`	Serinin lejanttaki adı.
`Color`	`String`	Serinin rengi (ör. `"#3366ff"`).
`BarWidth`	`Nullable<Int32>`	Çubuk genişliği (çubuk serilerinde).
`ScaleName`	`String`	Birden çok değer ekseni kullanıldığında serinin bağlandığı eksen adı.

Olaylar

AreaChart bir veri girişi nesnesi değildir; kullanıcıdan değer almadığı için değer değişimi (ValueChanging / ValueChanged) ya da metin değişimi olayları yoktur. Taban sınıf VisualControl'den gelen tıklama olaylarını ve veri kaynağı bağlama kancasını sunar.

Olay / kanca	Tip	Ne zaman çalışır
`OnClick` / `OnDoubleClick`	`VisualControl`	Nesneye tıklanınca / çift tıklanınca (`FireClick`).
`OnDataSourceAddItem`	`DataSourceAddItemEventArgs`	Veri kaynağından satır bağlanırken çalışan sunucu kancası.

Veriye dayalı kendi olayı yoktur

AreaChart değeri olmayan görsel bir nesnedir; bu yüzden değer/metin değişim olayı yoktur. OnInit / OnLoad / OnPreRender / OnRender gibi genel yaşam döngüsü olayları her nesnede olduğu gibi burada da bulunur (BaseControl'den miras gelir); ancak OnDataLoad bu nesnede yoktur (yalnızca veri kaynağına bağlı nesnelerde bulunur). Grafiği güncellemek için olay beklemek yerine koddan Data + Charts atayıp Reload() çağırırsınız.

Kod örnekleri

AreaChart'ın değeri olmadığı için kodla grafiğin serilerini ve verisini yönetirsiniz. Asıl iş Charts (seriler) ve Data (satırlar) atayıp Reload() çağırmaktır. Sunucu örnekleri turuncu, istemci örnekleri kırmızı çerçevelidir.

Form kodu (C#, sunucu): grafiği veriyle doldur

Form kodunda nesneye doğrudan adıyla erişirsiniz. Bir veri kümesi hazırlayıp seriyi tanımlar ve Reload() ile çizdirirsiniz:

// Çizilecek satırlar (DataSource yerine koddan veri)
var satirlar = new List<Dictionary<string, object>>
{
    new Dictionary<string, object> { { "AY", "Ocak" },  { "TUTAR", 1200 } },
    new Dictionary<string, object> { { "AY", "Şubat" }, { "TUTAR", 1850 } },
    new Dictionary<string, object> { { "AY", "Mart" },  { "TUTAR", 1600 } },
};

// Seriyi tanımla: alan grafiği için AreaSeries
AreaChart1.Charts = new List<ChartItem>
{
    new ChartItem
    {
        Type          = ChartType.AreaSeries,
        ArgumentField = "AY",        // yatay eksen alanı
        ValueField    = "TUTAR",     // dikey eksen alanı
        Name          = "Aylık Harcama",
        Color         = "#3366ff"
    }
};

// Veriyi bağla ve grafiği yenile
AreaChart1.Data = satirlar;
AreaChart1.Reload();

Form kodu (C#, sunucu): başlık ve görünürlük

Title çok dilli bir metindir (MultiLanguageText); düz string atanamaz:

// Başlık (MultiLanguageText, düz string DEĞİL)
AreaChart1.Title = new MultiLanguageText(
    new Dictionary<string, string> { { "tr-TR", "Aylık Harcama" } });

// Görünürlük
AreaChart1.Visible = true;
AreaChart1.Enabled = true;

// Lejantı sağa al, üst üste yığmayı aç
AreaChart1.Legend.Position = ChartPosition.Right;
AreaChart1.Stack.Enabled   = true;

Akış (Flow) kodu (C#, sunucu)

Akış kodunda nesneye Document1.Controls["AreaChart1"] üzerinden erişirsiniz. Bu indeksleyici tipe özgü AreaChart sınıfını değil, jenerik bir Control sapı (Bimser.Synergy.ServiceAPI.Models.Form.Control) döndürür. Bu sap yalnızca .Value, .Text, .Type, .Rows ve GetPropertyValue<T> üyelerini sunar; AreaChart'a cast edilemez. Bu yüzden Charts, Data ve Reload() gibi tipe özgü grafik üyelerine akış kodundan erişilemez — bunlar yukarıdaki Form (Controller) kodundan yönetilir. Akış kodu yalnızca jenerik sap üzerinden değer okur:

// Jenerik Control sapı: cast YOK
Control grafik = Document1.Controls["AreaChart1"];

// Yalnızca .Value / .Text / GetPropertyValue<T> erişilebilir
object mevcutVeri = grafik.Value;
string baslik     = grafik.GetPropertyValue<string>("Title");

// Charts / Data / Reload() bu saptan ÇAĞRILAMAZ;
// serileri ve veriyi Form (Controller) kodundan atayın.

İstemci kodu (TypeScript, tarayıcı)

İstemci tarafında nesnelere this. ile erişilir ve özellik adları küçük harfle yazılır:

this.AreaChart1.visible = true;
this.AreaChart1.enabled = true;

Değeri yok, verisi var

AreaChart kullanıcıdan değer almaz; bir veri kümesini çizer. Grafiğin neyi çizeceğini Charts (seriler) ve Data / DataSource belirler. Veriyi değiştirdikten sonra grafiği yenilemek için mutlaka Reload() çağırın; aksi halde değişiklik ekrana yansımaz. Uzun süren bir veri çekme sırasında ShowLoading() / HideLoading() ile yükleniyor göstergesini açıp kapatabilirsiniz.

İpuçları

Grafiğin asıl içeriği Charts listesindeki ChartItem serileridir. Bir seri eklemeden Data atamak tek başına bir şey çizdirmez.
Birden çok seriyi üst üste göstermek istiyorsanız Stack.Enabled = true yapın ve yığılacak serileri Stack.Series ile belirleyin; toplamı tek bakışta görürsünüz.
Eksen başlıklarını ve görünümünü ArgumentAxis / ValueAxis altından düzenleyin (ShowGrid, ShowLabels, ShowLine, Position); otomatik aralık her zaman okunaklı olmaz.
Çok fazla seri grafiği okunmaz hale getirir. Tek bir trendi göstermek istiyorsanız LineChart daha sade durur.

Tüm tasarımcı özellikleri (tam liste)

General: Name, Caption

Data Source: Data, DataSource

Behavior: Charts, ArgumentAxis, ValueAxis, Legend, Tooltip, Hover, Selection, Stack, Animation, Rotate, ZoomAndPan

Appearance: Title (MultiLanguageText), Style, ContainerStyle, CustomClassName, ControlId, Visible, Client Visible, Enabled, Client Enabled, Loading, DefaultEnabled, DefaultClientEnabled

Context Menu: ContextMenuKey, ContextMenuColumnKey, ContextMenuTarget

Olaylar / kancalar: OnClick, OnDoubleClick (VisualControl), OnDataSourceAddItem

Metotlar: Reload(), ShowLoading() / HideLoading() / ToggleLoading(), Show() / Hide(), ScrollTo(), GetDifferences(object), GetProtectedData(bool)

Bu sayfa hakkında ne düşünüyorsunuz?

Ne zaman kullanılır?​

Tasarımcı özellikleri​

General​

Data Source​

Behavior​

Appearance​

Context Menu​

ChartItem: serinin yapısı​

Olaylar​

Kod örnekleri​

Form kodu (C#, sunucu): grafiği veriyle doldur​

Form kodu (C#, sunucu): başlık ve görünürlük​

Akış (Flow) kodu (C#, sunucu)​

İstemci kodu (TypeScript, tarayıcı)​

İpuçları​