Halaman ini menjelaskan konsep dan penggunaan peran dalam tabel data diagram.
- Apa yang dimaksud dengan Peran?
- Peran Apa yang Tersedia?
- Hierarki Peran dan Asosiasi
- Menetapkan Peran
Apa yang dimaksud dengan Peran?
Objek Google DataTable dan DataView kini mendukung peran kolom yang ditetapkan secara eksplisit. Peran kolom menjelaskan tujuan data dalam kolom tersebut: misalnya, kolom mungkin menyimpan data yang menjelaskan teks tooltip, anotasi titik data, atau indikator ketidakpastian. Sebagian besar peran kolom diterapkan ke kolom 'data' di depannya, baik sebelum atau sebelum grup kolom pertama secara berurutan. Misalnya, Anda dapat memiliki dua kolom setelah kolom 'data', satu untuk 'tooltip' dan satu lagi untuk 'anotasi'. Namun setelah kolom 'domain', kami juga umumnya mengizinkan peran kolom 'annotation' dan 'annotationText'.
Catatan: jika Anda ingin mengontrol konten tooltip yang muncul saat pengguna mengarahkan kursor ke diagram, lihat Tooltip.
Awalnya, hanya ada dua peran untuk kolom: 'domain', yang menentukan nilai sumbu utama; dan 'data', yang menentukan tinggi batang, lebar irisan diagram lingkaran, dan seterusnya. Peran ini ditetapkan secara implisit, berdasarkan urutan dan jenis kolom dalam tabel. Namun, dengan kemampuan untuk menetapkan peran kolom secara eksplisit, kini Anda dapat menambahkan kolom opsional yang menyediakan fitur baru dan menarik ke diagram seperti label anotasi arbitrer, pengarahan teks, dan batang ketidakpastian.
Jika Anda tidak secara eksplisit menetapkan peran kolom, perannya disimpulkan berdasarkan urutan kolom dalam tabel, sesuai dengan spesifikasi format data diagram. Halaman ini akan menunjukkan peran yang tersedia untuk ditetapkan secara eksplisit, dan cara menetapkan peran tersebut.
Berikut adalah perbandingan hal yang dapat Anda lakukan dengan diagram garis hanya menggunakan peran bawaan yang disimpulkan, dibandingkan dengan peran tambahan yang ditetapkan secara eksplisit.
Format tabel data diagram garis:
Kolom 0 | Kolom 1 | ... | Kolom N | |
---|---|---|---|---|
Tujuan |
|
Nilai baris 1 | ... | Nilai baris N |
Jenis Data |
|
angka | ... | angka |
Peran | domain | data | ... | data |
Peran kolom opsional yang didukung |
|
|
... |
|
Diagram Tanpa Peran Kolom Vulgar | Diagram dengan Peran Kolom Eksplisit |
---|---|
|
|
Diagram ini tidak menerapkan peran secara eksplisit, sehingga hanya dapat menggunakan tata letak kolom data dan data dasar yang ditampilkan di atas. Tabel Data: 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] ]); |
Diagram ini menetapkan peran secara eksplisit, sehingga kolom opsional dapat ditambahkan. Diagram ini memiliki kolom opsional untuk peran anotasi, anotasiText, interval, dan kepastian.
Tabel Data: 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] ]); |
Peran Apa yang Tersedia?
Tabel berikut mencantumkan semua peran yang didukung oleh Google Chart. Tidak semua peran didukung oleh semua jenis diagram; dokumentasi setiap diagram akan menjelaskan peran mana yang tersedia dan di mana perannya. Peran dirender secara berbeda untuk jenis diagram yang berbeda.
Peran | Deskripsi | Contoh |
---|---|---|
anotasi | Teks yang akan ditampilkan pada diagram dekat titik data terkait. Teks ditampilkan tanpa interaksi pengguna. Anotasi dan teks anotasi dapat ditetapkan ke titik data dan kategori (label sumbu). Ada dua gaya anotasi: titik (default), yang menggambar teks anotasi di dekat titik yang ditentukan, dan garis, yang menggambar teks anotasi pada garis yang membagi area diagram. Anda dapat menentukan gaya garis dengan menetapkan opsi diagram ini: Jenis data: string Default: String kosong |
Data: label: 'Tahun', 'Penjualan', null, null, 'Pengeluaran', null,
null
peran: domain, data, anotasi, anotasiText, data, anotasi, anotasiText
'2004', 1000, null, null, 400, null, null, '2005', 1170, null, null, 460'4'0' baru', '4'0' baru', '4'
'A' dan 'B' dalam diagram ini adalah anotasi. Arahkan kursor ke anotasi untuk melihat teks anotasi. Perhatikan bahwa Anda harus mengarahkan kursor ke anotasi, bukan ke titik data yang akan diberi anotasi, untuk menampilkan nilai anotasiText. Nilai null diterima untuk sel anotasi dan anotasiText; namun, jika memiliki nilai anotasiText, Anda harus memiliki nilai anotasi terkait. |
annotationText | Teks yang diperluas untuk ditampilkan saat pengguna mengarahkan kursor ke anotasi terkait. Anotasi dan teks anotasi dapat ditetapkan ke titik data dan kategori (label sumbu). Jika memiliki kolom anotasiText, Anda juga harus memiliki kolom anotasi. Sebaliknya, teks tooltip ditampilkan saat pengguna mengarahkan kursor ke titik data terkait pada diagram. Jenis data: string Default: String kosong |
|
kepastian | Menunjukkan apakah titik data bersifat pasti atau tidak. Tampilannya bergantung pada jenis diagram—misalnya, mungkin garis ini ditunjukkan oleh garis putus-putus atau isian bergaris. Untuk diagram garis dan area, segmen antara dua titik data bersifat pasti jika dan hanya jika kedua titik data tersebut sudah pasti. Jenis data: boolean, dengan keterangan benar (true) dan salah (false) tidak pasti. Default: true |
|
penekanan | Menekankan titik data diagram yang ditentukan. Ditampilkan sebagai garis tebal dan/atau titik besar. Untuk diagram garis dan area, segmen antara dua titik data ditegaskan jika dan hanya jika kedua titik data ditekankan. Jenis data: boolean Default: false |
Data: 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 Dalam diagram ini, rangkaian 'Penjualan' memiliki satu segmen yang difokuskan, yang ditunjukkan oleh kolom tiga, baris satu dan dua. Rangkaian 'Pengeluaran' memiliki dua segmen yang ditekankan, yang ditentukan oleh kolom kelima, baris dua, tiga, dan empat. Perhatikan bahwa penekanan diperlukan kedua titik pembatas untuk ditegaskan. |
interval | Menunjukkan potensi rentang data untuk titik tertentu. Interval biasanya ditampilkan sebagai indikator rentang gaya I-bar. Kolom interval adalah kolom numerik; tambahkan kolom interval berpasangan, yang menandai nilai rendah dan tinggi sebuah batang. Nilai interval harus ditambahkan dalam nilai yang meningkat, dari kiri ke kanan. Jenis data: angka Default: Tanpa interval |
Data: 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 Dalam diagram ini, nilai interval menentukan I-bar yang mengelilingi titik. Nilainya meningkat dari kiri ke kanan. Interval tertinggi dan terendah di sekitar titik menandai bagian atas dan bawah batang. Catatan: untuk semua detail tentang interval, lihat Interval. |
cakupan | Menunjukkan apakah titik berada di dalam atau di luar cakupan. Jika berada di luar cakupan, poin tersebut akan dikurangi secara visual. Untuk diagram garis dan area, segmen di antara dua titik data berada dalam cakupan jika salah satu endpoint berada dalam cakupan. Jenis data: boolean, dengan arti benar dalam cakupan. Default: true |
Data: 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 Kolom cakupan pertama berlaku untuk kolom data 'Penjualan' di sebelah kirinya. Segmen pertama dirender di luar cakupan karena kedua titik batas berada di luar cakupan. Kolom cakupan kedua berlaku untuk kolom data 'Pengeluaran' di sebelah kirinya. Segmen pertama ditandai sebagai dalam cakupan karena salah satu titik batasnya berada dalam cakupan; baris lainnya berada di luar cakupan karena semua titik lainnya ditandai sebagai di luar cakupan. |
gaya |
Menentukan gaya properti tertentu dari berbagai aspek data Anda. Nilai tersebut adalah:
Jenis Data: string, tempat beberapa gaya dapat diterapkan menggunakan
sintaksis Default: null |
Data: 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}'
Dalam diagram ini, setiap batang ditata secara terpisah dari yang lain menggunakan peran kolom Catatan: detail selengkapnya didokumentasikan di tempat lain tentang cara menyesuaikan gaya titik, garis, dan panel. Lihat juga opsi untuk setiap jenis diagram tempat gaya dapat ditentukan untuk jenis entitas lain, seperti area, teks, dan kotak. |
tooltip |
Teks yang akan ditampilkan saat pengguna mengarahkan kursor ke titik data yang terkait dengan baris ini. Catatan: fungsi ini tidak didukung oleh visualisasi Bubble Chart. Konten tooltip HTML Bubble Chart tidak dapat disesuaikan. Jenis data: string Default: Nilai titik data |
Data: 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' Arahkan kursor ke titik data untuk menampilkan teks tooltip. Data tooltip ditetapkan ke semua titik di kedua baris, di kolom 3 dan 5. Catatan: untuk detail selengkapnya tentang cara menyesuaikan tooltip, lihat Tooltip. |
domain | Anda tidak perlu menetapkan peran ini secara eksplisit kecuali jika mendesain diagram multi-domain (ditampilkan di sini); format dasar tabel data memungkinkan mesin diagram menyimpulkan kolom mana yang merupakan kolom domain. Namun, Anda harus mengetahui kolom mana yang merupakan kolom domain sehingga Anda mengetahui kolom lain mana yang dapat mengubahnya. Kolom domain menentukan label di sepanjang sumbu utama diagram. Beberapa kolom domain terkadang dapat digunakan untuk mendukung beberapa skala dalam diagram yang sama. Jenis data: Biasanya string, tetapi terkadang berupa angka atau tanggal |
Data: 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 Contoh ini menunjukkan diagram multi-domain. Dua kolom data pertama mengubah domain pertama ("Kuartal 2009"), dan dua kolom data terakhir mengubah domain kedua ("Kuartal 2008"). Kedua domain ditempatkan pada skala sumbu yang sama. |
data | Anda tidak perlu menetapkan peran ini secara eksplisit; format dasar tabel data memungkinkan mesin diagram menyimpulkan kolom yang merupakan kolom domain. Namun, Anda harus mengetahui kolom mana yang merupakan kolom data sehingga Anda dapat mengetahui kolom lain yang dapat mengubahnya. Kolom peran data menentukan data seri yang akan dirender dalam diagram. Untuk sebagian besar diagram, satu kolom = satu rangkaian, namun hal ini dapat bervariasi menurut jenis diagram (misalnya, diagram sebar memerlukan dua kolom data untuk rangkaian pertama, dan diagram tambahan untuk setiap rangkaian tambahan; diagram batang membutuhkan empat kolom data untuk setiap rangkaian). Jenis data: angka |
Hierarki Asosiasi dan Hierarki Peran
Diagram berikut menunjukkan kolom peran mana yang dapat diterapkan ke kolom peran lain mana. Semua kolom, kecuali kolom domain, diterapkan ke tetangga kiri terdekat tempat kolom dapat diterapkan.
Jadi, misalnya, sebuah kolom scope berlaku untuk kolom data terdekat di sebelah kirinya; kolom annotationText akan berlaku untuk kolom annotation terdekat di sisi kirinya. Sementara itu, annotation akan diterapkan ke kolom data atau domain terdekat di sebelah kirinya.
Menetapkan Peran
Peran ditetapkan sebagai properti kolom pada objek DataTable. Ada beberapa cara untuk membuat kolom peran, tetapi berikut ini yang paling umum:
Dua teknik pertama menggambar diagram berikut:
Metode DataTable.addColumn
Contoh berikut membuat diagram batang dengan penanda interval di tiga batang. Penanda interval ditentukan oleh kolom ketiga dan keempat menggunakan metode DataTable.addColumn().
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'});
Notasi Literal JavaScript
Dalam literal JSON, Anda harus menentukan properti p
kolom dengan nilai "role":"role-type"
.
Contoh berikut menunjukkan cara menentukan peran menggunakan notasi literal JavaScript. Ini hanya dapat dilakukan pada waktu pembuatan tabel.
{"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 }
Metode DataView.setColumns
Saat membuat tampilan, Anda dapat secara eksplisit menetapkan peran kolom. Hal ini berguna saat membuat kolom kalkulasi baru. Lihat DataView.setColumns()
untuk mengetahui informasi selengkapnya.