Visualisasi: Diagram Lingkaran

Ringkasan

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

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 secara default adalah false, 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 tengahnya. Anda dapat membuat diagram donat dengan opsi pieHole:

Opsi pieHole harus ditetapkan ke angka antara 0 dan 1, sesuai dengan rasio radius antara lubang dan diagram. Angka antara 0,4 dan 0,6 akan terlihat paling baik di sebagian besar diagram. Nilai yang sama dengan atau lebih besar dari 1 akan diabaikan, dan nilai 0 akan benar-benar menutup lingkaran pai 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 hanya dengan satu irisan, bagian tengah irisan mungkin akan masuk ke 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 yang mengarah lurus ke atas. Anda dapat mengubahnya dengan opsi pieStartAngle:

Di sini, kita memutar diagram 100 derajat searah jarum jam dengan opsi pieStartAngle: 100. (Oleh karena itu, dipilihkan sudut khusus tersebut agar label "Italia" pas di dalam potongan.)

<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 diagram lainnya dengan properti offset untuk opsi slices:

Untuk memisahkan potongan, buat objek slices dan tetapkan nomor bagian yang sesuai offset antara 0 dan 1. Di bawah ini, kami menetapkan offset bertahap yang lebih besar untuk irisan 4 (Gujarat), 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 potongan, 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>

Nilai Minimum Visibilitas Slice

Anda dapat menetapkan nilai sebagai nilai minimum untuk bagian lingkaran yang akan dirender satu per satu. Nilai ini sesuai dengan sebagian kecil diagram (dengan keseluruhan diagram bernilai 1). Untuk menetapkan nilai minimum ini sebagai persentase dari nilai keseluruhan, bagi persentase yang diinginkan dengan 100 (untuk nilai minimum 20%, nilainya adalah 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 menjadi satu irisan "Lainnya", dan akan memiliki nilai gabungan dari 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 visualisasinya adalah google.visualization.PieChart. 

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

Format Data

Baris: Setiap baris dalam tabel mewakili satu irisan.

Kolom:

  Kolom 0 Kolom 1 ... Kolom N (opsional)
Tujuan: Label Slice Nilai Slice ... Peran opsional
Jenis Data: string angka ...
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 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'
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
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):
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)
tinggi

Tinggi diagram, dalam piksel.

Jenis: angka
Default: tinggi elemen penampung
3D

Jika true (benar), diagram tiga dimensi akan ditampilkan.

Jenis: boolean
Default: false (salah)
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
legenda.posisi

Posisi legenda. Dapat berupa salah satu dari hal berikut:

  • 'bottom' - Menampilkan legenda di bawah diagram.
  • 'labeled' - Menggambar garis yang menghubungkan slice ke nilai datanya.
  • 'left' - Menampilkan legenda di kiri diagram.
  • 'tidak ada' - Tidak menampilkan legenda.
  • 'right' - Menampilkan legenda di kanan diagram.
  • 'top' - Menampilkan legenda di atas diagram.
Jenis: string
Default: 'kanan'
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
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>}
paiHole

Jika antara 0 dan 1, diagram donat akan ditampilkan. Lubang dengan radius sama dengan number kali radius diagram.

Jenis: angka
Default: 0
paiSliceBorderColor

Warna batas irisan. Hanya berlaku jika diagram memiliki dua dimensi.

Jenis: string
Default: 'putih'
paiSliceText

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

  • 'Persentase' - Persentase ukuran irisan dari total.
  • 'nilai' - Nilai kuantitatif bagian.
  • 'label' - Nama irisan.
  • 'tidak ada' - Tidak ada teks yang ditampilkan.
Jenis: string
Default: 'Persentase'
paiSliceTextStyle

Objek yang menentukan gaya teks slice. 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>}
PakuMulaiAngle

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

Jenis: angka
Default: 0
reverseKategori

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

Jenis: boolean
Default: false (salah)
paiResidueSliceColor

Warna untuk potongan kombinasi yang menyimpan semua potongan di bawah sliceVisibilityThreshold.

Jenis: string
Default: '#ccc'
pieResidueSliceLabel

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

Jenis: string
Default: 'Lainnya'
irisan

Array objek, yang masing-masing menjelaskan format irisan yang sesuai di lingkaran. Agar dapat menggunakan nilai default untuk sebuah slice, tentukan objek kosong (yaitu, {}). Jika irisan atau nilai tidak ditentukan, nilai global akan digunakan. Setiap objek mendukung properti berikut:

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

Anda dapat menentukan array objek, yang masing-masingnya berlaku untuk potongan tersebut dalam urutan yang diberikan, atau Anda dapat menentukan objek tempat setiap turunan memiliki kunci numerik yang menunjukkan potongan mana yang berlaku. Misalnya, dua deklarasi berikut identik, dan mendeklarasikan potongan pertama berwarna hitam dan yang keempat berwarna 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 dari lingkaran, di bawahnya, bagian tidak akan ditampilkan secara terpisah. Semua irisan yang belum lulus nilai minimum ini akan digabungkan ke satu irisan "Lainnya", yang ukurannya adalah jumlah dari semua ukurannya. Defaultnya adalah tidak menampilkan satu per satu bagian yang lebih kecil dari setengah derajat. 

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

Teks yang akan ditampilkan di atas diagram.

Jenis: string
Default: tanpa judul
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.ignoreBounds

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

Catatan: Ini hanya berlaku untuk tooltip HTML. Jika ini diaktifkan dengan tooltip SVG, setiap overflow di luar batas diagram akan dipangkas. Lihat Menyesuaikan Konten Tooltip untuk detail selengkapnya.

Jenis: boolean
Default: false (salah)
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.showColorCode

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

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

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

  • ' Both' - [Default] Menampilkan nilai absolut dari potongan ini dan persentase keseluruhan.
  • 'value' - Hanya menampilkan nilai absolut dari irisan.
  • 'Persentase' - Hanya menampilkan persentase keseluruhan yang diwakili oleh bagian.
Jenis: string
Default: 'keduanya'
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'
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 entri slice dan legenda. 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 entri slice dan legenda. 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
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
onmouseover

Diaktifkan saat pengguna mengarahkan mouse ke entitas visual. Meneruskan kembali indeks baris dan kolom dari elemen tabel data yang sesuai. Entri irisan atau legenda berkorelasi 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. Entri irisan atau legenda berkorelasi 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.