Visualisasi: Diagram Balon

Ringkasan

Diagram balon yang dirender dalam browser menggunakan SVG atau VML. Menampilkan tips saat mengarahkan kursor ke balon.

Diagram balon digunakan untuk memvisualisasikan set data dengan dua hingga empat dimensi. Dua dimensi pertama divisualisasikan sebagai koordinat, yang ketiga sebagai warna dan yang keempat sebagai ukuran.

Contoh

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawSeriesChart);

    function drawSeriesChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {textStyle: {fontSize: 11}}
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="series_chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Warna menurut Angka

Anda dapat menggunakan opsi colorAxis untuk memberi warna pada balon sesuai dengan nilai, seperti yang ditunjukkan pada contoh di bawah.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['ID', 'X', 'Y', 'Temperature'],
          ['',   80,  167,      120],
          ['',   79,  136,      130],
          ['',   78,  184,      50],
          ['',   72,  278,      230],
          ['',   81,  200,      210],
          ['',   72,  170,      100],
          ['',   68,  477,      80]
        ]);

        var options = {
          colorAxis: {colors: ['yellow', 'red']}
        };

        var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Menyesuaikan Label

Anda dapat mengontrol jenis huruf, font, dan warna balon dengan opsi bubble.textStyle:

Opsi
  var options = {
    title: 'Fertility rate vs life expectancy in selected countries (2010).' +
      ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
    hAxis: {title: 'Life Expectancy'},
    vAxis: {title: 'Fertility Rate'},
    bubble: {
      textStyle: {
        fontSize: 12,
        fontName: 'Times-Roman',
        color: 'green',
        bold: true,
        italic: true
      }
    }
  };
