Ringkasan
VegaChart adalah salah satu dari banyak kemungkinan visualisasi yang dapat dibuat menggunakan Vega Visualization Grammar, yang merupakan bahasa deklaratif untuk membuat, menyimpan, dan berbagi desain visualisasi interaktif. Dengan Vega, Anda dapat mendeskripsikan tampilan visual dan perilaku interaktif dari suatu visualisasi dalam format JSON, dan menghasilkan tampilan berbasis web menggunakan Canvas atau SVG.
Saat menggambar VegaChart, Anda harus menyertakan spesifikasi cara membuat diagram dalam tata bahasa visualisasi Vega dalam opsi. Beberapa contoh spesifikasi tersebut disertakan di bawah ini, dan beberapa contoh lainnya dapat ditemukan di halaman Contoh VegaChart.
Catatan: Meskipun Google Chart VegaChart dapat menggambar diagram Vega apa pun yang dapat Anda tentukan dengan Spesifikasi Vega JSON (termasuk semua yang ada di Galeri Contoh), fitur tambahan yang memerlukan panggilan ke Vega API belum tersedia.
Contoh Sederhana, Diagram Batang
Berikut adalah contoh sederhana dari VegaChart yang menggambar Diagram Batang. (Lihat contoh asli, tutorial mendetail, dan Diagram Batang di editor bagan Vega.)
Meskipun ini mewakili cara lain untuk menghasilkan diagram batang di Google Chart, kami berencana untuk mengintegrasikan semua fitur diagram Batang dan Kolom lainnya ke dalam implementasi baru yang didasarkan pada VegaChart ini.
Dalam contoh ini, perhatikan bahwa opsi 'data' diganti dengan opsi berikut, yang menggunakan 'datatable' yang disediakan oleh panggilan gambar sebagai 'source' untuk objek data lain yang disebut 'table', dan 'table' digunakan dalam spesifikasi Vega lainnya.
'data': [{'name': 'table', 'source': 'datatable'}],
<html>
<head>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<script>
google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);
function drawChart() {
const dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', 'id': 'category'});
dataTable.addColumn({type: 'number', 'id': 'amount'});
dataTable.addRows([
['A', 28],
['B', 55],
['C', 43],
['D', 91],
['E', 81],
['F', 53],
['G', 19],
['H', 87],
]);
const options = {
"vega": {
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 500,
"height": 200,
"padding": 5,
'data': [{'name': 'table', 'source': 'datatable'}],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "datum === tooltip", "value": 0},
{"value": 1}
]
}
}
}
]
}
};
const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="chart-div" style="width: 700px; height: 250px;"></div>
</body>
</html>
Memuat
Nama paket google.charts.load adalah "vegachart".
google.charts.load("current", {packages: ["vegachart"]});
Nama class visualisasi adalah google.visualization.VegaChart.
var visualization = new google.visualization.VegaChart(container);
Format Data
Data dapat diteruskan ke VegaChart dengan cara yang sangat mirip dengan Google Chart lainnya, menggunakan DataTable (atau DataView). Perbedaan utamanya adalah, alih-alih mengandalkan urutan kolom untuk menentukan cara penggunaannya, VegaChart bergantung pada ID setiap kolom agar sama dengan apa yang diharapkan untuk visualisasi Vega tertentu yang telah Anda tetapkan.
Misalnya, DataTable berikut dibuat dengan kolom yang memiliki ID untuk
'category'
dan 'amount', dan ID yang sama digunakan dalam opsi 'vega' untuk mereferensikan
kolom tersebut.
const dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', 'id': 'category'});
dataTable.addColumn({type: 'number', 'id': 'amount'});
dataTable.addRows([
['A', 28],
['B', 55],
['C', 43],
]);
const options = {
'vega': {
...
// Here we create the Vega data object named 'datatable',
// which will be passed in via the draw() call with a DataTable.
'data': {'name': 'datatable'},
'scales': [
{
'name': 'yscale',
// Here is an example of how to use the 'amount' field from 'datatable'.
'domain': {'data': 'datatable', 'field': 'amount'},
}
]
}
};
const chart = new google.visualization.VegaChart(
document.getElementById('chart-div'));
chart.draw(dataTable, options);
// A DataTable is required, but it may be empty.
const dataTable = new google.visualization.DataTable();
const options = {
'vega': {
// Here the data is specified inline in the Vega specification.
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
]
}
],
'scales': [
{
'name': 'yscale',
// Here is how Vega normally uses the 'amount' field from 'table'.
"domain": {"data": "table", "field": "category"},
}
]
}
};
const chart = new google.visualization.VegaChart(
document.getElementById('chart-div'));
chart.draw(dataTable, options);
Namun, hanya satu DataTable tersebut yang dapat diteruskan ke VegaChart dengan cara ini, sedangkan beberapa diagram Vega memerlukan lebih dari satu tabel data. Kami akan mengatasi keterbatasan ini dalam rilis Google Chart mendatang.
Sementara itu, Anda dapat menentukan data tambahan yang perlu digunakan dalam opsi
'vega' 'data', baik dengan
membuatnya inline atau dengan memuatnya dari URL.
Contoh keduanya dapat ditemukan di bawah.
Opsi Konfigurasi
| Name | |
|---|---|
| chartArea |
Objek dengan anggota untuk mengonfigurasi penempatan dan ukuran area diagram (tempat diagram itu sendiri digambar, tidak termasuk sumbu dan legenda). Dua format didukung: angka, atau
angka yang diikuti dengan %. Angka sederhana adalah nilai dalam piksel; angka yang diikuti dengan % adalah
persentase. Contoh: Jenis: objek
Default: null
|
| chartArea.bottom |
Seberapa jauh menggambar diagram dari batas bawah. Jenis: angka atau string
Default: otomatis
|
| chartArea.left |
Seberapa jauh menggambar diagram dari batas kiri. Jenis: angka atau string
Default: otomatis
|
| chartArea.right |
Seberapa jauh menggambar diagram dari batas kanan. Jenis: angka atau string
Default: otomatis
|
| chartArea.top |
Seberapa jauh menggambar diagram dari batas atas. Jenis: angka atau string
Default: otomatis
|
| chartArea.width |
Lebar area diagram. Jenis: angka atau string
Default: otomatis
|
| chartArea.height |
Tinggi area diagram. Jenis: angka atau string
Default: otomatis
|
| tinggi |
Tinggi diagram, dalam piksel. Jenis: nomor
Default: tinggi elemen yang memuatnya
|
| lebar |
Lebar diagram, dalam piksel. Jenis: nomor
Default: lebar elemen yang memuatnya
|
Metode
| Metode | |
|---|---|
draw(data, options) |
Menggambar diagram. Diagram menerima panggilan metode lebih lanjut hanya setelah peristiwa Jenis Pengembalian: tidak ada
|
getAction(actionID) |
Menampilkan objek tindakan tooltip dengan Jenis Pengembalian: objek
|
getBoundingBox(id) |
Menampilkan objek yang berisi bagian kiri, atas, lebar, dan tinggi elemen diagram
Nilai bersifat relatif terhadap penampung diagram. Panggil ini setelah diagram digambar. Jenis Pengembalian: objek
|
getChartAreaBoundingBox() |
Menampilkan objek yang berisi bagian kiri, atas, lebar, dan tinggi konten diagram (yaitu, tidak termasuk label dan legenda):
Nilai bersifat relatif terhadap penampung diagram. Panggil ini setelah diagram digambar. Jenis Pengembalian: objek
|
getChartLayoutInterface() |
Menampilkan objek yang berisi informasi tentang penempatan diagram dan elemennya di layar. Metode berikut dapat dipanggil pada objek yang ditampilkan:
Panggil ini setelah diagram digambar. Jenis Pengembalian: objek
|
getHAxisValue(xPosition, optional_axis_index) |
Menampilkan nilai data horizontal pada Contoh: Panggil ini setelah diagram digambar. Jenis Pengembalian: nomor
|
getImageURI() |
Menampilkan diagram yang diserialisasi sebagai URI gambar. Panggil ini setelah diagram digambar. Lihat Mencetak Diagram PNG. Jenis Pengembalian: string
|
getSelection() |
Menampilkan array entitas diagram yang dipilih.
Untuk diagram ini, hanya satu entitas yang dapat dipilih pada waktu tertentu.
Jenis Pengembalian: Array elemen pilihan
|
getVAxisValue(yPosition, optional_axis_index) |
Menampilkan nilai data vertikal pada Contoh: Panggil ini setelah diagram digambar. Jenis Pengembalian: nomor
|
getXLocation(dataValue, optional_axis_index) |
Menampilkan koordinat x piksel dari Contoh: Panggil ini setelah diagram digambar. Jenis Pengembalian: nomor
|
getYLocation(dataValue, optional_axis_index) |
Menampilkan koordinat y piksel dari Contoh: Panggil ini setelah diagram digambar. Jenis Pengembalian: nomor
|
removeAction(actionID) |
Menghapus tindakan tooltip dengan Jenis Pengembalian:
none |
setAction(action) |
Menetapkan tindakan tooltip yang akan dijalankan saat pengguna mengklik teks tindakan.
Metode
Setiap dan semua tindakan tooltip harus ditetapkan sebelum memanggil metode Jenis Pengembalian:
none |
setSelection() |
Memilih entitas diagram yang ditentukan. Membatalkan pilihan sebelumnya.
Untuk diagram ini, hanya satu entitas yang dapat dipilih pada satu waktu.
Jenis Pengembalian: tidak ada
|
clearChart() |
Mengosongkan diagram, dan melepaskan semua resource yang dialokasikan. Jenis Pengembalian: tidak ada
|
Acara
Untuk informasi selengkapnya tentang cara menggunakan peristiwa ini, lihat Interaktivitas Dasar, Menangani Peristiwa, dan Mengaktifkan Peristiwa.
| Name | |
|---|---|
animationfinish |
Diaktifkan saat animasi transisi selesai. Properti: tidak ada
|
click |
Diaktifkan saat pengguna mengklik di dalam diagram. Dapat digunakan untuk mengidentifikasi kapan judul, elemen data, entri legenda, sumbu, garis petak, atau label diklik. Properti: targetID
|
error |
Diaktifkan saat terjadi error saat mencoba merender diagram. Properties: id, pesan
|
legendpagination |
Diaktifkan saat pengguna mengklik panah penomoran halaman legenda. Meneruskan kembali indeks halaman berbasis nol pada legenda saat ini dan jumlah total halaman. Properti: currentPageIndex, totalPages
|
onmouseover |
Diaktifkan saat pengguna mengarahkan mouse ke entitas visual. Meneruskan kembali indeks baris dan kolom dari elemen tabel data yang sesuai. Properti: baris, kolom
|
onmouseout |
Diaktifkan saat pengguna menjauhi entity visual. Meneruskan kembali indeks baris dan kolom dari elemen tabel data yang sesuai. Properti: baris, kolom
|
ready |
Diagram siap untuk panggilan metode eksternal. Jika ingin berinteraksi dengan diagram, dan memanggil metode setelah menggambarnya, Anda harus menyiapkan pemroses untuk peristiwa ini sebelum memanggil metode Properti: tidak ada
|
select |
Diaktifkan saat pengguna mengklik entitas visual. Untuk mempelajari apa yang telah dipilih, panggil
Properti: tidak ada
|
Kebijakan Data
Semua kode dan data diproses dan dirender di browser. Tidak ada data yang dikirim ke server mana pun.