Visualisasi: Diagram Lingkaran

Ringkasan

Diagram lingkaran yang dirender di dalam browser menggunakan SVG atau VML. Menampilkan tooltip saat mengarahkan kursor ke irisan.

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

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

Membuat Diagram Lingkaran 3D

Jika Anda menetapkan opsi is3D ke true, diagram lingkaran akan digambar seolah-olah memiliki tiga dimensi:

is3D adalah false secara default, jadi di sini kita secara eksplisit menetapkannya ke true: 

<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([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };

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

Membuat Diagram Donat

Diagram donat adalah diagram lingkaran dengan lubang di bagian tengahnya. Anda dapat membuat diagram donat dengan opsi pieHole:

Opsi pieHole harus ditetapkan ke angka antara 0 dan 1, yang sesuai dengan rasio radius antara lubang dan diagram. Angka antara 0,4 dan 0,6 akan terlihat paling baik pada sebagian besar diagram. Nilai yang sama dengan atau lebih besar dari 1 akan diabaikan, dan nilai 0 akan sepenuhnya menutup lingkaran kecil Anda.

<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([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

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

Anda tidak dapat menggabungkan opsi pieHole dan is3D; jika Anda melakukannya, pieHole akan diabaikan.

Perhatikan bahwa Google Chart mencoba menempatkan label sedekat mungkin dengan bagian tengah slice. Jika Anda memiliki diagram donat yang hanya berisi satu irisan, bagian tengah irisan mungkin berada di dalam lubang donat. Dalam hal ini, ubah warna label:
Opsi
        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };
HTML Lengkap
<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([
          ['Effort', 'Amount given'],
          ['My all',     100],
        ]);

        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };

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

Memutar Diagram Lingkaran

Secara default, diagram lingkaran dimulai dengan tepi kiri irisan pertama mengarah lurus ke atas. Anda dapat mengubahnya dengan opsi pieStartAngle:

Di sini, kita memutar diagram searah jarum jam 100 derajat dengan opsi pieStartAngle: 100. (Jadi dipilih karena sudut tertentu tersebut terjadi untuk membuat label "Italia" pas di dalam irisan.)

<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([
          ['Language', 'Speakers (in millions)'],
          ['German',  5.85],
          ['French',  1.66],
          ['Italian', 0.316],
          ['Romansh', 0.0791]
        ]);

      var options = {
        legend: 'none',
        pieSliceText: 'label',
        title: 'Swiss Language Use (100 degree rotation)',
        pieStartAngle: 100,
      };

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

Meledakkan Slice

Anda dapat memisahkan irisan lingkaran dari bagian lain diagram dengan properti offset dari opsi slices:

Untuk memisahkan slice, buat objek slices dan tetapkan offset ke nomor slice yang sesuai antara 0 dan 1. Di bawah ini, kami menetapkan offset yang lebih besar secara bertahap untuk irisan 4 (Gujarati), 12 (Marathi), 14 (Oriya), dan 15 (Punjabi): 

<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([
          ['Language', 'Speakers (in millions)'],
          ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
          ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
          ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
          ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
          ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
          ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
          ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
        ]);

        var options = {
          title: 'Indian Language Use',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  4: {offset: 0.2},
                    12: {offset: 0.3},
                    14: {offset: 0.4},
                    15: {offset: 0.5},
          },
        };

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

Menghapus Slice

Untuk menghilangkan slice, ubah warnanya menjadi 'transparent':

Kita juga menggunakan pieStartAngle untuk memutar diagram 135 derajat, pieSliceText untuk menghapus teks dari slice, dan tooltip.trigger untuk menonaktifkan tooltip:

<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([
          ['Pac Man', 'Percentage'],
          ['', 75],
          ['', 25]
        ]);

        var options = {
          legend: 'none',
          pieSliceText: 'none',
          pieStartAngle: 135,
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: 'yellow' },
            1: { color: 'transparent' }
          }
        };

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

Batas Visibilitas Slice

Anda dapat menetapkan nilai sebagai ambang batas untuk irisan lingkaran yang dirender satu per satu. Nilai ini sesuai dengan sebagian kecil diagram (dengan keseluruhan diagram bernilai 1). Untuk menetapkan batas ini sebagai persentase dari keseluruhan, bagi persentase yang diinginkan dengan 100 (untuk batas 20%, nilainya akan menjadi 0,2). 

sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.

Setiap irisan yang lebih kecil dari nilai minimum ini akan digabungkan ke dalam satu irisan "Lainnya", dan akan memiliki nilai gabungan semua irisan di bawah nilai minimum. 

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Pizza');
      data.addColumn('number', 'Populartiy');
      data.addRows([
        ['Pepperoni', 33],
        ['Hawaiian', 26],
        ['Mushroom', 22],
        ['Sausage', 10], // Below limit.
        ['Anchovies', 9] // Below limit.
      ]);

      var options = {
        title: 'Popularity of Types of Pizza',
        sliceVisibilityThreshold: .2
      };

      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

