Chart

Genel Bakış

Bir chart sistemi, sayısal veya kategorik verileri grafik biçimde temsil etmek için kullanılan bir veri görselleştirme bileşenidir. Kullanıcıların veri setleri içindeki eğilimleri, karşılaştırmaları, dağılımları ve ilişkileri anlamalarına yardımcı olur.

Grafikler yaygın olarak şu alanlarda kullanılır:

  • dashboardlar ve analiz araçları,
  • endüstriyel izleme sistemleri,
  • finansal raporlama platformları,
  • ve gerçek zamanlı veri uygulamaları.

Ana amaç, ham verileri daha hızlı karar vermek için anlamlı görsel içgörülere dönüştürmek.

Ana Özellikler

Temel Görselleştirme Özellikleri

  • Birden fazla grafik türü (çubuk, çizgi, turta, dağınıklık, alan, radar)
  • Gerçek zamanlı ve tarihsel veri desteği
  • Çok serili veri görselleştirme
  • Çok eksenli destek (özellikle Y eksenli ölçeklendirme)
  • Etkileşimli araç ipuçları ve havada duran detaylar

Etkileşim Özellikleri

  • Veri aralıkları arasında yakınlaştırma ve pano
  • Zaman aralığı seçimi (aralık kontrolü)
  • Veri filtreleme ve sıralama
  • Seri geçişi (veri setlerini göster/gizleme)
  • Hassas okuma için nişangah takibi

İhracat ve Raporlama

  • Güncel görünümü dışa aktar (görsel/PDF)
  • Tam veri setini dışa aktarma (CSV/Excel/JSON)
  • Raporlar için anlık görüntü oluşturma

Arayüz Bölümleri ve Yapılandırma

Genel

Alan Açıklama
İsim Harita elemanının iç adı
Yenileme Aralığı (ms) Aralıkları milli saniye cinsinden yenile

Araç Çubuğu Seçenekleri

Seçenek Fonksiyon
Aralık Seçici Kullanıcıların grafik veya veri görünümünde gösterilen zaman aralığını seçmelerine olanak tanır; örneğin Canlı, Son Saat veya a Özel Aralık.
Güncel Görünümü Dışa Aktar Yalnızca seçilen zaman aralığında şu anda görülebilen verileri dışa aktarır.
Tam Veri İç Aktar Mevcut zaman aralığı ne olursa olsun, tüm veri setini dışa aktarır.
Araç Çubuğu Ön Ayarı Hızlı gezinme için önceden belirlenmiş zaman aralığı seçenekleri sunar; Önceden Ayar Yok, Özel Aralık, Son 1 Dakika, Son 1 Saat, Son 3 Saat, Son 6 Saat, Son 12 Saat, Son 1 Gün, Son 1 Hafta ve Son 1 Ay.

Başlık

