Halaman ini diterjemahkan oleh Cloud Translation API.

Diagram Vega

Ringkasan
Contoh Sederhana
Memuat
Format Data
Opsi Konfigurasi
Metode
Peristiwa
Kebijakan Data

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'}],

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

<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.

Dengan DataTable

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

Dengan data inline Vega

        // 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: `chartArea:{left:20,top:0,width:'50%',height:'75%'}` 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 `ready` diaktifkan. `Extended description`. Jenis Pengembalian: tidak ada
`getAction(actionID)`	Menampilkan objek tindakan tooltip dengan `actionID` yang diminta. Jenis Pengembalian: objek
`getBoundingBox(id)`	Menampilkan objek yang berisi bagian kiri, atas, lebar, dan tinggi elemen diagram `id`. Format untuk `id` belum didokumentasikan (nilai tersebut adalah nilai yang ditampilkan dari pengendali peristiwa), tetapi berikut beberapa contohnya: `var cli = chart.getChartLayoutInterface();` Tinggi area diagram `cli.getBoundingBox('chartarea').height` Lebar batang ketiga dalam deret pertama diagram batang atau kolom `cli.getBoundingBox('bar#0#2').width` Kotak pembatas dari dudukan kelima diagram lingkaran `cli.getBoundingBox('slice#4')` Kotak pembatas data diagram dari diagram vertikal (misalnya, kolom): `cli.getBoundingBox('vAxis#0#gridline')` Kotak pembatas data diagram suatu diagram horizontal (misalnya, batang): `cli.getBoundingBox('hAxis#0#gridline')` 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): `var cli = chart.getChartLayoutInterface();` `cli.getChartAreaBoundingBox().left` `cli.getChartAreaBoundingBox().top` `cli.getChartAreaBoundingBox().height` `cli.getChartAreaBoundingBox().width` 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: `getBoundingBox` `getChartAreaBoundingBox` `getHAxisValue` `getVAxisValue` `getXLocation` `getYLocation` Panggil ini setelah diagram digambar. Jenis Pengembalian: objek
`getHAxisValue(xPosition, optional_axis_index)`	Menampilkan nilai data horizontal pada `xPosition`, yang merupakan offset piksel dari tepi kiri penampung diagram. Bisa negatif. Contoh: `chart.getChartLayoutInterface().getHAxisValue(400)`. 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. `Extended description` Jenis Pengembalian: Array elemen pilihan
`getVAxisValue(yPosition, optional_axis_index)`	Menampilkan nilai data vertikal pada `yPosition`, yang merupakan offset piksel ke bawah dari tepi atas penampung diagram. Bisa negatif. Contoh: `chart.getChartLayoutInterface().getVAxisValue(300)`. Panggil ini setelah diagram digambar. Jenis Pengembalian: nomor
`getXLocation(dataValue, optional_axis_index)`	Menampilkan koordinat x piksel dari `dataValue` yang relatif terhadap tepi kiri penampung diagram. Contoh: `chart.getChartLayoutInterface().getXLocation(400)`. Panggil ini setelah diagram digambar. Jenis Pengembalian: nomor
`getYLocation(dataValue, optional_axis_index)`	Menampilkan koordinat y piksel dari `dataValue` yang relatif terhadap tepi atas penampung diagram. Contoh: `chart.getChartLayoutInterface().getYLocation(300)`. Panggil ini setelah diagram digambar. Jenis Pengembalian: nomor
`removeAction(actionID)`	Menghapus tindakan tooltip dengan `actionID` yang diminta dari diagram. Jenis Pengembalian: `none`
`setAction(action)`	Menetapkan tindakan tooltip yang akan dijalankan saat pengguna mengklik teks tindakan. Metode `setAction` mengambil objek sebagai parameter tindakannya. Objek ini harus menentukan 3 properti: `id`— ID tindakan yang sedang ditetapkan, `text` —teks yang akan muncul dalam tooltip untuk tindakan, dan `action` — fungsi yang harus dijalankan saat pengguna mengklik teks tindakan. Setiap dan semua tindakan tooltip harus ditetapkan sebelum memanggil metode `draw()` diagram. Deskripsi lengkap. Jenis Pengembalian: `none`
`setSelection()`	Memilih entitas diagram yang ditentukan. Membatalkan pilihan sebelumnya. Untuk diagram ini, hanya satu entitas yang dapat dipilih pada satu waktu. `Extended description` 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 `draw`, dan memanggilnya hanya setelah peristiwa diaktifkan. Properti: tidak ada
`select`	Diaktifkan saat pengguna mengklik entitas visual. Untuk mempelajari apa yang telah dipilih, panggil `getSelection()`. Properti: tidak ada

Kebijakan Data

Semua kode dan data diproses dan dirender di browser. Tidak ada data yang dikirim ke server mana pun.