Halaman Web Lengkap
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {
          textStyle: {
            fontSize: 12,
            fontName: 'Times-Roman',
            color: 'green',
            bold: true,
            italic: true
          }
        }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('textstyle'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="textstyle" style="width: 900px; height: 500px;"></div>
</body>
</html>

Label pada diagram di atas sulit dibaca, dan salah satu alasannya adalah ruang kosong di sekitarnya. Hal ini disebut aura, dan jika Anda lebih memilih diagram tanpanya, Anda dapat menetapkan bubble.textStyle.auraColor ke 'none'.

Opsi
  var options = {
    title: 'Fertility rate vs life expectancy in selected countries (2010).' +
      ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
    hAxis: {title: 'Life Expectancy'},
    vAxis: {title: 'Fertility Rate'},
    bubble: {
      textStyle: {
        auraColor: 'none'
      }
    }
  };
Halaman Web Lengkap
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {
          textStyle: {
            auraColor: 'none',
          }
        }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('noAura'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="noAura" style="width: 900px; height: 500px;"></div>
</body>
</html>

Memuat

Nama paket google.charts.load adalah "corechart". 

  google.charts.load("current", {packages: ["corechart"]});

Nama class visualisasinya adalah google.visualization.BubbleChart. 

  var visualization = new google.visualization.BubbleChart(container);

Format Data

Baris: Setiap baris dalam tabel mewakili satu balon.

Kolom:

  Kolom 0 Kolom 1 Kolom 2 Kolom 3 (opsional) Kolom 4 (opsional)
Tujuan: ID (nama) balon Koordinat X Koordinat Y ID seri atau nilai yang mewakili warna pada skala gradien, bergantung pada jenis kolom:
  • string
    String yang mengidentifikasi balon dalam rangkaian yang sama. Gunakan nilai yang sama untuk mengidentifikasi semua balon yang termasuk dalam rangkaian yang sama; balon dalam rangkaian yang sama akan diberi warna yang sama. Rangkaian dapat dikonfigurasi menggunakan opsi series.
  • number
    Nilai yang dipetakan ke warna sebenarnya pada skala gradien menggunakan opsi colorAxis.
Ukuran; nilai dalam kolom ini dipetakan ke nilai piksel sebenarnya menggunakan opsi sizeAxis.
Jenis Data: string angka angka string atau angka angka

Opsi Konfigurasi

Name
animasi.durasi

Durasi animasi, dalam milidetik. Untuk mengetahui detailnya, lihat dokumentasi animasi.

Jenis: angka
Default: 0
animasi.easing

Fungsi easing diterapkan pada animasi. Tersedia opsi-opsi berikut:

  • 'linear' - Kecepatan konstan.
  • 'in' - Relax in - Mulai dengan lambat dan percepat.
  • 'out' - Relax out - Memulai dengan cepat dan melambat.
  • 'inAndOut' - Kemudahan masuk dan keluar - Mulai dengan lambat, mempercepat, lalu memperlambat.
Jenis: string
Default: 'linear'
animasi.mulai

Menentukan apakah diagram akan dianimasikan pada gambar awal. Jika true, diagram akan dimulai pada dasar pengukuran dan akan dianimasikan ke status akhirnya.

Jenis: boolean
Default false
axeTitlesPosition

Tempat untuk menempatkan judul sumbu, dibandingkan dengan area diagram. Nilai yang didukung:

  • in - Menggambar judul sumbu di dalam area diagram.
  • out - Gambar judul sumbu di luar area diagram.
  • tidak ada - Hapus judul sumbu.
Jenis: string
Default: 'keluar'
backgroundColor

Warna latar belakang untuk area utama diagram. Dapat berupa string warna HTML sederhana, misalnya: 'red' atau '#00cc00', atau objek dengan properti berikut.

Jenis: string atau objek
Default: 'putih'
backgroundColor.stroke

Warna garis batas diagram, sebagai string warna HTML.

Jenis: string
Default: '#666'
backgroundColor.strokeWidth

Lebar pembatas, dalam piksel.

Jenis: angka
Default: 0
backgroundColor.fill

Warna pengisi diagram, sebagai string warna HTML.

Jenis: string
Default: 'putih'
gelembung

Objek dengan anggota untuk mengonfigurasi properti visual balon.

Objek Type:
Default: null
balon.opasitas

Opasitas balon, dengan 0 sepenuhnya transparan dan 1 sepenuhnya buram.

Jenis: angka antara 0,0 dan 1,0
Default: 0.8
balon.goresan

Warna guratan balon.

Jenis: string
Default: '#ccc'
balon.teksGaya

Objek yang menentukan gaya teks balon. Objek memiliki format ini:

{color: <string>, fontName: <string>, fontSize: <number>}

color dapat berupa string warna HTML apa pun, misalnya: 'red' atau '#00cc00'. Lihat juga fontName dan fontSize.

Objek Type:
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
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: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Objek Type:
Default: null
chartArea.backgroundColor
Warna latar belakang area diagram. Jika digunakan, string dapat berupa string hex (mis., '#fdc') atau nama warna dalam bahasa Inggris. Ketika sebuah objek digunakan, properti berikut dapat disediakan:
  • stroke: warna, diberikan sebagai string heksadesimal atau nama warna dalam bahasa Inggris.
  • strokeWidth: jika diberikan, menggambar batas di sekitar area diagram dengan lebar yang diberikan (dan dengan warna stroke).
Jenis: string atau objek
Default: 'putih'
chartArea.left

Seberapa jauh gambar dari batas kiri.

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
warna

Warna yang akan digunakan untuk elemen diagram. Array string, dengan setiap elemen adalah string warna HTML, misalnya: colors:['red','#004411'].

Jenis: Array string
Default: warna default
Sumbu warna

Objek yang menentukan pemetaan antara nilai kolom warna dan warna atau skala gradien. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini: 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Objek Type:
Default: null
colorAxis.minValue

Jika ada, menentukan nilai minimum untuk data warna diagram. Nilai data warna dari nilai ini dan yang lebih rendah akan dirender sebagai warna pertama dalam rentang colorAxis.colors.

Jenis: angka
Default: Nilai minimum kolom warna dalam data diagram
colorAxis.maxValue

Jika ada, menentukan nilai maksimum untuk data warna diagram. Nilai data warna dari nilai ini dan yang lebih tinggi akan dirender sebagai warna terakhir dalam rentang colorAxis.colors.

Jenis: angka
Default: Nilai maksimum kolom warna dalam data diagram
colorAxis.values

Jika ada, kontrol cara nilai dikaitkan dengan warna. Setiap nilai dikaitkan dengan warna yang sesuai di array colorAxis.colors. Nilai ini berlaku untuk data warna diagram. Pewarnaan dilakukan sesuai dengan gradien nilai yang ditentukan di sini. Tidak menentukan nilai untuk opsi ini sama dengan menentukan [minValue, maxValue].

Jenis: array angka
Default: null
colorAxis.colors

Warna yang akan ditetapkan ke nilai dalam visualisasi. Array string, dengan setiap elemen adalah string warna HTML, misalnya: colorAxis: {colors:['red','#004411']}. Anda harus memiliki minimal dua nilai; gradien akan mencakup semua nilai, ditambah nilai perantara yang dihitung, dengan warna pertama sebagai nilai terkecil, dan warna terakhir sebagai tertinggi.

Jenis: array string warna
Default: null
warnaAxis.legend

Objek yang menentukan gaya legenda warna gradien.

Objek Type:
Default: null
warnaAxis.legend.position

Posisi legenda. Dapat berupa salah satu dari hal berikut:

  • 'top' - Di atas diagram.
  • 'bawah' - Di bawah diagram.
  • 'in' - Di dalam diagram, di bagian atas.
  • 'tidak ada' - Tidak ada legenda yang ditampilkan.
Objek Type:
Default: 'top'
warnaAxis.legend.textStyle

Objek yang menentukan gaya teks legenda. Objek memiliki format ini:

{color: <string>, fontName: <string>, fontSize: <number>}

color dapat berupa string warna HTML apa pun, misalnya: 'red' atau '#00cc00'. Lihat juga fontName dan fontSize.

Objek Type:
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
warnaAxis.legend.numberFormat

String format untuk label numerik. Ini adalah subset dari kumpulan pola ICU . Misalnya, {numberFormat:'.##'} akan menampilkan nilai "10.66", "10.6", dan "10.0" untuk nilai 10.666, 10.6, dan 10.

Jenis: string
Default: otomatis
aktifkanInteraktivitas

Apakah diagram menampilkan peristiwa berbasis pengguna atau bereaksi terhadap interaksi pengguna. Jika salah, diagram tidak akan menampilkan peristiwa 'pilih' atau peristiwa berbasis interaksi lainnya (tetapi akan menampilkan peristiwa siap atau error), dan tidak akan menampilkan pengarahan teks atau mengubah bergantung pada input pengguna.

Jenis: boolean
Default: true (benar):
explorer

Opsi explorer memungkinkan pengguna menggeser dan melakukan zoom pada diagram Google. explorer: {} menyediakan perilaku penjelajah default, yang memungkinkan pengguna menggeser secara horizontal dan vertikal dengan menarik, serta memperbesar dan memperkecil dengan men-scroll.

Fitur ini bersifat eksperimental dan dapat berubah dalam rilis mendatang.

Catatan: Penjelajah hanya berfungsi dengan sumbu berkelanjutan (seperti angka atau tanggal).

Objek Type:
Default: null
explorer.actions

Penjelajah Google Chart mendukung tiga tindakan:

  • dragToPan: Tarik untuk menggeser diagram secara horizontal dan vertikal. Untuk menggeser hanya di sepanjang sumbu horizontal, gunakan explorer: { axis: 'horizontal' }. Demikian pula untuk sumbu vertikal.
  • dragToZoom: Perilaku default penjelajah adalah memperbesar dan memperkecil saat pengguna men-scroll. Jika explorer: { actions: ['dragToZoom', 'rightClickToReset'] } digunakan, menarik area persegi panjang akan memperbesar area tersebut. Sebaiknya gunakan rightClickToReset setiap kali dragToZoom digunakan. Lihat explorer.maxZoomIn, explorer.maxZoomOut, dan explorer.zoomDelta untuk penyesuaian zoom.
  • rightClickToReset: Mengklik kanan diagram akan menampilkannya ke tingkat menggeser dan zoom asli.
Jenis: Array string
Default: ['dragToPan', 'rightClickToReset']
explorer.axe

Secara default, pengguna dapat menggeser secara horizontal dan vertikal saat opsi explorer digunakan. Jika Anda ingin pengguna hanya menggeser secara horizontal, gunakan explorer: { axis: 'horizontal' }. Demikian pula, explorer: { axis: 'vertical' } memungkinkan penggeseran hanya vertikal.

Jenis: string
Default: pergeseran horizontal dan vertikal
explorer.keepInBounds

Secara default, pengguna dapat menggeser di mana pun data berada. Untuk memastikan pengguna tidak menggeser melampaui diagram asli, gunakan explorer: { keepInBounds: true }.

Jenis: boolean
Default: false (salah)
explorer.maxZoomIn

Jumlah maksimum yang dapat diperbesar oleh penjelajah. Secara default, pengguna dapat memperbesar cukup sehingga hanya akan melihat 25% dari tampilan asli. Menetapkan explorer: { maxZoomIn: .5 } akan memungkinkan pengguna memperbesar cukup jauh untuk melihat setengah tampilan asli.

Jenis: angka
Default: 0,25
explorer.maxZoomOut

Jumlah maksimum yang dapat dijelajahi oleh penjelajah. Secara default, pengguna akan dapat memperkecil cukup jauh sehingga diagram hanya akan menggunakan 1/4 dari ruang yang tersedia. Menetapkan explorer: { maxZoomOut: 8 } akan memungkinkan pengguna memperkecil tampilan cukup jauh sehingga diagram hanya akan menggunakan 1/8 dari ruang yang tersedia.

Jenis: angka
Default: 4
explorer.zoomDelta

Saat pengguna memperbesar atau memperkecil, explorer.zoomDelta akan menentukan seberapa besar zoom yang dilakukan pengguna. Semakin kecil angkanya, semakin halus dan semakin lambat zoom-nya.

Jenis: angka
Default: 1,5
ukuranFont

Ukuran font default, dalam piksel, dari semua teks dalam diagram. Anda dapat menggantinya menggunakan properti untuk elemen diagram tertentu.

Jenis: angka
Default: otomatis
NamaFont

Tampilan font default untuk semua teks dalam diagram. Anda dapat menggantinya menggunakan properti untuk elemen diagram tertentu.

Jenis: string
Default: 'chromebook'
forceIFrame

Menggambar diagram di dalam frame inline. (Perhatikan bahwa di IE8, opsi ini diabaikan; semua diagram IE8 digambar dalam i-frame.)

Jenis: boolean
Default: false (salah)
Sumbu h

Objek dengan anggota untuk mengonfigurasi berbagai elemen sumbu horizontal. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini: 

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
Objek Type:
Default: null
hAxis.baseline

Garis dasar untuk sumbu horizontal.

Jenis: angka
Default: otomatis
hAxis.baselineColor

Warna garis dasar untuk sumbu horizontal. Dapat berupa string warna HTML apa pun, misalnya: 'red' atau '#00cc00'.

Jenis: angka
Default: 'hitam'
hAxis.direction

Arah pertumbuhan nilai di sepanjang sumbu horizontal. Tentukan -1 untuk membalik urutan nilai.

Jenis: 1 atau -1
Default: 1
hAxis.format

String format untuk label sumbu numerik. Ini adalah subset dari kumpulan pola ICU . Misalnya, {format:'#,###%'} akan menampilkan nilai "1.000%", "750%", dan "50%" untuk nilai 10, 7.5, dan 0.5. Anda juga dapat menyediakan salah satu dari hal berikut:

  • {format: 'none'}: menampilkan angka tanpa format (mis., 8000000)
  • {format: 'decimal'}: menampilkan angka dengan pemisah ribuan (misalnya, 8.000.000)
  • {format: 'scientific'}: menampilkan angka dalam notasi ilmiah (misalnya, 8e6)
  • {format: 'currency'}: menampilkan angka dalam mata uang lokal (misalnya, $8.000.000,00)
  • {format: 'percent'}: menampilkan angka sebagai persentase (misalnya, 800.000.000%)
  • {format: 'short'}: menampilkan angka yang disingkat (misalnya, 8 JT)
  • {format: 'long'}: menampilkan angka sebagai kata lengkap (misalnya, 8 juta)

Format sebenarnya yang diterapkan pada label berasal dari lokalitas API yang telah dimuat. Untuk detail selengkapnya, lihat memuat diagram dengan lokalitas tertentu .

Dalam menghitung nilai centang dan garis kisi, beberapa kombinasi alternatif dari semua opsi garis kisi yang relevan akan dipertimbangkan dan alternatif akan ditolak jika label centang yang diformat akan diduplikasi atau tumpang-tindih. Jadi, Anda dapat menentukan format:"#" jika hanya ingin menampilkan nilai centang bilangan bulat, tetapi perhatikan bahwa jika tidak ada alternatif yang memenuhi kondisi ini, tidak ada garis petak atau tick yang akan ditampilkan.

Jenis: string
Default: otomatis
hAxis.gridline

Objek dengan properti untuk mengonfigurasi garis kisi pada sumbu horizontal. Perhatikan bahwa garis kisi sumbu horizontal digambar secara vertikal. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini: 

{color: '#333', minSpacing: 20}
Objek Type:
Default: null
hAxis.gridlines.color

Warna garis kisi horizontal di dalam area diagram. Tentukan string warna HTML yang valid.

Jenis: string
Default: '#CCC'
hAxis.gridlines.count

Perkiraan jumlah garis kisi horizontal di dalam area diagram. Jika Anda menentukan angka positif untuk gridlines.count, angka tersebut akan digunakan untuk menghitung minSpacing di antara garis kisi. Anda dapat menentukan nilai 1 untuk hanya menggambar satu garis petak, atau 0 untuk tidak menggambar garis kisi. Tentukan -1, yang merupakan default, untuk menghitung jumlah garis kisi secara otomatis berdasarkan opsi lain.

Jenis: angka
Default: -1
hAxis.gridlines.units

Mengganti format default untuk berbagai aspek jenis data tanggal/tanggal/waktu ketika digunakan dengan garis kisi yang dihitung diagram. Memungkinkan pemformatan untuk tahun, bulan, hari, jam, menit, detik, dan milidetik.

Format umumnya adalah:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

Informasi tambahan dapat ditemukan di Tanggal dan Waktu.

Objek Type:
Default: null
hAxis.minorGridlines

Objek dengan anggota untuk mengonfigurasi garis petak kecil pada sumbu horizontal, mirip dengan opsi hAxis.gridlines.

Objek Type:
Default: null
hAxis.minorGridlines.color

Warna garis petak kecil horizontal di dalam area diagram. Tentukan string warna HTML yang valid.

Jenis: string
Default: Gabungan antara warna petak dan latar belakang
hAxis.minorGridlines.count

Opsi minorGridlines.count sebagian besar tidak digunakan lagi, kecuali untuk menonaktifkan garis kisi minor dengan menetapkan jumlahnya ke 0. Jumlah garis petak kecil kini sepenuhnya bergantung pada interval antara garis petak utama (lihat hAxis.gridlines.interval) dan ruang minimum yang diperlukan (lihat hAxis.minorGridlines.minSpacing).

Jenis: angka
Default:1
hAxis.minorGridlines.units

Mengganti format default untuk berbagai aspek jenis data tanggal/tanggal/waktu ketika digunakan dengan minorGridlines yang dihitung diagram. Memungkinkan pemformatan untuk tahun, bulan, hari, jam, menit, detik, dan milidetik.

Format umumnya adalah:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

Informasi tambahan dapat ditemukan di Tanggal dan Waktu.

Objek Type:
Default: null
hAxis.logScale

Properti hAxis yang membuat sumbu horizontal menjadi skala logaritmik (memerlukan semua nilai yang harus positif). Tetapkan ke true untuk ya.

Jenis: boolean
Default: false (salah)
Jenis hAxis.scaleType

Properti hAxis yang membuat sumbu horizontal skala logaritmik. Dapat berupa salah satu dari hal berikut:

  • null - Tidak ada penskalaan logaritmik yang dilakukan.
  • 'log' - Penskalaan logaritmik. Nilai negatif dan nol tidak dipetakan. Opsi ini sama dengan setelan hAxis: { logscale: true }.
  • 'mirrorLog' - Penskalaan logaritmik dengan nilai negatif dan nol dipetakan. Nilai dipetakan angka negatif adalah negatif dari log nilai absolut. Nilai yang mendekati 0 dipetakan pada skala linear.
Jenis: string
Default: null
hAxis.textPosition

Posisi teks sumbu horizontal, relatif terhadap area diagram. Nilai yang didukung: 'out', 'in', 'none'.

Jenis: string
Default: 'keluar'
hAxis.textStyle

Objek yang menentukan gaya teks sumbu horizontal. Objek memiliki format ini:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color dapat berupa string warna HTML apa pun, misalnya: 'red' atau '#00cc00'. Lihat juga fontName dan fontSize.

Objek Type:
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.ticks

Mengganti tick sumbu X yang dibuat secara otomatis dengan array yang ditentukan. Setiap elemen array harus berupa nilai tick yang valid (seperti angka, tanggal, tanggal/waktu), atau objek. Jika berupa objek, properti tersebut harus memiliki properti v untuk nilai centang, dan properti f opsional yang berisi string literal yang akan ditampilkan sebagai label.

ViewWindow akan otomatis diperluas untuk menyertakan tick minimum dan maksimum, kecuali jika Anda menentukan viewWindow.min atau viewWindow.max yang akan diganti.

Contoh:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
Jenis: Array elemen
Default: otomatis
hAxis.title

Properti hAxis yang menentukan judul sumbu horizontal.

Jenis: string
Default: null
hAxis.titleTextStyle

Objek yang menentukan gaya teks judul sumbu horizontal. Objek memiliki format ini: 

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color dapat berupa string warna HTML apa pun, misalnya: 'red' atau '#00cc00'. Lihat juga fontName dan fontSize.

Objek Type:
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.maxValue

Memindahkan nilai maksimum sumbu horizontal ke nilai yang ditentukan; nilai ini akan berada tepat di sebagian besar diagram. Diabaikan jika nilai ini ditetapkan ke nilai yang lebih kecil dari nilai x maksimum data. hAxis.viewWindow.max mengganti properti ini.

Jenis: angka
Default: otomatis
hAxis.minValue

Memindahkan nilai min sumbu horizontal ke nilai yang ditentukan; nilai ini akan ke kiri di sebagian besar diagram. Diabaikan jika nilai ini ditetapkan ke nilai yang lebih besar dari nilai x minimum data. hAxis.viewWindow.min mengganti properti ini.

Jenis: angka
Default: otomatis
hAxis.viewWindowMode

Menentukan cara menskalakan sumbu horizontal untuk merender nilai dalam area diagram. Nilai string berikut didukung:

  • 'pretty' - Skalakan nilai horizontal sehingga nilai data maksimum dan minimum dirender sedikit di dalam kiri dan kanan area diagram. viewWindow diperluas ke garis petak utama terdekat untuk angka, atau garis kisi kecil terdekat untuk tanggal dan waktu.
  • 'maksimal' - Menskalakan nilai horizontal sehingga nilai data maksimum dan minimum menyentuh kiri dan kanan area diagram. Hal ini akan menyebabkan haxis.viewWindow.min dan haxis.viewWindow.max diabaikan.
  • 'explicit' - Opsi yang tidak digunakan lagi untuk menentukan nilai skala kiri dan kanan pada area diagram. (Tidak digunakan lagi karena redundan dengan haxis.viewWindow.min dan haxis.viewWindow.max.) Nilai data di luar nilai ini akan dipangkas. Anda harus menentukan objek hAxis.viewWindow yang menjelaskan nilai maksimum dan minimum untuk ditampilkan.
Jenis: string
Default: Setara dengan 'pretty', tetapi haxis.viewWindow.min dan haxis.viewWindow.max lebih diutamakan jika digunakan.
hAxis.viewWindow

Menentukan rentang pemangkasan sumbu horizontal.

Objek Type:
Default: null
hAxis.viewWindow.max

Nilai data horizontal maksimum yang akan dirender.

Diabaikan saat hAxis.viewWindowMode adalah 'pretty' atau 'maksimal'.

Jenis: angka
Default: otomatis
hAxis.viewWindow.min

Nilai data horizontal minimum yang akan dirender.

Diabaikan saat hAxis.viewWindowMode adalah 'pretty' atau 'maksimal'.

Jenis: angka
Default: otomatis
tinggi

Tinggi diagram, dalam piksel.

Jenis: angka
Default: tinggi elemen penampung
legenda

Objek dengan anggota untuk mengonfigurasi berbagai aspek legenda. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini: 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Objek Type:
Default: null
legenda.penyelarasan

Penyelarasan legenda. Dapat berupa salah satu dari hal berikut:

  • 'start' - Menyejajarkan ke awal area yang dialokasikan untuk legenda.
  • 'center' - Dipusatkan di area yang dialokasikan untuk legenda.
  • 'end' - Rata ke akhir area yang dialokasikan untuk legenda.

Awal, tengah, dan akhir relatif terhadap gaya -- vertikal atau horizontal -- legenda. Misalnya, pada legenda 'right', 'start' dan 'end' berturut-turut berada di bagian atas dan bawah; untuk legenda 'top', masing-masing 'start' dan 'end' akan berada di kiri dan kanan area.

Nilai defaultnya bergantung pada posisi legenda. Untuk legenda 'bottom', defaultnya adalah 'center'; legenda lainnya ditetapkan secara default ke 'start'.

Jenis: string
Default: otomatis
legend.maxLines

Jumlah baris maksimum dalam legenda. Tetapkan string ini ke angka yang lebih besar dari satu untuk menambahkan baris ke legenda. Catatan: Logika persis yang digunakan untuk menentukan jumlah baris sebenarnya yang dirender masih berubah-ubah.

Opsi ini saat ini hanya berfungsi jika legend.position adalah 'top'.

Jenis: angka
Default: 1
legend.pageIndex

Awal indeks halaman berbasis nol yang dipilih untuk legenda.

Jenis: angka
Default: 0
legenda.posisi

Posisi legenda. Dapat berupa salah satu dari hal berikut:

  • 'bawah' - Di bawah diagram.
  • 'kiri' - Di sebelah kiri diagram, sumbu kiri tidak memiliki rangkaian yang terkait dengan diagram tersebut. Jadi, jika Anda menginginkan legenda di sebelah kiri, gunakan opsi targetAxisIndex: 1.
  • 'in' - Di dalam diagram, di pojok kiri atas.
  • 'tidak ada' - Tidak ada legenda yang ditampilkan.
  • 'kanan' - Di sebelah kanan diagram. Tidak kompatibel dengan opsi vAxes.
  • 'top' - Di atas diagram.
Jenis: string
Default: 'kanan'
legenda.teksGaya

Objek yang menentukan gaya teks legenda. Objek memiliki format ini:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color dapat berupa string warna HTML apa pun, misalnya: 'red' atau '#00cc00'. Lihat juga fontName dan fontSize.

Objek Type:
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
modeMode

Jika selectionMode adalah 'multiple', pengguna dapat memilih beberapa titik data.

Jenis: string
Default: 'single'
serial

Objek, dengan kunci adalah nama rangkaian (nilai dalam kolom Warna) dan setiap objek yang menjelaskan format rangkaian terkait dalam diagram. Jika rangkaian atau nilai tidak ditentukan, nilai global akan digunakan. Setiap objek mendukung properti berikut:

  • color - Warna yang akan digunakan untuk rangkaian ini. Tentukan string warna HTML yang valid.
  • visibleInLegend - Nilai boolean, jika benar (true), berarti seri harus memiliki entri legenda, dan salah (false) berarti tidak boleh. Defaultnya adalah true (benar).
Contoh: 
series: {'Europe': {color: 'green'}}
Jenis: Objek dengan objek bertingkat
Default: {}
Sumbu ukuran

Objek dengan anggota untuk mengonfigurasi bagaimana nilai dikaitkan dengan ukuran balon. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini: 

 {minValue: 0,  maxSize: 20}
Objek Type:
Default: null
sizeAxis.maxSize

Radius maksimum balon yang memungkinkan, dalam piksel.

Jenis: angka
Default: 30
sizeAxis.maxValue

Nilai ukuran (seperti yang muncul dalam data diagram) yang akan dipetakan ke sizeAxis.maxSize. Nilai yang lebih besar akan dipangkas menjadi nilai ini.

Jenis: angka
Default: Nilai maksimum kolom ukuran dalam data diagram
sizeAxis.minSize

Radius minimum balon terkecil yang mungkin, dalam piksel.

Jenis: angka
Default: 5
sizeAxis.minValue

Nilai ukuran (seperti yang muncul dalam data diagram) yang akan dipetakan ke sizeAxis.minSize. Nilai yang lebih kecil akan dipangkas ke nilai ini.

Jenis: angka
Default: Nilai minimum kolom ukuran di data diagram
UrutkanBalonMenurutUkuran

Jika benar, urutkan balon sesuai ukuran sehingga balon yang lebih kecil muncul di atas balon yang lebih besar. Jika salah, balon diurutkan sesuai dengan urutannya di DataTable.

Jenis: boolean
Default: true (benar):
tema

Tema adalah sekumpulan nilai opsi yang telah ditetapkan sebelumnya dan berfungsi bersama untuk mencapai perilaku diagram atau efek visual tertentu. Saat ini hanya tersedia satu tema:

  • 'maksimal' - Memaksimalkan area diagram, dan menggambar legenda dan semua label di dalam area diagram. Menetapkan opsi berikut: 
    chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
Jenis: string
Default: null
judul

Teks yang akan ditampilkan di atas diagram.

Jenis: string
Default: tanpa judul
titlePosition

Tempat untuk menempatkan judul diagram, dibandingkan dengan area diagram. Nilai yang didukung:

  • in - Gambar judul di dalam area diagram.
  • out - Gambar judul di luar area diagram.
  • tidak ada - Hapus judul.
Jenis: string
Default: 'keluar'
titleTextStyle

Objek yang menentukan gaya teks judul. Objek memiliki format ini:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color dapat berupa string warna HTML apa pun, misalnya: 'red' atau '#00cc00'. Lihat juga fontName dan fontSize.

Objek Type:
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip

Objek dengan anggota untuk mengonfigurasi berbagai elemen tooltip. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
Objek Type:
Default: null
tooltip.isHtml

Jika disetel ke benar (true), gunakan tooltip yang dirender HTML (bukan yang dirender SVG). Lihat Menyesuaikan Konten Tooltip untuk detail selengkapnya.

Catatan: penyesuaian konten tooltip HTML melalui peran data kolom tooltip tidak didukung oleh visualisasi Diagram Balon.

Jenis: boolean
Default: false (salah)
tooltip.teksGaya

Objek yang menentukan gaya teks tooltip. Objek memiliki format ini:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color dapat berupa string warna HTML apa pun, misalnya: 'red' atau '#00cc00'. Lihat juga fontName dan fontSize.

Objek Type:
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.pemicu

Interaksi pengguna yang menyebabkan tooltip ditampilkan:

  • 'fokus' - Tooltip akan ditampilkan saat pengguna mengarahkan kursor ke elemen.
  • 'tidak ada' - Tooltip tidak akan ditampilkan.
  • 'selection' - Tooltip akan ditampilkan saat pengguna memilih elemen.
Jenis: string
Default: 'fokus'
Sumbu V

Objek dengan anggota untuk mengonfigurasi berbagai elemen sumbu vertikal. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini: 

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Objek Type:
Default: null
vXx.baseline

Properti vAxis yang menentukan dasar pengukuran sumbu vertikal. Jika dasar pengukuran lebih besar dari garis petak tertinggi atau lebih kecil dari garis petak terendah, garis dasar akan dibulatkan ke garis kisi terdekat.

Jenis: angka
Default: otomatis
vAxis.baselineColor

Menentukan warna dasar pengukuran untuk sumbu vertikal. Dapat berupa string warna HTML apa pun, misalnya: 'red' atau '#00cc00'.

Jenis: angka
Default: 'hitam'
vAxis.direction

Arah pertumbuhan nilai di sepanjang sumbu vertikal. Secara default, nilai rendah berada di bagian bawah diagram. Tentukan -1 untuk membalik urutan nilai.

Jenis: 1 atau -1
Default: 1
format vAxis

String format untuk label sumbu numerik. Ini adalah subset dari kumpulan pola ICU . Misalnya, {format:'#,###%'} akan menampilkan nilai "1.000%", "750%", dan "50%" untuk nilai 10, 7.5, dan 0.5. Anda juga dapat menyediakan salah satu dari hal berikut:

  • {format: 'none'}: menampilkan angka tanpa format (mis., 8000000)
  • {format: 'decimal'}: menampilkan angka dengan pemisah ribuan (misalnya, 8.000.000)
  • {format: 'scientific'}: menampilkan angka dalam notasi ilmiah (misalnya, 8e6)
  • {format: 'currency'}: menampilkan angka dalam mata uang lokal (misalnya, $8.000.000,00)
  • {format: 'percent'}: menampilkan angka sebagai persentase (misalnya, 800.000.000%)
  • {format: 'short'}: menampilkan angka yang disingkat (misalnya, 8 JT)
  • {format: 'long'}: menampilkan angka sebagai kata lengkap (misalnya, 8 juta)

Format sebenarnya yang diterapkan pada label berasal dari lokalitas API yang telah dimuat. Untuk detail selengkapnya, lihat memuat diagram dengan lokalitas tertentu .

Dalam menghitung nilai centang dan garis kisi, beberapa kombinasi alternatif dari semua opsi garis kisi yang relevan akan dipertimbangkan dan alternatif akan ditolak jika label centang yang diformat akan diduplikasi atau tumpang-tindih. Jadi, Anda dapat menentukan format:"#" jika hanya ingin menampilkan nilai centang bilangan bulat, tetapi perhatikan bahwa jika tidak ada alternatif yang memenuhi kondisi ini, tidak ada garis petak atau tick yang akan ditampilkan.

Jenis: string
Default: otomatis
baris vAxis.grid

Objek dengan anggota untuk mengonfigurasi garis kisi pada sumbu vertikal. Perhatikan bahwa garis kisi sumbu vertikal digambar secara horizontal. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini: 

{color: '#333', minSpacing: 20}
Objek Type:
Default: null
vAxis.gridlines.color

Warna garis kisi vertikal di dalam area diagram. Tentukan string warna HTML yang valid.

Jenis: string
Default: '#CCC'
vAxis.gridlines.count

Perkiraan jumlah garis kisi horizontal di dalam area diagram. Jika Anda menentukan angka positif untuk gridlines.count, angka tersebut akan digunakan untuk menghitung minSpacing di antara garis kisi. Anda dapat menentukan nilai 1 untuk hanya menggambar satu garis petak, atau 0 untuk tidak menggambar garis kisi. Tentukan -1, yang merupakan default, untuk menghitung jumlah garis kisi secara otomatis berdasarkan opsi lain.

Jenis: angka
Default: -1
vAxis.gridlines.units

Mengganti format default untuk berbagai aspek jenis data tanggal/tanggal/waktu ketika digunakan dengan garis kisi yang dihitung diagram. Memungkinkan pemformatan untuk tahun, bulan, hari, jam, menit, detik, dan milidetik.

Format umumnya adalah:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}

Informasi tambahan dapat ditemukan di Tanggal dan Waktu.

Objek Type:
Default: null
Garis Vektor Axis.minorGrid

Objek dengan anggota untuk mengonfigurasi garis petak kecil pada sumbu vertikal, mirip dengan opsi vAxis.gridlines.

Objek Type:
Default: null
vAxis.minorGridlines.color

Warna garis petak vertikal vertikal di dalam area diagram. Tentukan string warna HTML yang valid.

Jenis: string
Default: Gabungan antara warna petak dan latar belakang
vAxis.minorGridlines.count

Opsi minorGridlines.count sebagian besar tidak digunakan lagi, kecuali untuk menonaktifkan garis petak minor dengan menetapkan jumlahnya ke 0. Jumlah garis petak kecil bergantung pada interval antara garis kisi utama (lihat vAxis.gridlines.interval) dan ruang minimum yang diperlukan (lihat vAxis.minorGridlines.minSpacing).

Jenis: angka
Default: 1
vAxis.minorGridlines.units

Mengganti format default untuk berbagai aspek jenis data tanggal/tanggal/waktu ketika digunakan dengan minorGridlines yang dihitung diagram. Memungkinkan pemformatan untuk tahun, bulan, hari, jam, menit, detik, dan milidetik.

Format umumnya adalah:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

Informasi tambahan dapat ditemukan di Tanggal dan Waktu.

Objek Type:
Default: null
Skala vAxis.log

Jika true, membuat sumbu vertikal menjadi skala logaritmik. Catatan: Semua nilai harus positif.

Jenis: boolean
Default: false (salah)
Jenis vAxis.scale

Properti vAxis yang membuat sumbu vertikal menjadi skala logaritmik. Dapat berupa salah satu dari hal berikut:

  • null - Tidak ada penskalaan logaritmik yang dilakukan.
  • 'log' - Penskalaan logaritmik. Nilai negatif dan nol tidak dipetakan. Opsi ini sama dengan setelan vAxis: { logscale: true }.
  • 'mirrorLog' - Penskalaan logaritmik dengan nilai negatif dan nol dipetakan. Nilai dipetakan angka negatif adalah negatif dari log nilai absolut. Nilai yang mendekati 0 dipetakan pada skala linear.
Jenis: string
Default: null
vAxis.textPosition

Posisi teks sumbu vertikal, relatif terhadap area diagram. Nilai yang didukung: 'out', 'in', 'none'.

Jenis: string
Default: 'keluar'
vAxis.textStyle

Objek yang menentukan gaya teks sumbu vertikal. Objek memiliki format ini:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color dapat berupa string warna HTML apa pun, misalnya: 'red' atau '#00cc00'. Lihat juga fontName dan fontSize.

Objek Type:
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

Mengganti tick sumbu Y yang dibuat secara otomatis dengan array yang ditentukan. Setiap elemen array harus berupa nilai tick yang valid (seperti angka, tanggal, tanggal/waktu), atau objek. Jika berupa objek, properti tersebut harus memiliki properti v untuk nilai centang, dan properti f opsional yang berisi string literal yang akan ditampilkan sebagai label.

ViewWindow akan otomatis diperluas untuk menyertakan tick minimum dan maksimum, kecuali jika Anda menentukan viewWindow.min atau viewWindow.max yang akan diganti.

Contoh:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
Jenis: Array elemen
Default: otomatis
vAxis.title

Properti vAxis yang menentukan judul untuk sumbu vertikal.

Jenis: string
Default: tanpa judul
vAxis.titleTextStyle

Objek yang menentukan gaya teks judul sumbu vertikal. Objek memiliki format ini:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color dapat berupa string warna HTML apa pun, misalnya: 'red' atau '#00cc00'. Lihat juga fontName dan fontSize.

Objek Type:
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
NilaiVaxis.max

Memindahkan nilai maksimum sumbu vertikal ke nilai yang ditentukan; nilai ini akan naik ke sebagian besar diagram. Diabaikan jika nilai ini ditetapkan ke nilai yang lebih kecil dari nilai y maksimum data. vAxis.viewWindow.max mengganti properti ini.

Jenis: angka
Default: otomatis
NilaiVvx.minNilai

Memindahkan nilai min sumbu vertikal ke nilai yang ditentukan; ini akan ke bawah di sebagian besar diagram. Diabaikan jika nilai ini ditetapkan ke nilai yang lebih besar dari nilai y minimum data. vAxis.viewWindow.min mengganti properti ini.

Jenis: angka
Default: null
vAxis.viewWindowMode

Menentukan cara menskalakan sumbu vertikal untuk merender nilai dalam area diagram. Nilai string berikut didukung:

  • 'pretty' - Skalakan nilai vertikal sehingga nilai data maksimum dan minimum dirender sedikit di dalam bagian bawah dan atas area diagram. viewWindow diperluas ke garis petak utama terdekat untuk angka, atau garis kisi kecil terdekat untuk tanggal dan waktu.
  • 'maksimal' - Menskalakan nilai vertikal sehingga nilai data maksimum dan minimum menyentuh bagian atas dan bawah area diagram. Hal ini akan menyebabkan vaxis.viewWindow.min dan vaxis.viewWindow.max diabaikan.
  • 'eksplisit' - Opsi yang tidak digunakan lagi untuk menentukan nilai skala atas dan bawah dari area diagram. (Tidak digunakan lagi karena redundan dengan vaxis.viewWindow.min dan vaxis.viewWindow.max. Nilai data di luar nilai tersebut akan dipangkas. Anda harus menentukan objek vAxis.viewWindow yang menjelaskan nilai maksimum dan minimum untuk ditampilkan.
Jenis: string
Default: Setara dengan 'pretty', tetapi vaxis.viewWindow.min dan vaxis.viewWindow.max lebih diutamakan jika digunakan.
vAxis.viewWindow

Menentukan rentang pemangkasan sumbu vertikal.

Objek Type:
Default: null
vAxis.viewWindow.maks

Nilai data vertikal maksimum yang akan dirender.

Diabaikan saat vAxis.viewWindowMode adalah 'pretty' atau 'maksimal'.

Jenis: angka
Default: otomatis
vAxis.viewWindow.min

Nilai data vertikal minimum yang akan dirender.

Diabaikan saat vAxis.viewWindowMode adalah 'pretty' atau 'maksimal'.

Jenis: angka
Default: otomatis
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 ready diaktifkan. Extended description

Jenis Hasil: tidak ada
getAction(actionID)

Menampilkan objek tindakan tooltip dengan actionID yang diminta.

Return Type:
getBoundingBox(id)

Menampilkan objek yang berisi kiri, atas, lebar, dan tinggi elemen diagram id. Format untuk id belum didokumentasikan (ini adalah nilai hasil pengendali peristiwa), tetapi berikut adalah beberapa contohnya:

var cli = chart.getChartLayoutInterface();

Ketinggian area diagram
cli.getBoundingBox('chartarea').height
Lebar batang ketiga dalam rangkaian pertama diagram batang atau kolom
cli.getBoundingBox('bar#0#2').width
Kotak pembatas pada 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 dari diagram horizontal (misalnya, batang):
cli.getBoundingBox('hAxis#0#gridline')

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

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

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:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

Panggil ini setelah diagram digambar.

Return Type:
getHAxisValue(xPosition, optional_axis_index)

Menampilkan nilai data horizontal pada xPosition, yang merupakan offset piksel dari tepi kiri penampung diagram. Dapat bernilai negatif.

Contoh: chart.getChartLayoutInterface().getHAxisValue(400).

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. Entitas yang dapat dipilih adalah balon. Untuk diagram ini, hanya satu entitas yang dapat dipilih pada waktu tertentu. Extended description

Jenis Hasil: Array elemen pilihan
getVAxisValue(yPosition, optional_axis_index)

Menampilkan nilai data vertikal di yPosition, yang merupakan offset piksel ke bawah dari tepi atas penampung diagram. Dapat bernilai negatif.

Contoh: chart.getChartLayoutInterface().getVAxisValue(300).

Panggil ini setelah diagram digambar.

Jenis Hasil: angka
getXLocation(dataValue, optional_axis_index)

Menampilkan koordinat x piksel dataValue yang relatif terhadap tepi kiri penampung diagram.

Contoh: chart.getChartLayoutInterface().getXLocation(400).

Panggil ini setelah diagram digambar.

Jenis Hasil: angka
getYLocation(dataValue, optional_axis_index)

Menampilkan koordinat y piksel dataValue relatif terhadap tepi atas penampung diagram.

Contoh: chart.getChartLayoutInterface().getYLocation(300).

Panggil ini setelah diagram digambar.

Jenis Hasil: angka
removeAction(actionID)

Menghapus tindakan tooltip dengan actionID yang diminta dari diagram.

Jenis Hasil: none
setAction(action)

Menetapkan tindakan tooltip yang akan dijalankan saat pengguna mengklik teks tindakan.

Metode setAction menggunakan objek sebagai parameter tindakannya. Objek ini harus menentukan 3 properti: id— ID tindakan yang ditetapkan, text —teks yang akan muncul di 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 yang diperluas.

Jenis Hasil: none
setSelection()

Memilih entitas diagram yang ditentukan. Membatalkan pilihan sebelumnya. Entitas yang dapat dipilih adalah balon. Untuk diagram ini, hanya satu entitas yang dapat dipilih sekaligus. Extended description

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. Balon berhubungan dengan baris di tabel data (indeks kolom bernilai null).

Properti: baris, kolom
onmouseout

Diaktifkan saat pengguna mouse menjauh dari entitas visual. Meneruskan kembali indeks baris dan kolom dari elemen tabel data yang sesuai. Balon berhubungan dengan baris di tabel data (indeks kolom bernilai null).

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.