Bu sayfada, grafik veri tablolarındaki rollerin kavramı ve kullanımı açıklanmaktadır.
Roller nedir?
Google DataTable ve DataView nesneleri artık açıkça atanan sütun rollerini desteklemektedir. Bir 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 içerebilir. Çoğu sütun rolü, kendisinden önceki veya art arda olan rol sütunu grubunun ilkinden önceki "veriler" sütunu için geçerlidir. Örneğin, bir "veri" sütununun ardından, biri "ipucu" ve diğeri "ek açıklama" için olmak üzere iki sütununuz olabilir. Ancak 'alan' sütununun ardından genellikle 'ek açıklama' ve 'notMetin' sütun rollerine de izin veririz.
Not: Kullanıcı bir grafiğin üzerine geldiğinde görünen ipuçlarının içeriğini kontrol etmek istiyorsanız İpuçları konusuna bakın.
Başlangıçta, bir sütun için yalnızca iki rol vardı: Ana eksen değerlerini belirten "domain"; çubuk yüksekliklerini, pasta dilimi genişliklerini vb. belirten "data". Bu roller, tablodaki sütunların sıralamasına ve türüne göre dolaylı olarak atanır. Bununla birlikte, artık sütun rollerini açıkça atama olanağı sayesinde bir 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ça atamazsanız grafiğin rolü, grafiğin veri biçimi spesifikasyonuna göre tablodaki sırası tarafından tahmin edilir. Bu sayfada, açık bir şekilde atayabileceğiniz roller ve bunları nasıl atayacağınız gösterilir.
Yalnızca varsayılan olarak tahmin edilen rolleri kullanarak ve açıkça atanan ek rollerle çizgi grafikte neler yapabileceğinizi öğrenin.
Çizgi grafik veri tablosu biçimi:
| Sütun 0 | 1. Sütun | ... | Sütun N | |
|---|---|---|---|---|
| Amaç | Satır 1 değerleri | ... | Satır N değerleri | |
| Veri Türü | number (sayı) | ... | number (sayı) | |
| Rol | alan | veri | ... | veri |
| İsteğe bağlı olarak desteklenen sütun rolleri |
|
|
... |
|
| Uygunsuz Sütun Rolleri Olmayan Grafik | Uygunsuz Sütun Rolleri İçeren Grafik |
|---|---|
|
|
|
Bu grafik açıkça rolleri uygulamadığından yalnızca temel verileri ve alan sütunu düzenini kullanabilir. Veri Tablosu: 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 grafik açık bir şekilde roller atadığından isteğe bağlı sütunlar eklenebilir. Bu grafikte ek açıklama, ek açıklama metni, aralık ve kesinlik rolleri için isteğe bağlı sütunlar vardır.
Veri Tablosu: 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 Listeleri tarafından sağlanan tüm roller listelenmiştir. Tüm grafik türleri tüm rolleri desteklemez. Her grafiğin dokümanlarında, hangi rollerin kullanılabildiği ve nerede kullanılabileceği açıklanmıştır. Roller farklı grafik türleri için farklı şekilde oluşturulur.
| Rol | Açıklama | Örnek |
|---|---|---|
| ek açıklama | İlişkili veri noktasının yanındaki grafikte görüntülenecek metin. Metin, 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. Ek açıklama metnini belirtilen noktanın yakınında çizen nokta (varsayılan) ve ek açıklama metnini grafik alanını ikiye ayıran bir çizginin çizdiği satır bulunur. Bu grafik seçeneğini ayarlayarak çizgi stilini belirtebilirsiniz: Veri türü: dize Varsayılan: Boş dize |
Veri: <br class var olan [ var] var olan durumda özellikle durumda söz [ olması] Burada, söz mü olması durumda } Burada başka [1_1_ kat kat vereceğim kişileri daha daha söz ve kişileri daha daha daha daha daha---------- herhangi birinin herhangi birinin henüz sınır durumda sınır [} kişileri daha daha daha daha daha daha daha daha daha daha dahaca müca hiçbirca önceki Önce daha daha (--------------] başka yapmanızı özellikle fakat ( kat ( kişileri ( müs müs durumda durumda }] doğru durumda olma] çözüm Burada bulunan 11: var: var var: var: var var var var var var var var var var var var var: tam : var var var var var var var var var kat kat kat var: o bilgilendirme ürün bir müyle mü olması herhangi {2/} durumda [ herhangi bir [(( mü mütt====r}[END_= kişinin önceki ve [ herhangi class[(((=
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 ek açıklama değerini görüntülemek için üzerine uygulandığı veri noktasının değil, ek açıklamanın üzerine gelmeniz gerektiğini unutmayın. Hem ek açıklama hem de ek açıklama metni hücreleri için boş değerler kabul edilir. Ancak bir ek açıklama metni değeriniz varsa, ilişkili bir ek açıklama değerinizin olması gerekir. |
| açıklama Metni | Kullanıcı, ilgili ek açıklamanın üzerine geldiğinde gösterilecek metin. Ek açıklamalar ve ek açıklama metinleri hem veri noktalarına hem de kategorilere (eksen etiketleri) atanabilir. descriptionText sütununuz varsa bir ek açıklama sütununuz da olmalıdır. İpucu metni ise kullanıcı, grafikteki ilgili veri noktasının üzerine geldiğinde gösterilir. Veri türü: dize Varsayılan: Boş dize |
|
| kesinlik | Bir veri noktasının kesin olup olmadığını belirtir. Bu özelliğin gösterilme şekli, grafik türüne bağlıdır. Örneğin, çizgili çizgi veya çizgili çizgiyle gösterilebilir. Çizgi ve alan grafiklerinde, yalnızca her iki veri noktası da belliyse iki veri noktası arasındaki segment kesindir. Veri türü: Boole (true (doğru) değeri, "false" (yanlış) belirsiz olduğunda. 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, yalnızca her iki veri noktası da vurgulanıyorsa iki veri noktası arasındaki segment vurgulanır. Veri türü: boole Varsayılan: false |
Veri: 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ü ve birinci satır ile iki satırlarla tanımlanmış bir vurgulu segment bulunur. "Giderler" serisinde beşinci sütun, ikinci, üç ve dört satır olmak üzere iki vurgulanan segment bulunur. Vurgunun, her iki sınırlayıcı noktanın da vurgulanmasını nasıl gerektirdiğini unutmayın. |
| aralık | Belirli bir noktanın potansiyel veri aralığını belirtir. Aralıklar genellikle I-bar stili aralık göstergeleri olarak görüntülenir. Aralık sütunları sayısal sütunlardır; çubuğun düşük ve yüksek değerini işaretleyerek aralıklar halinde aralık sütunları ekleyin. Aralık değerleri, soldan sağa doğru artan değerde eklenmelidir. Veri türü: sayı Varsayılan: Aralık yok |
Veri: 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ı çevreleyen bir I çubuğu tanımlar. Değerler soldan sağa doğru artar. Bir noktanın çevresindeki en yüksek ve en düşük aralıklar, çubuğun üst ve alt kısmını belirtir. Not: Aralıklarla ilgili tüm ayrıntılar için Aralıklar sayfasına göz atın. |
| kapsam | Bir noktanın kapsama dahil olup olmadığını belirtir. Bir nokta kapsam dışındaysa görsel olarak vurgulanır. Çizgi ve alan grafiklerinde, uç nokta kapsamında iki veri noktası arasındaki segment kapsam dahilindedir. Veri türü: boole; true değeri, kapsam kapsamına girer. Varsayılan: true |
Veri: 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ğundan ilk segment kapsam dışında bırakıldı. İkinci kapsam sütunu, sol kısmındaki "Giderler" veri sütunu için geçerlidir. İlk segment, kapsam noktalarından biri kapsama alanı içinde olduğu için kapsam dahilinde olarak işaretlenir. Diğer tüm noktalar kapsam dışında olarak işaretlendiğinden, çizginin geri kalanı kapsam dışında olarak kalır. |
| stil |
Verilerinizin farklı özelliklerindeki belirli özelliklerin stilini belirler. Bu değerler şunlardır:
Veri Türü: dize, birden fazla stilin Varsayılan: null |
Veri:
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, Not: Nokta, çizgi ve çubuk stilinin nasıl özelleştirileceği hakkında daha fazla ayrıntı bulunmaktadır. Ayrıca alanlar, metin ve kutular gibi diğer öğe türleri için stillerin belirtilebileceği her bir grafik türüne ilişkin seçeneklere bakın. |
| ipucu |
Kullanıcı, bu satırla ilişkili veri noktasının üzerine geldiğinde gösterilecek metin. Not: Bu, Bubble Graphic görselleştirmesi tarafından desteklenmez. Bubble Chart HTML araç ipuçlarının içeriği özelleştirilemez. Veri türü: dize Varsayılan: Veri noktası değeri |
Veri: 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 fareyle veri noktalarının üzerine gelin. İpucu verileri 3. ve 5. sütunlarda her iki satırdaki tüm noktalara atanır. Not: İpuçlarını özelleştirme hakkında daha fazla bilgi için İpuçları konusuna bakın. |
| alan adı | Çok alanlı 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 motorunun hangi sütunların alan sütunları olduğunu anlamasını sağlar. Ancak hangi sütunların hangi sütunların değiştirilebileceğini bilmeniz için hangi sütunların alan sütunları olduğunu bilmeniz gerekir. Alan sütunları, grafiğin ana ekseni boyunca etiketleri belirtir. Bazen aynı grafik içinde birden çok ölçeği desteklemek için birden fazla alan sütunu kullanılabilir. Veri türü: Genellikle dize ancak bazen sayı veya tarih |
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, çok alanlı bir grafik gösterilmektedir. İlk iki veri sütunu, ilk alanı ("2009 Çeyrek") ve son iki veri sütunu ise ikinci alanı ("2008 Çeyrek") değiştirir. Her iki alan da aynı eksen ölçeğinde yer paylaşımlı olarak kullanılır. |
| veriler | Bu rolü açıkça atamanıza gerek yoktur. Veri tablosunun temel biçimi, grafik motorunun hangi sütunların alan sütunları olduğunu anlamasını sağlar. Ancak hangi sütunların veri sütunları olduğunu bilirsiniz. Böylece, hangi diğer sütunların 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 değer grafik türüne göre değişebilir (örneğin, dağılım grafiklerinde ilk seri için iki veri sütunu, her bir seri için başka bir veri sütunu gerekir. Şamdan grafiklerde ise her dizi 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ı hariç tüm sütunlar, uygulanabilecek en yakın sol komşu için geçerlidir.
Örneğin, solunda en yakın data sütunu için bir scope sütunu, solunda en yakın ek açıklama sütununa, sol tarafta ise en yakın data ya da domain sütununa ek açıklama sütunu uygulanır.
Rol Atama
Roller, DataTable nesnesindeki sütunun bir ö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 çizer:
DataTable.addColumn Yöntemi
Aşağıdaki örnekte, çubukların üçünde aralık işaretleyici içeren bir çubuk grafik oluşturulmuştur. 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 Yazılı Gösterimi
JSON değişmez sütununda, "role":"role-type" değerine sahip sütunun bir p özelliğini belirtmeniz gerekir.
Aşağıdaki örnekte, JavaScript değişmez gösterimi kullanılarak rollerin nasıl belirtileceği gösterilmektedir. Bu işlem yalnızca tablo oluşturulurken 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
Bir görünüm oluştururken bir sütunun rolünü açıkça ayarlayabilirsiniz. Bu metrik, yeni bir hesaplanmış sütun oluştururken kullanışlıdır. Daha fazla bilgi için DataView.setColumns() başlıklı makaleyi inceleyin.