LineChart
Verileri noktalar ve bu noktaları birleştiren çizgilerle gösteren grafik nesnesidir. Bir değerin zaman içindeki değişimini ya da eğilimini görselleştirmek için kullanılır.
Bu nesnenin bir değeri yoktur. Ekrana veri girişi yapmaz; bir veri kümesindeki kayıtları (Data) tanımladığınız serilere (Charts) göre çizer. LineChart, Chart nesnesinden türer ve onunla aynı API yüzeyini paylaşır; BarChart, SplineChart, AreaChart, PieChart, ScatterChart da aynı temelden gelir, tek fark serinin varsayılan Type değeridir.
Ne zaman kullanılır?
Bir ölçümün zaman içindeki seyrini (aylık satış, günlük başvuru sayısı, sıcaklık trendi) göstermek için idealdir. Kategorileri yan yana karşılaştırmak istediğinizde BarChart, parçaların bütüne oranını göstermek istediğinizde PieChart daha uygundur.
Tasarımcı özellikleri
Bir LineChart seçildiğinde Özellik Görüntüleyici sekmelere ayrılır.
General
| Özellik | Açıklama |
|---|---|
Name | Nesnenin koddaki adı (ör. LineChart1). Koddan bu adla erişirsiniz. |
Caption | Nesnenin başlık/etiket bilgisi (ControlCaption, çok dilli olabilir). |
Data Source
Grafiğin çizeceği veriyi belirler. Veriyi ya elle (kod ile Data özelliğine bir nesne atayarak) ya da bir veri kaynağına bağlayarak verirsiniz.
| Özellik | Açıklama |
|---|---|
Data | Grafiğe doğrudan atanan veri kümesi (Object). Koddan hazırladığınız satır listesini buraya verir, ardından Reload() çağırırsınız. |
DataSource | Grafiğin bağlanacağı veri kaynağı (.mssqlds, .restds vb.). Kayıtlar buradan otomatik çekilir. |
Behavior
| Özellik | Açıklama |
|---|---|
Charts | Grafikteki çizgi serilerinin listesi (List<ChartItem>). Her seri hangi alanı (ArgumentField / ValueField) ve hangi tipte (Type) çizeceğini belirtir. |
ArgumentAxis | Yatay eksen (X) ayarları (ChartArgumentAxis). Genelde kategori ya da tarih bilgisini taşır. |
ValueAxis | Dikey eksen (Y) ayarları (ChartValueAxis). Sayısal değerleri taşır. |
Legend | Açıklama kutusu / gösterge (ChartLegend). Position ve Enabled ile yönetilir. |
Tooltip | Fareyle bir noktanın üzerine gelince çıkan bilgi balonu (ChartTooltip, Enabled). |
Hover | Fare üzerine gelince çizginin vurgulanma davranışı (ChartHover, Enabled). |
Selection | Çizgi ya da nokta seçildiğindeki davranış (ChartSelection, Enabled). |
Animation | Grafik çizilirken çalışan hareket efekti (ChartAnimation, Enabled). |
Stack | Birden çok seriyi üst üste yığma ayarı (ChartStack; Series ile hangi serilerin yığılacağı belirlenir). |
ZoomAndPan | Yakınlaştırma ve kaydırma davranışı (ChartZoomAndPan; InteractionWithArguments / InteractionWithValues / ZoomRegionKey). |
Rotate | Grafiği yatay/dikey çevirir (Boolean). |
Loading | Yükleniyor durumu (Boolean). ShowLoading() / HideLoading() ile yönetilir. |
Appearance
| Özellik | Açıklama |
|---|---|
Visible / Client Visible | Nesnenin görünürlüğü. |
Enabled / Client Enabled | Nesnenin aktif olup olmadığı. |
Title | Grafiğin başlığı. MultiLanguageText tipindedir; düz string değil, kültür sözlüğü atanır. |
Style / ContainerStyle | Nesnenin ve kapsayıcısının stil ayarları. |
CustomClassName | Özel CSS sınıf adı. |
ContextMenuKey / ContextMenuColumnKey / ContextMenuTarget | Sağ tık menüsü bağlama ayarları. |
Olaylar
LineChart, değer ya da metin girişi yapmayan bir görsel nesnedir. Nesnenin kendine ait bir olay tanımı yoktur; yalnızca VisualControl temelinden gelen genel etkileşim olaylarını sunar. Veriyi hazırlayıp Reload() çağırmak, bağlanma noktası olarak bu nesneye değil, bulunduğu formun/akışın yükleme olaylarına yazılır.
| Olay | Ne zaman çalışır |
|---|---|
OnClick / OnDoubleClick | Grafiğe tıklanınca / çift tıklanınca (VisualControl.FireClick). |
Diğer bazı nesnelerde gördüğünüz OnInit / OnLoad / OnDataLoad / OnPreRender / OnRender ya da OnValueChanging / OnValueChanged gibi olaylar LineChart'ta yoktur. Grafiği bir koşula göre hazırlamak istiyorsanız kodu formun/akışın yükleme noktasına yazın ve grafiği Reload() ile yenileyin.
Kod örnekleri
Bir LineChart'tan değer okumaz/yazmazsınız. Onun yerine seri tanımını (Charts) ve veriyi (Data) kurar, Reload() ile çizdirirsiniz; ayrıca görünürlük, başlık ve yükleniyor durumunu yönetebilirsiniz. Sunucu örnekleri turuncu, istemci örnekleri kırmızı çerçevelidir.
Grafiği koddan doldurma (C#, sunucu)
En sık kullanılan senaryo: bir veri kümesi hazırlayıp seriyi tanımlamak ve grafiği yenilemek.
// 1) Çizilecek satırlar (DataSource yerine koddan da verilebilir)
var rows = new List<Dictionary<string, object>>
{
new Dictionary<string, object> { ["AY"] = "Ocak", ["ADET"] = 12 },
new Dictionary<string, object> { ["AY"] = "Şubat", ["ADET"] = 18 },
new Dictionary<string, object> { ["AY"] = "Mart", ["ADET"] = 9 },
};
// 2) Çizgi serisi: X ekseni AY, Y ekseni ADET
LineChart1.Charts = new List<ChartItem>
{
new ChartItem
{
Type = ChartType.LineSeries,
ArgumentField = "AY",
ValueField = "ADET",
Name = "Başvuru",
Color = "#3366ff"
}
};
// 3) Veriyi bağla ve çizdir
LineChart1.Data = rows;
LineChart1.Reload();
Başlık, görünürlük ve yükleniyor durumu (C#, sunucu)
Form kodunda nesneye doğrudan adıyla erişirsiniz. Title MultiLanguageText olduğu için düz string değil kültür sözlüğü atanır.
// Başlığı çok dilli olarak ayarla
LineChart1.Title = new MultiLanguageText(
new Dictionary<string, string> { { "tr-TR", "Aylık Başvuru Sayısı" } });
// Gizle / göster
LineChart1.Visible = false;
LineChart1.Visible = true;
// Aktif / pasif yap
LineChart1.Enabled = false;
// Uzun süren bir sorgu sırasında yükleniyor göstergesi
LineChart1.ShowLoading();
// ... veriyi hazırla, Data ata, Reload() çağır ...
LineChart1.HideLoading();
Akış (Flow) kodu (C#, sunucu)
Akış kodunda nesneye Document1.Controls["LineChart1"] ile erişirsiniz. Bu indeksleyici güçlü tipli LineChart nesnesini değil, jenerik bir Control sapı döndürür; sap yalnızca .Value / .Text / .Type / .Rows ve GetPropertyValue<T>() üyelerini sunar. Bu sapı LineChart tipine cast edemezsiniz; dolayısıyla Charts / Data / Reload() gibi Chart'a özgü üyelere akış kodundan erişilemez.
// Jenerik sap yalnızca .Value / .Text / GetPropertyValue<T>() sunar
var deger = Document1.Controls["LineChart1"].Value?.ToString();
Seri tanımı (Charts), veri (Data) ve Reload() gibi grafik üyelerine erişmek için bu işlemleri form (Controller) kodunda yapın; orada nesneye doğrudan adıyla (LineChart1) erişip güçlü tipli üyelerini kullanabilirsiniz (yukarıdaki "Grafiği koddan doldurma" örneğine bakın).
İstemci kodu (TypeScript, tarayıcı)
İstemci tarafında nesnelere this. ile erişilir ve özellik adları küçük harfle yazılır:
// Grafiği gizle / göster
this.LineChart1.visible = false;
this.LineChart1.visible = true;
// Aktif / pasif yap
this.LineChart1.enabled = false;
Grafiğin çizdiği veri ya tasarımcıdan seçtiğiniz DataSource ile otomatik gelir ya da koddan Data özelliğine atanır. Sabit bir sorgu yetiyorsa tasarımcıdan bir veri kaynağı (.mssqlds / .restds) seçmeniz yeterlidir. Veriyi koşullara göre hazırlamanız gerekiyorsa formun/akışın yükleme noktasında satırları oluşturun, Data özelliğine atayın ve Reload() çağırın. Her iki durumda da hangi alanın çizileceğini Charts listesindeki ChartItem.ArgumentField / ValueField belirler.
ChartItem (seri tanımı)
Charts listesindeki her eleman bir çizgi serisidir. Üyeleri:
| Üye | Tip | Açıklama |
|---|---|---|
Type | ChartType | Seri tipi. LineChart için ChartType.LineSeries. Diğer değerler: SplineSeries, BarSeries, ScatterSeries, AreaSeries, PieSeries. |
ArgumentField | String | X ekseninde kullanılacak alan adı (kategori/tarih). |
ValueField | String | Y ekseninde çizilecek sayısal alan adı. |
Name | String | Serinin gösterge (Legend) içindeki adı. |
Color | String | Çizgi rengi (ör. #3366ff). |
ScaleName | String | Birden çok değer ekseni kullanıldığında serinin bağlı olduğu eksen adı. |
BarWidth | Int32? | Çubuk tipli serilerde çubuk genişliği (çizgi serisinde kullanılmaz). |
Çok serili grafik (örnek)
Aynı grafikte iki çizgi göstermek için Charts listesine iki ChartItem ekleyin; her birine Name verirsiniz ki Legend ayırt edebilsin.
LineChart1.Charts = new List<ChartItem>
{
new ChartItem { Type = ChartType.LineSeries, ArgumentField = "AY", ValueField = "PLAN",
Name = "Planlanan", Color = "#3366ff" },
new ChartItem { Type = ChartType.LineSeries, ArgumentField = "AY", ValueField = "GERCEK",
Name = "Gerçekleşen", Color = "#ff6600" }
};
// Göstergeyi sağda göster
LineChart1.Legend.Enabled = true;
LineChart1.Legend.Position = ChartPosition.Right;
LineChart1.Data = rows;
LineChart1.Reload();
İpuçları
- Veriyi koddan atadığınızda
Reload()çağırmayı unutmayın; aksi halde grafik eski halinde kalır. - Birden fazla çizgiyi aynı grafikte göstermek için
Chartslistesine birden çokChartItemekleyin; her birineNameveripLegend.Enabled = trueyapın. - Çok sayıda nokta çizdireceğiniz grafiklerde
ZoomAndPan.InteractionWithArgumentsdeğeriniChartInteraction.Panya daZoomyaparak kullanıcının veriye yakınlaşmasını sağlayın. - Uzun süren bir sorgudan önce
ShowLoading(), veri hazır oluncaHideLoading()çağırarak kullanıcıya bekleme göstergesi verin. - Eksen çizgilerini ve ızgarayı
ArgumentAxis/ValueAxisüzerindekiShowGrid,ShowLabels,ShowLine,ShowTicksözellikleriyle ayarlarsınız.
Tüm tasarımcı özellikleri (tam liste)
General: Name, Caption
Data Source: Data, DataSource
Behavior: Charts, ArgumentAxis, ValueAxis, Legend, Tooltip, Hover, Selection, Animation, Stack, ZoomAndPan, Rotate, Loading
Appearance: Visible, Client Visible, Enabled, Client Enabled, Title, Style, ContainerStyle, CustomClassName, ContextMenuKey, ContextMenuColumnKey, ContextMenuTarget, ControlId, DefaultEnabled, DefaultClientEnabled
Yöntemler: Reload(), Show(), Hide(), ShowLoading(), HideLoading(), ToggleLoading(), ScrollTo(), FireClick(), GetProtectedData(bool), GetDifferences(object), OnDataSourceAddItem(object, DataSourceAddItemEventArgs)
Olaylar: OnClick, OnDoubleClick (yalnızca VisualControl temelinden gelir; LineChart'ın kendine ait olayı yoktur)
İlgili tipler: ChartItem, ChartType (LineSeries / SplineSeries / BarSeries / ScatterSeries / AreaSeries / PieSeries), ChartPosition (Left / Top / Right / Bottom), ChartInteraction (None / Pan / Zoom / Both), ChartZoomRegion (Shift / Alt / Ctrl), ChartArgumentAxis, ChartValueAxis, ChartLegend, ChartTooltip, ChartHover, ChartSelection, ChartStack, ChartAnimation, ChartZoomAndPan