Alan Açıklama
Dizi Başlığı Grafik başlığını hem önizlemede hem de render edilmiş grafikte gösterir veya gizler
Metin Grafik başlığı olarak gösterilen metni belirtir.
Hizalama Grafik başlığının yatay hizasını belirler.
Başlık Metin Stili Başlık metni stilizasyon seçeneklerini gösterir veya gizler. Grafik başlığı için tipografi, renk ve taşma davranışını yapılandırın (örneğin: 18 px • 600 Semi Bold • Normal • #161616).

Efsane

Alan Açıklama
Gösteri Efsanesi Bu grafik için yazıyı gösterir veya gizler
Pozisyon Yazıyı grafik alanının etrafına yerleştirir, örneğin üst, sağ, alt ve sol
Düzen Efsane eşyalarını yatay ve dikey olarak düzenler
Hizalanma Mevcut alan içinde efsane hizalanır
Maksimum boy Kaydırma, sarma veya kesme davranışı uygulanmadan önce (grafik yapılandırmasına bağlı olarak) legend alanının maksimum yüksekliğini belirler.
Efsane Metin Stilleri Bu grafik için yazı metin stillerini gösterir veya gizler, örneğin (12 px • 400 Regular • Normal • #525252) Efsane etiketleri için tipografi ve taşma ayarları.

Düzen

Alan Açıklama
Dolgu üstü Üst taraftaki chart içeriği ile kapsısı arasındaki iç boşluk
Alt kısmı dolgu Grafik içeriği ile alt taraftaki kap arasındaki iç boşluk
Sağa dolgu Grafik içeriği ile sağ taraftaki kap arasındaki iç boşluk
Sol dolgu Grafik içeriği ile sol taraftaki kap arasındaki iç boşluk
Kenar başı Üst taraftaki chart konteynerinin etrafındaki dış boşluk
Kenar alt Alt taraftaki chart konteynerinin etrafındaki dış boşluk
Kenar sağ Sağ taraftaki chart konteynerinin etrafında dış boşluk
Kenar sola Sol taraftaki chart konteynerinin etrafında dış boşluk

Data Kaynak

Veri kaynağı düzenlemesi şu anda Kartezyen grafikler, pasta ve donut grafikleri, radar grafikleri ve göstergeler için desteklenmektedir.

Alan Açıklama
Kaynak türü Grafik verilerinin yerel olarak mı düzenlendiğini yoksa trend kaynağından mı yüklendiğini seçin.
Veri Kaydedici Bu grafik önizlemesini doldurmak için kullanılan trend kaynağı
Veri setleri Bu grafik için seçilen trend kaynağından veri setleri
Veri indirgemesi Seçilmiş trend verinin, grafik ön izleme veya render edilmeden önce nasıl azaltıldığı, örneğin. Hepsi, Azaltma, Ortalama, Medyan, Hızlı Azaltma, Yerel Uçlar
Maksimum puan Veri azaltımı uygulandığında trend kaynağından talep edilen puan sayısını sınırlar

Advanced JSON

İşte grafik ayarlarının tam tanımı. Uzman modu kullanımı için.

 {
          "chart": {
            "layout": {
              "paddingTop": 4,
              "paddingRight": 4,
              "paddingBottom": 4,
              "paddingLeft": 4,
              "marginTop": 5,
              "marginRight": 5,
              "marginBottom": 5,
              "marginLeft": 5
            },
            "title": {
              "enabled": true,
              "text": "Pie Chart",
              "align": "center",
              "style": {
                "color": "#161616",
                "fillOpacity": 1,
                "opacity": 1,
                "fontFamily": "",
                "fontSize": 18,
                "fontWeight": "600",
                "fontStyle": "normal",
                "fontVariant": "normal",
                "textDecoration": "none",
                "maxWidth": null,
                "oversizedBehavior": "none",
                "breakWords": false
              }
            },
            "legend": {
              "enabled": true,
              "position": "bottom",
              "layout": "horizontal",
              "textStyle": {
                "color": "#525252",
                "fillOpacity": 1,
                "opacity": 1,
                "fontFamily": "",
                "fontSize": 12,
                "fontWeight": "400",
                "fontStyle": "normal",
                "fontVariant": "normal",
                "textDecoration": "none",
                "maxWidth": null,
                "oversizedBehavior": "none",
                "breakWords": false
              }
            },
            "interaction": {
              "enabled": false,
              "panX": false,
              "panY": false,
              "zoomX": false,
              "zoomY": false,
              "scrollbarX": false,
              "scrollbarY": false,
              "wheelX": "none",
              "wheelY": "none",
              "pinchZoomX": false,
              "pinchZoomY": false
            },
            "axes": {
              "x": [],
              "y": []
            },
            "series": []
          },
          "definition": {
            "kind": "placeholder",
            "title": "Simple Pie Chart",
            "message": "Add at least one row with numeric values for the pie chart."
          }
        }

Sonuçlar aşağıda gösterilmiştir

{ "chart": { "layout": { "paddingTop": 4, "paddingRight": 4, "paddingBottom": 4, "paddingLeft": 4, "marginTop": 5, "marginRight": 5, "marginBottom": 5, "marginLeft": 5 }, "title": { "enabled": true, "text": "Pie Chart", "align": "center", "style": { "color": "#161616", "fillOpacity": 1, "opacity": 1, "fontFamily": "", "fontSize": 18, "fontWeight": "600", "fontStyle": "normal", "fontVariant": "normal", "textDecoration": "none", "maxWidth": null, "oversizedBehavior": "none", "breakWords": false } }, "legend": { "enabled": true, "position": "bottom", "layout": "horizontal", "textStyle": { "color": "#525252", "fillOpacity": 1, "opacity": 1, "fontFamily": "", "fontSize": 12, "fontWeight": "400", "fontStyle": "normal", "fontVariant": "normal", "textDecoration": "none", "maxWidth": null, "oversizedBehavior": "none", "breakWords": false } }, "interaction": { "enabled": false, "panX": false, "panY": false, "zoomX": false, "zoomY": false, "scrollbarX": false, "scrollbarY": false, "wheelX": "none", "wheelY": "none", "pinchZoomX": false, "pinchZoomY": false }, "axes": { "x": [], "y": [] }, "series": [] }, "definition": { "kind": "placeholder", "title": "Simple Pie Chart", "message": "Add at least one row with numeric values for the pie chart." } }