Halaman ini diterjemahkan oleh Cloud Translation API.

Peran Kolom

Halaman ini menjelaskan konsep dan penggunaan peran dalam tabel data diagram.

Apa yang dimaksud dengan Peran?
Peran Apa yang Tersedia?
Hierarki Peran dan Pengaitan dan Pengaitan
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 berisi data yang menjelaskan teks tooltip, anotasi titik data, atau indikator ketidakpastian. Sebagian besar peran kolom berlaku untuk kolom 'data' sebelumnya, baik tepat sebelum kolom tersebut maupun sebelum kolom pertama dari grup kolom peran yang berurutan. Misalnya, Anda dapat memiliki dua kolom setelah kolom 'data', satu untuk 'tooltip' dan satu lagi untuk 'annotation'. Namun, dengan mengikuti kolom 'domain', biasanya kami juga mengizinkan peran kolom 'annotation' dan 'annotationText'.

Catatan: jika Anda ingin mengontrol konten tooltip yang muncul saat pengguna mengarahkan kursor ke diagram, lihat Tooltips.

Awalnya, hanya ada dua peran yang tersedia untuk kolom: 'domain', yang menentukan nilai sumbu utama; dan 'data', yang menentukan tinggi batang, lebar irisan 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 memberikan fitur baru dan menarik ke diagram seperti label anotasi arbitrer, teks mengambang, dan batang ketidakpastian.

Jika Anda tidak menetapkan peran kolom secara eksplisit, perannya disimpulkan oleh urutan kolom dalam tabel, sesuai dengan spesifikasi format data diagram. Halaman ini akan menunjukkan peran apa saja yang dapat Anda tetapkan secara eksplisit, dan cara menetapkannya.

Berikut adalah perbandingan hal yang dapat Anda lakukan dengan diagram garis yang hanya menggunakan peran default yang disimpulkan, dibandingkan dengan peran tambahan yang ditetapkan secara eksplisit.

Format tabel data diagram garis:

	Kolom 0	Kolom 1	...	Kolom N
Tujuan	Label grup sumbu X (diskrit) Nilai sumbu X (berkelanjutan)	Nilai baris 1	...	Nilai garis N
Jenis Data	string (diskrit) angka, tanggal, tanggal, atau waktu (berkelanjutan)	number	...	number
Peran	domain	data	...	data
Peran kolom yang didukung dan opsional	annotation annotationText	annotation annotationText kepastian penekanan interval cakupan gaya tooltip	...	annotation annotationText kepastian penekanan interval cakupan gaya tooltip

Diagram Tanpa Peran Kolom yang Eksplisit	Diagram dengan Peran Kolom Eksplisit

Diagram ini tidak menerapkan peran secara eksplisit, sehingga hanya dapat menggunakan data dasar dan tata letak kolom domain yang ditampilkan di atas. 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] ]);	Diagram ini menetapkan peran secara eksplisit, sehingga kolom opsional dapat ditambahkan. Diagram ini memiliki kolom opsional untuk peran anotasi, annotationText, interval, dan kepastian. Kolom anotasi menentukan label statis dalam diagram; di sini, 'A', 'B', 'C' adalah anotasi. Kolom annotationText menentukan teks informasi saat Anda mengarahkan kursor ke anotasi (bukan titik data). Kolom interval menentukan titik atas dan bawah batang I pada diagram. Ada tiga batang I dalam diagram. kepastian menunjukkan apakah data pada titik tersebut pasti. Titik data terakhir tidak pasti, sehingga garis yang mengarah ke titik data itu putus-putus. 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] ]);

Diagram Tanpa Peran Kolom yang Eksplisit

Diagram dengan Peran Kolom Eksplisit

Diagram ini tidak menerapkan peran secara eksplisit, sehingga hanya dapat menggunakan data dasar dan tata letak kolom domain yang ditampilkan di atas.

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]
]);

Diagram ini menetapkan peran secara eksplisit, sehingga kolom opsional dapat ditambahkan. Diagram ini memiliki kolom opsional untuk peran anotasi, annotationText, interval, dan kepastian.

Kolom anotasi menentukan label statis dalam diagram; di sini, 'A', 'B', 'C' adalah anotasi.
Kolom annotationText menentukan teks informasi saat Anda mengarahkan kursor ke anotasi (bukan titik data).
Kolom interval menentukan titik atas dan bawah batang I pada diagram. Ada tiga batang I dalam diagram.
kepastian menunjukkan apakah data pada titik tersebut pasti. Titik data terakhir tidak pasti, sehingga garis yang mengarah ke titik data itu putus-putus.

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]
]);

Peran Apa yang Tersedia?

Tabel berikut mencantumkan semua peran yang didukung oleh Google Chart. Tidak semua peran didukung oleh semua jenis diagram. Setiap dokumentasi diagram akan menjelaskan peran mana yang tersedia beserta lokasinya. Peran dirender secara berbeda untuk berbagai jenis diagram.

