Ringkasan
VegaChart adalah salah satu dari banyak kemungkinan visualisasi yang dapat dibuat menggunakan Vega Visualization Grammar, yang merupakan bahasa deklaratif untuk membuat, menyimpan, dan membagikan desain visualisasi yang interaktif. Dengan Vega, Anda dapat mendeskripsikan tampilan visual dan perilaku interaktif visualisasi dalam format JSON, dan menghasilkan tampilan berbasis web menggunakan Canvas atau SVG.
Saat menggambar VegaChart, Anda harus menyertakan spesifikasi untuk cara membuat diagram dalam tata bahasa visualisasi Vega melalui beberapa opsi. Beberapa contoh spesifikasi tersebut disertakan di bawah, dan beberapa contoh lainnya dapat ditemukan di halaman VegaChart Example.
Catatan: Meskipun Google Chart VegaChart dapat menggambar diagram Vega apa pun yang dapat Anda tentukan dengan Spesifikasi Vega JSON (termasuk semua yang ada di Contoh Galeri), 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 dalam editor diagram Vega.)
Meskipun ini mewakili cara lain untuk membuat diagram batang di Google Chart, kami berencana untuk mengintegrasikan semua fitur diagram Batang dan Kolom lainnya ke dalam implementasi baru berdasarkan VegaChart ini.
Dalam contoh ini, perhatikan bahwa opsi 'data' diganti dengan yang berikut ini, yang menggunakan 'datatable' yang disediakan oleh panggilan gambar sebagai 'source' untuk objek data lain yang disebut 'table', dan 'table' digunakan dalam sisa spesifikasi Vega.
'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 visualisasinya adalah google.visualization.VegaChart.
var visualization = new google.visualization.VegaChart(container);
Format Data
Data dapat diteruskan ke VegaChart dengan cara yang sangat mirip seperti pada Google Chart lainnya, menggunakan DataTable (atau DataView). Perbedaan utamanya adalah bahwa alih-alih mengandalkan urutan kolom untuk menentukan cara penggunaannya, VegaChart mengandalkan ID setiap kolom sebagai sama dengan yang diharapkan untuk visualisasi Vega tertentu yang telah Anda tentukan.
Misalnya, DataTable berikut dibuat dengan kolom yang memiliki ID untuk
'category'
dan 'amount', serta 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 seperti itu 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
menyisipkannya atau dengan memuatnya dari URL.
Contoh keduanya dapat ditemukan di bawah ini.
Opsi Konfigurasi
| Name | |
|---|---|
| diagramArea |
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 diikuti %. Angka sederhana adalah nilai dalam piksel; angka yang diikuti oleh % adalah
persentase. Contoh: Objek Type:
Default: null
|
| chartArea.bottom |
Seberapa jauh menggambar diagram dari batas bawah. Jenis: angka atau string
Default: otomatis
|
| chartArea.left |
Seberapa jauh gambar dari batas kiri. Jenis: angka atau string
Default: otomatis
|
| chartArea.right |
Seberapa jauh menggambar diagram dari batas kanan. Jenis: angka atau string
Default: otomatis
|
| baganArea.atas |
Seberapa jauh gambar 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: angka
Default: tinggi elemen penampung
|
| lebar |
Lebar diagram, dalam piksel. Jenis: angka
Default: lebar elemen yang memuatnya
|
Metode
| Metode | |
|---|---|
draw(data, options) |
Menggambar diagram. Diagram menerima panggilan metode lebih lanjut hanya setelah peristiwa Jenis Hasil: tidak ada
|
getAction(actionID) |
Menampilkan objek tindakan tooltip dengan Return Type:
|
getBoundingBox(id) |
Menampilkan objek yang berisi kiri, atas, lebar, dan tinggi elemen diagram
Nilai relatif terhadap penampung diagram. Panggil ini setelah diagram digambar. Return Type:
|
getChartAreaBoundingBox() |
Menampilkan objek yang berisi bagian kiri, atas, lebar, dan tinggi konten diagram (yaitu, tidak termasuk label dan legenda):
Nilai relatif terhadap penampung diagram. Panggil ini setelah diagram digambar. Return Type:
|
getChartLayoutInterface() |
Menampilkan objek yang berisi informasi tentang penempatan di layar diagram dan elemennya. Metode berikut dapat dipanggil pada objek yang ditampilkan:
Panggil ini setelah diagram digambar. Return Type:
|
getHAxisValue(xPosition, optional_axis_index) |
Menampilkan nilai data horizontal pada Contoh: Panggil ini setelah diagram digambar. Jenis Hasil: angka
|
getImageURI() |
Menampilkan diagram yang diserialisasi sebagai URI gambar. Panggil ini setelah diagram digambar. Lihat Mencetak Diagram PNG. Jenis Hasil: string
|
getSelection() |
Menampilkan array entitas diagram yang dipilih.
Untuk diagram ini, hanya satu entitas yang dapat dipilih pada waktu tertentu.
Jenis Hasil: Array elemen pilihan
|
getVAxisValue(yPosition, optional_axis_index) |
Menampilkan nilai data vertikal di Contoh: Panggil ini setelah diagram digambar. Jenis Hasil: angka
|
getXLocation(dataValue, optional_axis_index) |
Menampilkan koordinat x piksel Contoh: Panggil ini setelah diagram digambar. Jenis Hasil: angka
|
getYLocation(dataValue, optional_axis_index) |
Menampilkan koordinat y piksel Contoh: Panggil ini setelah diagram digambar. Jenis Hasil: angka
|
removeAction(actionID) |
Menghapus tindakan tooltip dengan Jenis Hasil:
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 Hasil:
none |
setSelection() |
Memilih entitas diagram yang ditentukan. Membatalkan pilihan sebelumnya.
Untuk diagram ini, hanya satu entitas yang dapat dipilih sekaligus.
Jenis Hasil: tidak ada
|
clearChart() |
Menghapus diagram, dan melepaskan semua resource yang dialokasikan. Jenis Hasil: tidak ada
|
Acara
Untuk informasi selengkapnya tentang cara menggunakan peristiwa ini, lihat Interaktivitas Dasar, Menangani Peristiwa, dan Peristiwa Pengaktifan.
| 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 |
Dipicu jika terjadi error saat mencoba merender diagram. Properties: ID, pesan
|
legendpagination |
Dipicu jika pengguna mengklik panah penomoran halaman legenda. Meneruskan indeks halaman berbasis nol legenda saat ini dan jumlah total halaman. Properti: currentPageIndex, totalPage
|
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 mouse menjauh dari entitas 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.