Memuat

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

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

Nama class visualisasi adalah google.visualization.PieChart. 

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

Format Data

Baris: Setiap baris dalam tabel mewakili sebuah irisan.

Kolom:

  Kolom 0 Kolom 1 ... Kolom N (opsional)
Tujuan: Label irisan Nilai irisan ... Peran opsional
Jenis Data: string number ...
Peran: domain data ...
Peran kolom opsional: None None ...

Opsi Konfigurasi

Name
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 batas diagram, sebagai string warna HTML.

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

Lebar pembatas, dalam piksel.

Jenis: nomor
Default: 0
backgroundColor.fill

Warna pengisi diagram, sebagai string warna HTML.

Jenis: string
Default: 'putih'
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.backgroundColor
Warna latar belakang area diagram. Jika digunakan, string dapat berupa string heksadesimal (misalnya, '#fdc') atau nama warna bahasa Inggris. Saat sebuah objek digunakan, properti berikut dapat diberikan:
  • stroke: warna, disediakan sebagai string heksadesimal atau nama warna bahasa Inggris.
  • strokeWidth: jika disediakan, menggambar batas di sekitar area diagram dengan lebar yang ditentukan (dan dengan warna stroke).
Jenis: string atau objek
Default: 'putih'
chartArea.left

Seberapa jauh menggambar diagram dari batas kiri.

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
warna

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

Jenis: Array string
Default: warna default
enableInteractivity

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

Jenis: boolean
Default: benar (true)
fontSize

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

Jenis: nomor
Default: otomatis
fontName

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

Jenis: string
Default: 'XXXXXXXX'
forceIFrame

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

Jenis: boolean
Default: false
tinggi

Tinggi diagram, dalam piksel.

Jenis: nomor
Default: tinggi elemen yang memuatnya
is3D

Jika true (benar), menampilkan diagram tiga dimensi.

Jenis: boolean
Default: false
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}}
Jenis: objek
Default: null
legend.alignment

Perataan legenda. Dapat berupa salah satu dari hal berikut:

  • 'start' - Diratakan dengan awal area yang dialokasikan untuk legenda.
  • 'center' - Dipusatkan pada area yang dialokasikan untuk legenda.
  • 'end' - Disejajarkan dengan akhir area yang dialokasikan untuk legenda.

Awal, tengah, dan akhir berhubungan dengan gaya -- vertikal atau horizontal -- legenda. Misalnya, pada legenda 'kanan', 'start' dan 'end' masing-masing berada di bagian atas dan bawah; untuk legenda 'top', 'start' dan 'end' akan berada di sebelah kiri dan kanan area tersebut.

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

Jenis: string
Default: otomatis
legend.position

Posisi legenda. Dapat berupa salah satu dari hal berikut:

  • 'bottom' - Menampilkan legenda di bawah diagram.
  • 'labeled' - Menggambar garis yang menghubungkan irisan ke nilai datanya.
  • 'left' - Menampilkan legenda di kiri diagram.
  • 'none' - Tidak menampilkan legenda.
  • 'right' - Menampilkan legenda di kanan diagram.
  • 'top' - Menampilkan legenda di atas diagram.
Jenis: string
Default: 'right'
legend.maxLines

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

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

Jenis: nomor
Default: 1
legend.textStyle

Objek yang menetapkan 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.

Jenis: objek
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
pieHole

Jika antara 0 dan 1, menampilkan diagram donat. Lubang dengan radius yang sama dengan number kali radius diagram.

Jenis: nomor
Default: 0
pieSliceBorderColor

Warna batas irisan. Hanya dapat diterapkan jika diagram bersifat dua dimensi.

Jenis: string
Default: 'putih'
pieSliceText

Konten teks yang ditampilkan di slice. Dapat berupa salah satu dari hal berikut:

  • 'persentase' - Persentase ukuran irisan dari total.
  • 'value' - Nilai kuantitatif irisan.
  • 'label' - Nama irisan.
  • 'none' - Tidak ada teks yang ditampilkan.
Jenis: string
Default: 'persentase'
pieSliceTextStyle

Objek yang menetapkan gaya teks irisan. 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.

Jenis: objek
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
pieStartAngle

Sudut, dalam derajat, untuk memutar diagram. Default 0 akan mengarahkan tepi paling kiri dari irisan pertama langsung ke atas.

Jenis: nomor
Default: 0
reverseCategories

Jika true (benar), menggambar slice berlawanan arah jarum jam. Defaultnya adalah menggambar searah jarum jam.

Jenis: boolean
Default: false
pieResidueSliceColor

