Peran Kolom

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

  1. Apa yang dimaksud dengan Peran?
  2. Peran Apa yang Tersedia?
  3. Hierarki Peran dan Asosiasi
  4. 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
  • annotation
  • anotasiText
  • annotation
  • anotasiText
  • kepastian
  • penekanan
  • interval
  • cakupan
  • gaya
  • tooltip
 ...
  • annotation
  • anotasiText
  • kepastian
  • penekanan
  • interval
  • cakupan
  • gaya
  • tooltip

 

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.

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

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: annotations: {'column_id': {style: 'line'}}

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:

  • color
  • opacity
  • stroke-width
  • stroke-color
  • stroke-opacity
  • fill-color
  • fill-opacity

Jenis Data: string, tempat 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 ditata secara terpisah dari yang lain menggunakan peran kolom style. Gaya dapat ditetapkan untuk titik, garis, atau batang secara spesifik (lihat baris Spider Man), atau secara umum, yang akan menerapkan gaya ke semua titik, garis, dan batang, bergantung pada jenis diagram.

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.