Peran	Deskripsi	Contoh
anotasi	Teks yang akan ditampilkan pada diagram di 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: `annotations: {'column_id': {style: 'line'}}` Jenis data: string Default: String kosong	Data: label: '0'2'0, 'Sales', null, null, 'Expenses', null, null role: domain, data, annotation, annotationText, data, annotation, annotationText '2004', 1000, null, null, 400, null, null '2005', 1170, null, null' '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 titik data tempat anotasi tersebut diterapkan, untuk menampilkan nilai annotationText. Nilai null diterima untuk sel anotasi dan annotationText; tetapi, jika Anda memiliki nilai annotationText, 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 annotationText, 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 pasti atau tidak. Caranya ditampilkan bergantung pada jenis diagram—misalnya, mungkin ditunjukkan dengan 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 pasti. Jenis data: boolean, jika benar adalah pasti, salah adalah tidak pasti. Default: true (benar)
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 ditekankan 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, seri 'Penjualan' memiliki satu segmen yang ditekankan, yang ditunjukkan oleh kolom tiga, baris satu dan dua. Seri 'Pengeluaran' memiliki dua segmen yang ditekankan, yang ditunjukkan oleh kolom kelima, baris dua, tiga, dan empat. Perhatikan bagaimana penekanan membutuhkan kedua titik pembatas untuk ditonjolkan.
interval	Menunjukkan potensi rentang data untuk titik tertentu. Interval biasanya ditampilkan sebagai indikator rentang gaya batang I. Kolom interval adalah kolom numerik; tambahkan kolom interval secara berpasangan, yang menandai nilai rendah dan tinggi pada batang. Nilai interval harus ditambahkan ke nilai yang meningkat, dari kiri ke kanan. Jenis data: angka Default: Tidak ada 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 batang I 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 suatu poin berada di dalam atau di luar cakupan. Jika suatu titik berada di luar ruang lingkup, hal tersebut tidak ditonjolkan 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 (true) dalam cakupan. Default: true (benar)	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 ruang lingkup karena salah satu titik batasnya berada dalam ruang lingkup; bagian garis lainnya berada di luar ruang lingkup karena semua titik lainnya ditandai sebagai di luar ruang lingkup.
gaya	Menata gaya properti tertentu dari berbagai aspek data Anda. Nilai tersebut adalah: `color` `opacity` `stroke-width` `stroke-color` `stroke-opacity` `fill-color` `fill-opacity` Jenis Data: string, dengan beberapa gaya dapat diterapkan menggunakan sintaksis `'firstProperty: value; secondProperty: value'`, atau menetapkan gaya tertentu untuk `bar, line,` dan `point` dengan menentukan jenis dan menggabungkan properti gaya di dalam tanda kurung kurawal (misalnya, `bar { //properties go here }`). 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 diberi gaya secara terpisah dari batang lain menggunakan peran kolom `style`. Gaya dapat disetel untuk titik, garis, atau batang secara khusus (lihat baris Spider Man), atau secara umum, yang akan menerapkan gaya ke semua titik, garis, dan batang, bergantung pada jenis diagramnya. Catatan: detail selengkapnya didokumentasikan di tempat lain tentang cara menyesuaikan gaya titik, garis, dan batang. Lihat juga opsi untuk setiap jenis diagram tempat gaya dapat ditentukan untuk jenis entity lainnya, seperti area, teks, dan kotak.
tooltip	Teks yang akan ditampilkan saat pengguna mengarahkan kursor ke titik data yang terkait dengan baris ini. Catatan: ini tidak didukung oleh visualisasi Bubble Chart. Konten tooltip HTML Bubble Chart tidak dapat disesuaikan. Jenis data: string Default: Nilai poin 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 menyesuaikan tooltip, lihat Tooltips.
*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 untuk menyimpulkan kolom mana yang merupakan kolom domain. Namun, Anda harus mengetahui kolom mana yang merupakan kolom domain sehingga Anda tahu 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 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 dihamparkan pada skala sumbu yang sama.
*data*	Anda tidak perlu menetapkan peran ini secara eksplisit; format dasar tabel data memungkinkan mesin diagram menyimpulkan kolom mana yang merupakan kolom domain. Namun, Anda harus mengetahui kolom mana yang merupakan kolom data sehingga Anda tahu kolom lain mana yang dapat mengubahnya. Kolom peran data menentukan data deret yang akan dirender dalam diagram. Untuk sebagian besar diagram, satu kolom = satu deret, tetapi hal ini dapat bervariasi menurut jenis diagram (misalnya, diagram sebar memerlukan dua kolom data untuk deret pertama, dan satu kolom tambahan untuk setiap deret tambahan; diagram batang lilin memerlukan empat kolom data untuk setiap deret). Jenis data: angka

Hierarki Peran dan Asosiasi dan Pengaitan

Diagram berikut menunjukkan kolom peran mana yang dapat diterapkan ke kolom peran lainnya. Semua kolom, kecuali kolom domain, berlaku ke tetangga kiri terdekat tempat kolom tersebut dapat diterapkan.

Misalnya, kolom scope berlaku untuk kolom data terdekat yang ada di sebelah kirinya; kolom annotationText akan diterapkan ke kolom annotation terdekat di sebelah kirinya; anotasi akan diterapkan ke kolom data atau domain terdekat di sebelah kirinya.

Menetapkan Peran

Peran ditetapkan sebagai properti kolom dalam objek DataTable. Ada beberapa cara untuk membuat kolom peran, tetapi berikut yang paling umum:

DataTable.addColumn()
Notasi literal JavaScript
DataView.setColumns()

Dua teknik pertama menggambar diagram berikut:

Metode DataTable.addColumn

Contoh berikut membuat diagram batang dengan penanda interval pada 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 menetapkan 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 menetapkan peran kolom secara eksplisit. Hal ini berguna saat membuat kolom kalkulasi baru. Lihat DataView.setColumns() untuk mengetahui informasi selengkapnya.