ScatterChart

Verileri tek tek noktalar halinde, yatay (x) ve dikey (y) eksene göre dağıtarak gösteren saçılım grafiği nesnesidir. İki ölçü arasındaki ilişkiyi (korelasyonu) ya da değerlerin nasıl dağıldığını görmek için kullanılır.

Bu nesnenin bir değeri yoktur. Veriyi bir veri kaynağından alır ve ekranda çizer; kullanıcının doldurduğu bir alan değildir.

Ne zaman kullanılır?

İki sayısal ölçü arasındaki ilişkiyi göstermek istediğinizde idealdir: örneğin sipariş tutarı ile teslim süresi, ya da sıcaklık ile satış miktarı. Zamana göre değişen bir trendi göstermek için LineChart, kategorilere göre kıyaslama için BarChart daha uygundur.

Tasarımcı özellikleri

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

General

Özellik	Açıklama
Name	Nesnenin koddaki adı (ör. ScatterChart1). Koddan bu adla erişirsiniz.

Veri kaynağı (Data Source)

Grafik, gösterdiği noktaları bir veri kaynağından alır. Veriyi tasarımcıda bir kaynağa bağlayabilir ya da kodla doğrudan atayabilirsiniz.

Özellik	Açıklama
Data	Grafiğe doğrudan kodla verilen veri (nesne / liste). Hazır bir veri listesini buradan atayabilirsiniz.
DataSource	Grafiği bir veri kaynağına (sorgu, tablo) bağlar; noktalar bu kaynaktan beslenir.

Behavior

Özellik	Açıklama
Charts	Grafikteki seri tanımlarının listesi. Her seri hangi alanın çizileceğini, rengini ve adını belirler. Birden fazla seri ekleyerek aynı grafikte birkaç veri kümesini gösterebilirsiniz.
ArgumentAxis	Yatay (x) eksenin ayarları: başlık, etiketler, aralık, çizgiler.
ValueAxis	Dikey (y) eksenin ayarları: başlık, etiketler, aralık, çizgiler.
Legend	Seri açıklamalarını gösteren göstergenin (lejant) ayarları: konumu, görünürlüğü.
Tooltip	Bir noktanın üzerine gelince çıkan bilgi balonunun ayarları.
Hover	Fare bir noktanın üzerine geldiğinde uygulanan vurgu davranışı.
Selection	Noktaların seçilebilirlik davranışı.
Animation	Grafik çizilirken oynatılan animasyonun ayarları.
Stack	Serilerin üst üste yığılma davranışı.
Rotate	Grafiği döndürür; ekseni yatay yerine dikey hale getirir.
ZoomAndPan	Kullanıcının grafikte yakınlaşma ve kaydırma yapabilmesini sağlar.

Appearance

Özellik	Açıklama
Title	Grafiğin üstünde görünen başlık (çok dilli olabilir).
Visible / Client Visible	Nesnenin görünürlüğü.
Enabled / Client Enabled	Nesnenin aktif olup olmadığı.

Olaylar

Bir nesne açılırken olaylar belirli bir sırayla tetiklenir. ScatterChart'ın kendine özgü bir değer olayı yoktur; yaşam döngüsü olaylarıyla çalışır.

Açılış sırası: OnInit → OnLoad → OnDataLoad → OnPreRender → OnRender

Olaylar iki tarafta çalışabilir: sunucu olayları C# kodunda, istemci olayları tarayıcıdaki TypeScript kodunda.

Sunucu olayları (Server)

Olay	Ne zaman çalışır
OnInit	Form açılırken nesne oluşturulduğunda, en başta.
OnLoad	OnInit'in hemen ardından, nesne yüklenince.
OnRender	Nesne ekrana çizilirken. Grafiğin verisini bu aşamada hazırlamak yaygındır.

İstemci olayları (Client)

Sunucudaki olaylara ek olarak tarayıcı tarafında şunlar da vardır:

Olay	Ne zaman çalışır
OnDataLoad	Nesnenin verisi yüklendiğinde.
OnPreRender	Nesne ekrana çizilmeden hemen önce.
OnClick / OnDoubleClick	Grafiğe tıklanınca / çift tıklanınca.
OnPropertyChanging / OnPropertyChanged	Bir özellik kodla değiştirilmeden önce / sonra.

Kod örnekleri

ScatterChart'ın bir değeri olmadığından koddan genelde verisini ayarlar ya da görünürlüğünü değiştirirsiniz. Sunucu örnekleri turuncu, istemci örnekleri kırmızı çerçevelidir.

Form kodu (C#, sunucu)

Form kodunda nesneye doğrudan adıyla erişirsiniz:

// Grafiğe veri ata
ScatterChart1.Data = satisVerisi;

// Görünürlüğü değiştir
ScatterChart1.Visible = true;
ScatterChart1.Enabled = true;

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

Akış kodunda nesneye Document1.Controls üzerinden erişirsiniz:

// Görünürlüğü değiştir
Document1.Controls["ScatterChart1"].Visible = true;
Document1.Controls["ScatterChart1"].Enabled = true;

İstemci kodu (TypeScript, tarayıcı)

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

this.ScatterChart1.visible = true;
this.ScatterChart1.enabled = true;

Veriyi nereden veriyorsunuz?

Sabit bir liste gösterecekseniz Data özelliğine kodla atama yapmak en pratik yoldur. Veri bir sorgudan ya da tablodan geliyorsa tasarımcıda DataSource bağlamak daha temizdir; böylece veri her açılışta otomatik gelir.

İpuçları

• Aynı grafikte birden fazla veri kümesini kıyaslamak için Charts listesine birden fazla seri ekleyin; her serinin rengini ve adını ayrı ayrı belirleyin.
• Çok sayıda nokta varsa kullanıcının ayrıntıya inebilmesi için ZoomAndPan özelliğini açın.
• Tooltip ayarlarını yaparak fare bir noktanın üzerine geldiğinde o noktanın değerlerini göstermek grafiği çok daha okunur yapar.

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

General: Name

Data Source: Data, DataSource

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

Appearance: Client Enabled, Client Visible, Enabled, Title, Visible

Olaylar (Client): OnInit, OnLoad, OnPreRender, OnRender, OnDataLoad, OnClick, OnDoubleClick, OnPropertyChanging, OnPropertyChanged

Olaylar (Server): OnInit, OnLoad, OnRender