Bu sayfada, grafik verisi tablolarındaki roller kavramı ve kullanımı açıklanmaktadır.
Roller nedir?
Google DataTable ve DataView nesneleri artık açıkça atanmış sütun rollerini destekliyor. Sütun rolü, söz konusu sütundaki verilerin amacını açıklar: Örneğin, bir sütun ipucu metnini, veri noktası ek açıklamalarını veya belirsizlik göstergelerini açıklayan verileri barındırabilir. Çoğu sütun rolü, ister hemen öncesinde ister ardışık bir rol sütunları grubunun ilk grubundan önce olsun, önündeki "veriler" sütunu için geçerlidir. Örneğin, "veriler" sütununun ardından biri "ipucu" ve diğeri "notlar" için olmak üzere iki sütununuz olabilir. Ancak "domain" sütununun ardından genellikle "annotation" ve "annotationText" sütun rollerine de izin verilir.
Not: Kullanıcı fareyle bir grafiğin üzerine geldiğinde görünen ipuçlarının içeriğini kontrol etmek istiyorsanız İpuçları'na bakın.
Başlangıçta bir sütun için yalnızca iki rol bulunuyordu: ana eksen değerlerini belirten "alan adı" ve çubuk yüksekliklerini, pasta dilimi genişliklerini vb. belirten "veri". Bu roller, tablodaki sütunların sıralaması ve türüne göre dolaylı olarak atanmıştır. Bununla birlikte, sütun rollerini açık bir şekilde atayabilme olanağı sayesinde artık grafiğe rastgele ek açıklama etiketleri, fareyle üzerine gelme metni ve belirsizlik çubukları gibi yeni ve ilginç özellikler sağlayan isteğe bağlı sütunlar ekleyebilirsiniz.
Bir sütunun rolünü açık bir şekilde atamazsanız rolü, grafiğin veri biçimi spesifikasyonuna göre sütunun tablodaki sırasına göre belirlenir. Bu sayfada, açıkça atayabileceğiniz roller ve bunların nasıl atanacağı gösterilmektedir.
Aşağıda, açıkça atanmış ek rollere kıyasla yalnızca varsayılan, tahmin edilen rolleri kullanan bir çizgi grafikle yapabileceklerinizin karşılaştırması verilmiştir.
Çizgi grafik veri tablosu biçimi:
| Sütun 0 | 1. Sütun | ... | N sütunu | |
|---|---|---|---|---|
| Amaç | Satır 1 değerleri | ... | N. satır değerleri | |
| Veri Türü | sayı | ... | sayı | |
| Rol | alan | veri | ... | veri |
| İsteğe bağlı desteklenen sütun rolleri |
|
|
... |
|
| Açık Sütun Rolleri Olmayan Grafik | Uygunsuz Sütun Rolleri İçeren Grafik |
|---|---|
|
|
|
Bu grafikte, roller açıkça uygulanmaz. Bu nedenle, yalnızca yukarıda gösterilen temel veriler ve alan adı sütunu düzeni kullanılabilir. DataTable: var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addRows([
['April',1000],
['May', 1170],
['June', 660],
['July', 1030]
]); |
Bu grafikte roller açıkça atandığı için isteğe bağlı sütunlar eklenebilir. Bu grafikte ek açıklama, ek açıklama, aralık ve kesinlik rolleri için isteğe bağlı sütunlar bulunur.
DataTable: var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({type:'number', role:'interval'}); // interval role col.
data.addColumn({type:'number', role:'interval'}); // interval role col.
data.addColumn({type:'string', role:'annotation'}); // annotation role col.
data.addColumn({type:'string', role:'annotationText'}); // annotationText col.
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
['April',1000, 900, 1100, 'A','Stolen data', true],
['May', 1170, 1000, 1200, 'B','Coffee spill', true],
['June', 660, 550, 800, 'C','Wumpus attack', true],
['July', 1030, null, null, null, null, false]
]); |
Hangi Roller Kullanılabilir?
Aşağıdaki tabloda, Google Charts'ın desteklediği tüm roller listelenmiştir. Tüm roller her grafik türünde desteklenmez. Her grafiğin belgelerinde hangi rollerin kullanılabileceği ve bu rollerin yeri açıklanır. Roller farklı grafik türlerinde farklı şekilde oluşturulur.
| Rol | Açıklama | Örnek |
|---|---|---|
| not | İlişkilendirilmiş veri noktasının yanındaki grafikte gösterilecek metin. Metin, herhangi bir kullanıcı etkileşimi olmadan görüntülenir. Ek açıklamalar ve ek açıklama metinleri hem veri noktalarına hem de kategorilere (eksen etiketleri) atanabilir. İki ek açıklama stili vardır: ek açıklama metnini belirtilen noktanın yakınında çizen nokta (varsayılan) ve ek açıklama metnini grafik alanını ikiye bölen bir çizgi üzerinde çizen çizgi. Şu grafik seçeneğini ayarlayarak çizgi stilini belirtebilirsiniz: Veri türü: dize Varsayılan: Boş dize |
Veriler: label: "Yıl", "Satış", null, null, '0, ll, 0, nu1, nu0, null0, null0, null, null0, null0, null, null0 model, null, null role: alan adı, veri, ek açıklama, ek açıklama, veri, ek açıklama, ek açıklama, '2004', 1.000, null, null, 400, null, null'0, '1'0'1'0, null, model, null0, null0, null0 model, null, null0 model, null, null
Bu grafikteki "A" ve "B" ek açıklamalardır. Ek açıklama metnini görmek için fareyle ek açıklamanın üzerine gelin. Notlar Metni değerini görüntülemek için fareyle, uygulandığı veri noktasının değil, ek açıklamanın üzerine gelmeniz gerektiğini unutmayın. Ek açıklama ve ek açıklamaText hücreleri için boş değerler kabul edilir. Ancak, ek açıklamaText değeriniz varsa ilişkili bir ek açıklama değeriniz olmalıdır. |
| annotationText | Kullanıcı ilişkilendirilmiş ek açıklamanın üzerine geldiğinde gösterilecek genişletilmiş metin. Ek açıklamalar ve ek açıklama metinleri hem veri noktalarına hem de kategorilere (eksen etiketleri) atanabilir. Ek açıklamaText sütununuz varsa bir ek açıklama sütununu da almanız gerekir. Buna karşılık, kullanıcı grafikte ilişkili veri noktasının üzerine geldiğinde ipucu metni gösterilir. Veri türü: dize Varsayılan: Boş dize |
|
| belirsizlik | Bir veri noktasının kesin olup olmadığını gösterir. Bunun nasıl gösterileceği, grafik türüne bağlıdır. Örneğin, kesik çizgilerle veya çizgili bir dolguyla gösterilebilir. Çizgi ve alan grafiklerinde, iki veri noktası arasındaki segment yalnızca her iki veri noktası da kesin olduğunda kesindir. Veri türü: boole; true (doğru) kesin, false (yanlış) belirsizdir. Varsayılan: true |
|
| vurgu | Belirtilen grafik veri noktalarını vurgular. Kalın bir çizgi ve/veya büyük bir nokta olarak gösterilir. Çizgi ve alan grafiklerinde, iki veri noktası arasındaki segment yalnızca her iki veri noktasının vurgulanması durumunda vurgulanır. Veri türü: boole Varsayılan: false |
Veriler: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, emphasis, data, emphasis
'2004', 1000, true, 400, false
'2005', 1170, true, 460, true
'2006', 660, false, 1120, true
'2007', 1030, false, 540, true
Bu grafikte, "Satış" serisinde üçüncü sütun, birinci ve ikinci satırlarla belirtilmiş vurgulu bir segment bulunmaktadır. "Giderler" serisinde beşinci sütun, ikinci, üçüncü ve dördüncü satırlar ile belirtilmiş iki vurgulu segment vardır. Vurgunun her iki sınır noktasının da vurgulanmasını gerektirdiğine dikkat edin. |
| aralık | Belirli bir noktanın olası veri aralığını belirtir. Aralıklar genellikle I-çubuk stili aralık göstergeleri olarak gösterilir. Aralık sütunları sayısal sütunlardır. Aralık sütunlarını çiftler halinde ekleyerek çubuğun düşük ve yüksek değerlerini işaretleyin. Aralık değerleri, artan değerle, soldan sağa doğru eklenmelidir. Veri türü: sayı Varsayılan: Aralık yok |
Veriler: label: 'Day', 'Stock value', null, null
role: domain, data, interval, interval
'Mon', 38, 20, 45
'Tue', 55, 31, 66
'Wed', 77, 50, 80
'Thurs', 66, 50, 77
Bu grafikte, aralık değerleri noktaların etrafında bir I-çubuğu tanımlar. Değerler soldan sağa doğru artar. Bir nokta etrafındaki en yüksek ve en düşük aralıklar, çubuğun üst ve alt kısmını işaretler. Not: Aralıklarla ilgili tüm ayrıntılar için Aralıklar bölümüne bakın. |
| kapsam | Bir noktanın kapsam içinde olup olmadığını gösterir. Bir nokta kapsam dışındaysa görsel olarak vurgulanmaz. Çizgi ve alan grafiklerinde, uç noktalardan biri kapsam dahilindeyse iki veri noktası arasındaki segment kapsam dahilindedir. Veri türü: boole; doğru değeri, kapsam dahilinde olduğu anlamına gelir. Varsayılan: true |
Veriler: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, scope, data, scope
'2004', 1000, false, 400, true
'2005', 1170, false, 460, false
'2006', 660, true, 1120, false
'2007', 1030, true, 540, false
İlk kapsam sütunu, solundaki "Satış" veri sütunu için geçerlidir. Her iki sınır noktası da kapsam dışında olduğu için ilk segment kapsam dışında oluşturuldu. İkinci kapsam sütunu, solundaki "Giderler" veri sütunu için geçerlidir. İlk segment, sınır noktalarından biri kapsam dahilinde olduğu için kapsam dışında, diğer tüm noktalar ise kapsam dışında olarak işaretlendiğinden çizginin geri kalanı kapsam dışında olarak işaretlendi. |
| stil |
Verilerinizin farklı yönlerinin belirli özelliklerinde stil sağlar. Bu değerler şunlardır:
Varsayılan: null |
Veriler:
label: 'Character', 'Popularity', 'Style',
role: domain, data, style,
'Hulk', 50, 'color: green',
'Captain America', 75, 'color: #0000cf;' +
'stroke-color: #cf001d',
'Wolverine', 90, 'opacity: 0.5;' +
'stroke-width: 5;' +
'stroke-color: #01a0ff;' +
'fill-color: #fff600',
'Iron Man', 60, 'color: #db9500;' +
'stroke-width: 10;' +
'stroke-color: #a30300',
'Spider Man', 100, 'bar {' +
'fill-color: #c8001d;' +
'stroke-width: 3;' +
'stroke-color: #1800c8}'
Bu grafikte, her çubuğun stili Not: Nokta, çizgi ve çubuk stilinin nasıl özelleştirileceğiyle ilgili daha fazla ayrıntıyı başka bir yerde bulabilirsiniz. Ayrıca alanlar, metin ve kutular gibi diğer varlık türleri için stillerin belirtilebileceği her grafik türüyle ilgili seçeneklere bakın. |
| ipucu |
Kullanıcı fareyle bu satırla ilişkili veri noktasının üzerine geldiğinde gösterilecek metin. Not: Bu, baloncuk grafiği görselleştirmesi tarafından desteklenmez. Balon Grafik HTML ipuçlarının içeriği özelleştirilemez. Veri türü: dize Varsayılan: Veri puanı değeri |
Veriler: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, tooltip, data, tooltip
'2004', 1000, '1M$ sales, 400, '$0.4M expenses
in 2004' in 2004'
'2005', 1170, '1.17M$ sales, 460, '$0.46M expenses
in 2005' in 2005'
'2006', 660, '.66$ sales, 1120, '$1.12M expenses
in 2006' in 2006'
'2007', 1030, '1.03M$ sales, 540, '$0.54M expenses
in 2007' in 2007'
İpucu metnini görüntülemek için veri noktalarının üzerine gelin. İpucu verileri, 3. ve 5. sütunda her iki satırdaki tüm noktalara atanmıştır. Not: İpuçlarını özelleştirme hakkında daha fazla bilgi için İpuçları bölümüne bakın. |
| alan adı | Birden çok alan adına sahip bir grafik (burada gösterilmiştir) tasarlamadığınız sürece bu rolü açıkça atamanıza gerek yoktur. Veri tablosunun temel biçimi, grafik oluşturma motorunun hangi sütunların alan sütunu olduğunu tahmin etmesini sağlar. Ancak hangi sütunların alan sütunu olduğunu bilmeniz gerekir. Böylece, diğer sütunlardan hangilerinin değiştirilebileceğini öğrenebilirsiniz. Alan adı sütunları, grafiğin ana eksenindeki etiketleri belirtir. Aynı grafik içinde birden çok ölçeği desteklemek için birden fazla alan adı sütunları kullanılabilir. Veri türü: Genellikle dizedir ancak bazen sayı veya tarih olur. |
Veri:
label: '2009, '2009, '2009, '2008, '2008 '2008
Quarter', Sales', Expenses', Quarter', Sales', Expenses'
role: domain, data, data, domain, data, data
'Q1/09', 1000, 400, 'Q1/08', 800, 300
'Q2/09', 1170, 460, 'Q2/08', 750, 400
'Q3/09', 660, 1120, 'Q3/08', 700, 540
'Q4/09', 1030, 540, 'Q4/08', 820, 620
Bu örnekte, birden çok alan adına sahip bir grafik gösterilmektedir. İlk iki veri sütunu ilk alanı ("2009 Çeyrek"), son iki veri sütunu ise ikinci alanı ("2008 Çeyrek") değiştirir. Her iki alan da aynı eksen ölçeklerinde yer alır. |
| verileri | Bu rolü açık bir şekilde atamanız gerekmez. Veri tablosunun temel biçimi, grafik motorunun hangi sütunların alan sütunu olduğunu tahmin etmesini sağlar. Ancak hangi sütunların veri sütunu olduğunu bilmeniz gerekir. Böylece diğer sütunlardan hangilerinin bu verileri değiştirebileceğini bilirsiniz. Veri rolü sütunları, grafikte oluşturulacak seri verilerini belirtir. Çoğu grafikte bir sütun = bir dizidir ancak bu, grafik türüne göre değişiklik gösterebilir (örneğin, dağılım grafikleri ilk seri için iki veri sütunu ve her ek seri için ek bir veri sütunu gerektirir; şamdan grafiklerde her seri için dört veri sütunu gerekir). Veri türü: sayı |
Rol Hiyerarşisi ve İlişki
Aşağıdaki şemada, hangi rol sütunlarının diğer rol sütunlarına uygulanabileceği gösterilmektedir. Alan sütunları dışındaki tüm sütunlar, uygulanabileceği en yakın sol komşuya uygulanır.
Dolayısıyla, örneğin, bir scope sütunu solundaki en yakın data sütununa uygulanır; bir annotationText sütunu soldaki en yakın annotation sütununa uygulanır; not sütunu ise solundaki en yakın data veya domain sütununa uygulanır.
Rol Atama
Roller, bir DataTable nesnesindeki sütunun özelliği olarak atanır. Rol sütunu oluşturmanın birkaç yolu vardır ancak en yaygın olanları şunlardır:
İlk iki teknik aşağıdaki grafiği oluşturur:
DataTable.addColumn Yöntemi
Aşağıdaki örnekte, çubukların üçünde aralık işaretleyici bulunan bir çubuk grafik oluşturulur. Aralık işaretçileri, DataTable.addColumn() yöntemi kullanılarak üçüncü ve dördüncü sütunlar tarafından belirtilir.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain column.
data.addColumn('number', 'Sales'); // Implicit data column.
data.addColumn({type:'number', role:'interval'});
data.addColumn({type:'number', role:'interval'});
data.addColumn('number', 'Expenses');
data.addRows([
['April',1000, 900, 1100, 400],
['May', 1170, 1000, 1200, 460],
['June', 660, 550, 800, 1120],
['July', 1030, , , 540]
]);
var chart = new google.visualization.BarChart(
document.getElementById('visualization'));
chart.draw(data,
{width: 800, height: 600, title: 'Company Performance'});
JavaScript Değişmez Gösterimi
JSON değişmez değerinde, "role":"role-type" değeriyle sütun için bir p özelliği belirtmeniz gerekir.
Aşağıdaki örnekte, JavaScript değişmez değer gösterimi kullanılarak rollerin nasıl belirtileceği gösterilmektedir. Bu işlem yalnızca tablo oluşturma zamanında yapılabilir.
{"cols":[
{"id":"","label":"Month","pattern":"","type":"string"},
{"id":"","label":"Sales","pattern":"","type":"number"},
{"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
{"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
{"id":"","label":"Expenses","pattern":"","type":"number"}],
"rows":[
{"c":[
{"v":"April","f":null},
{"v":1000,"f":null},
{"v":900,"f":null},
{"v":1100,"f":null},
{"v":400,"f":null}]},
{"c":[
{"v":"May","f":null},
{"v":1170,"f":null},
{"v":1000,"f":null},
{"v":1200,"f":null},
{"v":460,"f":null}]},
{"c":[{"v":"June","f":null},
{"v":660,"f":null},
{"v":550,"f":null},
{"v":800,"f":null},
{"v":1120,"f":null}]},
{"c":[
{"v":"July","f":null},
{"v":1030,"f":null},
{"v":null,"f":null},
{"v":null,"f":null},
{"v":540,"f":null}]}],
"p":null
}
DataView.setSütunlar Yöntemi
Görünüm oluştururken, bir sütunun rolünü açıkça ayarlayabilirsiniz. Bu, yeni bir hesaplanmış sütun oluştururken kullanışlıdır. Daha fazla bilgi için bkz. DataView.setColumns().