Warna untuk irisan kombinasi yang menyimpan semua slice di bawah sliceVisibilityThreshold.

Jenis: string
Default: '#ccc'
pieResidueSliceLabel

Label untuk slice kombinasi yang menyimpan semua slice di bawah sliceVisibilityThreshold.

Jenis: string
Default: 'Lainnya'
irisan

Array objek, masing-masing menjelaskan format irisan yang sesuai dalam lingkaran. Untuk menggunakan nilai default slice, tentukan objek kosong (misalnya, {}). Jika slice atau nilai tidak ditentukan, nilai global akan digunakan. Setiap objek mendukung properti berikut:

  • color - Warna yang akan digunakan untuk irisan ini. Tentukan string warna HTML yang valid.
  • offset - Seberapa jauh memisahkan irisan dari bagian lingkaran lainnya, dari 0,0 (tidak sama sekali) hingga 1,0 (jari-jari lingkaran).
  • textStyle - Mengganti pieSliceTextStyle global untuk slice ini.

Anda dapat menentukan array objek, yang masing-masing berlaku pada slice sesuai urutan yang ditentukan, atau menentukan objek tempat setiap turunan memiliki kunci numerik yang menunjukkan pada irisan mana irisan diterapkan. Misalnya, dua deklarasi berikut identik, dan mendeklarasikan irisan pertama sebagai hitam dan yang keempat sebagai merah: 

slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
Jenis: Array objek atau objek dengan objek bertingkat
Default: {}
sliceVisibilityThreshold

Nilai pecahan lingkaran, yang jika lebih rendah dari nilai tersebut, sebuah irisan tidak akan ditampilkan satu per satu. Semua irisan yang belum melewati batas ini akan digabungkan ke satu irisan "Lainnya", yang ukurannya merupakan jumlah dari semua ukurannya. Defaultnya adalah tidak menampilkan potongan apa pun yang lebih kecil dari setengah derajat secara individual. 

// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
Jenis: nomor
Default: Setengah derajat (.5/360 atau 1/720 atau .0014)
title

Teks yang akan ditampilkan di atas diagram.

Jenis: string
Default: tanpa judul
titleTextStyle

Objek yang menetapkan 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.

Jenis: objek
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 ditampilkan di sini: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
Jenis: objek
Default: null
tooltip.ignoreBounds

Jika ditetapkan ke true, memungkinkan penggambaran tooltip mengalir di luar batas diagram di semua sisi.

Catatan: Ini hanya berlaku untuk tooltip HTML. Jika kebijakan ini diaktifkan dengan tooltip SVG, kelebihan apa pun di luar batas diagram akan dipangkas. Lihat Menyesuaikan Konten Tooltip untuk mengetahui detail selengkapnya.

Jenis: boolean
Default: false
tooltip.isHtml

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

Catatan: penyesuaian konten tooltip HTML melalui peran data kolom tooltip tidak didukung oleh visualisasi Bubble Chart.

Jenis: boolean
Default: false
tooltip.showColorCode

Jika benar, tampilkan kotak berwarna di samping informasi irisan dalam tooltip.

Jenis: boolean
Default: false
tooltip.text

Informasi yang akan ditampilkan saat pengguna mengarahkan kursor ke irisan lingkaran. Nilai-nilai berikut ini didukung:

  • 'kedua' - [Default] Menampilkan nilai absolut irisan dan persentase keseluruhan.
  • 'value' - Hanya menampilkan nilai absolut irisan.
  • 'persentase' - Hanya menampilkan persentase keseluruhan yang diwakili oleh irisan.
Jenis: string
Default: 'keduanya'
tooltip.textStyle

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.

Jenis: objek
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

Interaksi pengguna yang menyebabkan tooltip ditampilkan:

  • 'focus' - Tooltip akan ditampilkan saat pengguna mengarahkan kursor ke elemen.
  • 'none' - Tooltip tidak akan ditampilkan.
  • 'selection' - Tooltip akan ditampilkan saat pengguna memilih elemen.
Jenis: string
Default: 'fokus'
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. Entitas yang dapat dipilih adalah slice dan entri legenda. 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. Entitas yang dapat dipilih adalah slice dan entri legenda. 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
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
onmouseover

Diaktifkan saat pengguna mengarahkan mouse ke entitas visual. Meneruskan kembali indeks baris dan kolom dari elemen tabel data yang sesuai. Entri legenda atau slice berkorelasi dengan baris dalam tabel data (indeks kolom null).

Properti: baris, kolom
onmouseout

Diaktifkan saat pengguna menjauhi entity visual. Meneruskan kembali indeks baris dan kolom dari elemen tabel data yang sesuai. Entri legenda atau slice berkorelasi dengan baris dalam tabel data (indeks kolom 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.