Visualisasi: Diagram Sebar

Ringkasan

Diagram sebar titik plot pada grafik. Saat pengguna mengarahkan kursor ke titik tersebut, tooltip ditampilkan dengan informasi lebih lanjut.

Diagram sebar Google dirender di dalam browser menggunakan SVG atau VML bergantung pada kemampuan browser.

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([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

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

Mengubah dan menganimasikan bentuk

Secara default, diagram sebar mewakili elemen set data Anda dengan lingkaran. Anda dapat menentukan bentuk lain dengan opsi pointShape, yang dijelaskan dalam dokumentasi Menyesuaikan Titik.

Seperti kebanyakan Google Chart lainnya, Anda dapat menganimasikannya menggunakan peristiwa. Anda dapat menambahkan pemroses peristiwa untuk peristiwa ready pertama dan menggambar ulang diagram setelah melakukan perubahan yang diinginkan. Setelah peristiwa ready pertama, Anda dapat memproses peristiwa animationfinish untuk mengulangi proses, sehingga menghasilkan animasi berkelanjutan. Opsi animation mengontrol cara menggambar ulang terjadi: langsung (tanpa animasi) atau lancar, dan jika lancar, seberapa cepat dan dengan perilaku apa.

Bagian bagus
  var options = {
    legend: 'none',
    colors: ['#087037'],
    pointShape: 'star',
    pointSize: 18,
    animation: {
      duration: 200,
      easing: 'inAndOut',
    }
  };

  // Start the animation by listening to the first 'ready' event.
  google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

  // Control all other animations by listening to the 'animationfinish' event.
  google.visualization.events.addListener(chart, 'animationfinish', randomWalk);
  ...
  function randomWalk() {
    ...
  }
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 = new google.visualization.DataTable();
      data.addColumn('number');
      data.addColumn('number');

      var radius = 100;
      for (var i = 0; i < 6.28; i += 0.1) {
        data.addRow([radius * Math.cos(i), radius * Math.sin(i)]);
      }

      // Our central point, which will jiggle.
      data.addRow([0, 0]);

      var options = {
        legend: 'none',
        colors: ['#087037'],
        pointShape: 'star',
        pointSize: 18,
        animation: {
          duration: 200,
          easing: 'inAndOut',
        }
      };

      var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div'));

      // Start the animation by listening to the first 'ready' event.
      google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

      // Control all other animations by listening to the 'animationfinish' event.
      google.visualization.events.addListener(chart, 'animationfinish', randomWalk);

      chart.draw(data, options);

      function randomWalk() {
        var x = data.getValue(data.getNumberOfRows() - 1, 0);
        var y = data.getValue(data.getNumberOfRows() - 1, 1);
        x += 5 * (Math.random() - 0.5);
        y += 5 * (Math.random() - 0.5);
        if (x * x + y * y > radius * radius) {
          // Out of bounds. Bump toward center.
          x += Math.random() * ((x < 0) ? 5 : -5);
          y += Math.random() * ((y < 0) ? 5 : -5);
        }
        data.setValue(data.getNumberOfRows() - 1, 0, x);
        data.setValue(data.getNumberOfRows() - 1, 1, y);
        chart.draw(data, options);
      }
    }
  </script>
  </head>
  <body>
    <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div>
  </body>
</html>

Membuat diagram sebar Material

Pada tahun 2014, Google mengumumkan pedoman yang ditujukan untuk mendukung tampilan dan nuansa umum di seluruh properti dan aplikasinya (seperti aplikasi Android) yang berjalan di platform Google. Kami menyebut upaya ini sebagai Desain Material. Kami akan menyediakan versi "Material" untuk semua diagram inti; Anda dapat menggunakannya jika ingin tampilannya.

Membuat Material Scatter Chart mirip dengan membuat apa yang sekarang kita sebut Scatter Chart "Klasik". Anda memuat Google Visualization API (meskipun dengan paket 'scatter', bukan paket 'corechart'), menentukan tabel data, lalu membuat objek (tetapi dengan class google.charts.Scatter, bukan google.visualization.ScatterChart).

Catatan: Diagram Material tidak akan berfungsi di Internet Explorer versi lama. (IE8 dan versi sebelumnya tidak mendukung SVG, yang diperlukan Diagram Material.)

Diagram Sebar Material memiliki banyak peningkatan kecil dibandingkan Diagram Sebar Klasik, termasuk opasitas variabel untuk keterbacaan titik yang tumpang tindih, palet warna yang lebih baik, pemformatan label yang lebih jelas, spasi default yang lebih ketat, garis petak dan judul yang lebih lembut (serta penambahan subtitel). 

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

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67], [1, 88], [2, 77],
          [3, 93], [4, 85], [5, 91],
          [6, 71], [7, 78], [8, 93],
          [9, 80], [10, 82],[0, 75],
          [5, 80], [3, 90], [1, 72],
          [5, 75], [6, 68], [7, 98],
          [3, 82], [9, 94], [2, 79],
          [2, 95], [2, 86], [3, 67],
          [4, 60], [2, 80], [6, 92],
          [2, 81], [8, 79], [9, 83],
          [3, 75], [1, 80], [3, 71],
          [3, 89], [4, 92], [5, 85],
          [6, 92], [7, 78], [6, 95],
          [3, 81], [0, 64], [4, 85],
          [2, 83], [3, 96], [4, 77],
          [5, 89], [4, 89], [7, 84],
          [4, 92], [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          hAxis: {title: 'Hours Studied'},
          vAxis: {title: 'Grade'}
        };

        var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

        chart.draw(data, google.charts.Scatter.convertOptions(options));
      }

Diagram Material masih dalam versi beta. Tampilan dan interaktivitas sebagian besar sudah final, tetapi banyak opsi yang tersedia di Diagram Klasik belum tersedia di dalamnya. Anda dapat menemukan daftar opsi yang belum didukung dalam masalah ini.

Selain itu, cara mendeklarasikan opsi belum final, jadi jika menggunakan salah satu opsi klasik, Anda harus mengonversinya menjadi opsi material dengan mengganti baris ini:

chart.draw(data, options);

...dengan baris ini:

chart.draw(data, google.charts.Scatter.convertOptions(options));

Diagram Y ganda

Terkadang, Anda perlu menampilkan dua deret dalam diagram sebar, dengan dua sumbu y yang independen: satu sumbu kiri untuk satu deret, dan sumbu kanan untuk deret lainnya:

Perhatikan bahwa kedua sumbu y tidak hanya diberi label yang berbeda ("Nilai Ujian Akhir" versus "Jam Belajar"), tetapi masing-masing memiliki skala dan garis petak independen. Jika Anda ingin menyesuaikan perilaku ini, gunakan opsi vAxis.gridlines.

Pada kode di bawah, opsi axes dan series bersama-sama menentukan tampilan diagram dual-Y. Opsi series menentukan sumbu yang akan digunakan untuk setiap sumbu ('final grade' dan 'hours studied'; sumbu ini tidak perlu ada kaitannya dengan nama kolom dalam tabel data). Opsi axes kemudian membuat diagram ini menjadi diagram Y ganda, yang menempatkan sumbu 'Final Exam Grade' di sebelah kiri dan sumbu 'Hours Studied' di sebelah kanan. 

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

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Student ID');
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 0, 67],  [1, 1, 88],   [2, 2, 77],
          [3, 3, 93],  [4, 4, 85],   [5, 5, 91],
          [6, 6, 71],  [7, 7, 78],   [8, 8, 93],
          [9, 9, 80],  [10, 10, 82], [11, 0, 75],
          [12, 5, 80], [13, 3, 90],  [14, 1, 72],
          [15, 5, 75], [16, 6, 68],  [17, 7, 98],
          [18, 3, 82], [19, 9, 94],  [20, 2, 79],
          [21, 2, 95], [22, 2, 86],  [23, 3, 67],
          [24, 4, 60], [25, 2, 80],  [26, 6, 92],
          [27, 2, 81], [28, 8, 79],  [29, 9, 83]
        ]);

        var materialOptions = {
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          width: 800,
          height: 500,
          series: {
            0: {axis: 'hours studied'},
            1: {axis: 'final grade'}
          },
          axes: {
            y: {
              'hours studied': {label: 'Hours Studied'},
              'final grade': {label: 'Final Exam Grade'}
            }
          }
        };

        var classicOptions = {
          width: 800,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Students\' Final Grades - based on hours studied',

          vAxes: {
            // Adds titles to each axis.
            0: {title: 'Hours Studied'},
            1: {title: 'Final Exam Grade'}
          }
        };

        function drawMaterialChart() {
          var materialChart = new google.charts.Scatter(chartDiv);
          materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
          var classicChart = new google.visualization.ScatterChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawMaterialChart();
    };

Diagram X teratas

Catatan: Sumbu X atas hanya tersedia untuk diagram Material (yaitu, diagram dengan paket scatter).

Jika Anda ingin menempatkan label dan judul sumbu X di bagian atas diagram, bukan di bawah, Anda dapat melakukannya di diagram Material dengan opsi axes.x: 

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

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67],  [1, 88],  [2, 77],
          [3, 93],  [4, 85],  [5, 91],
          [6, 71],  [7, 78],  [8, 93],
          [9, 80],  [10, 82], [0, 75],
          [5, 80],  [3, 90],  [1, 72],
          [5, 75],  [6, 68],  [7, 98],
          [3, 82],  [9, 94],  [2, 79],
          [2, 95],  [2, 86],  [3, 67],
          [4, 60],  [2, 80],  [6, 92],
          [2, 81],  [8, 79],  [9, 83],
          [3, 75],  [1, 80],  [3, 71],
          [3, 89],  [4, 92],  [5, 85],
          [6, 92],  [7, 78],  [6, 95],
          [3, 81],  [0, 64],  [4, 85],
          [2, 83],  [3, 96],  [4, 77],
          [5, 89],  [4, 89],  [7, 84],
          [4, 92],  [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          axes: {
            x: {
              0: {side: 'top'}
            }
          }
        };

        var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));

        chart.draw(data, google.charts.Scatter.convertOptions(options));
      }

Memuat

Nama paket google.charts.load adalah "corechart", dan nama class visualisasinya adalah google.visualization.ScatterChart. 

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

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

Untuk Diagram Sebar Material, nama paket google.charts.load adalah "scatter", dan nama class visualisasi adalah google.charts.Scatter. 

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

  var visualization = new google.charts.Scatter(container);

Format data

Baris: Setiap baris dalam tabel mewakili sekumpulan titik data dengan nilai sumbu x yang sama.

Kolom:

  Kolom 0 Kolom 1 ... Kolom N
Tujuan: Nilai X titik data Nilai Y seri 1 ... Nilai N Y deret
Jenis Data: string, angka, atau tanggal/tanggal/waktu/waktu string, angka, atau tanggal/tanggal/waktu/waktu ... string, angka, atau tanggal/tanggal/waktu/waktu
Peran: data data ... data
Peran kolom opsional:

None

 ...

Untuk menentukan beberapa deret, tentukan dua kolom sumbu Y atau lebih, dan tentukan nilai Y hanya di satu kolom Y:

Nilai X Nilai Y Seri 1 Nilai Y Seri 2
10 null 75
20 null 18
33 null 22
55 16 null
14 61 null
48 3 null

 

Opsi konfigurasi

Name
aggregationTarget
Cara beberapa pilihan data digabungkan ke dalam tooltip:
  • 'category': Mengelompokkan data yang dipilih berdasarkan nilai x.
  • 'series': Mengelompokkan data yang dipilih menurut deret.
  • 'auto': Mengelompokkan data yang dipilih menurut nilai x jika semua pilihan memiliki nilai x yang sama, dan menurut deret jika tidak.
  • 'none': Hanya menampilkan satu tooltip per pilihan.
aggregationTarget akan sering digunakan bersama dengan selectionMode dan tooltip.trigger, misalnya: 
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
Jenis: string
Default: 'otomatis'
animation.duration

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

Jenis: nomor
Default: 0
animation.easing

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

  • 'linear' - Kecepatan konstan.
  • 'in' - Kemudahan masuk - Mulai dengan lambat lalu percepat.
  • 'out' - Mengurangi - Mulai dengan cepat dan perlahan.
  • 'inAndOut' - Mudah masuk dan keluar - Mulai perlahan, percepat, lalu perlambat.
Jenis: string
Default: 'linear'
animation.startup

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

Jenis: boolean
Default false
annotations.boxStyle

Untuk diagram yang mendukung anotasi, objek annotations.boxStyle mengontrol tampilan kotak di sekitar anotasi: 

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};

Saat ini opsi ini didukung untuk diagram area, batang, kolom, kombinasi, garis, dan sebar. Parameter ini tidak didukung oleh Annotation Chart.

Jenis: objek
Default: null
annotations.datum
Untuk diagram yang mendukung anotasi, objek annotations.datum memungkinkan Anda mengganti pilihan Google Chart untuk anotasi yang disediakan untuk setiap elemen data (seperti nilai yang ditampilkan dengan setiap batang pada diagram batang). Anda dapat mengontrol warna dengan annotations.datum.stem.color, panjang batang dengan annotations.datum.stem.length, dan gaya dengan annotations.datum.style.
Jenis: objek
Default: warnanya "black"; panjangnya adalah 12; gayanya adalah "point".
annotations.domain
Untuk diagram yang mendukung anotasi, objek annotations.domain memungkinkan Anda mengganti pilihan Google Chart untuk anotasi yang disediakan untuk domain (sumbu utama diagram, seperti sumbu X pada diagram garis biasa). Anda dapat mengontrol warna dengan annotations.domain.stem.color, panjang batang dengan annotations.domain.stem.length, dan gaya dengan annotations.domain.style.
Jenis: objek
Default: warnanya "hitam"; panjangnya 5; gayanya adalah "titik".
annotations.highContrast
Untuk diagram yang mendukung anotasi, boolean annotations.highContrast memungkinkan Anda mengganti pilihan warna anotasi Google Chart. Secara default, annotations.highContrast bernilai benar (true), yang menyebabkan Diagram memilih warna anotasi dengan kontras yang baik: warna terang pada latar belakang gelap, dan gelap saat terang. Jika Anda menetapkan annotations.highContrast ke salah (false) dan tidak menentukan warna anotasi Anda sendiri, Google Chart akan menggunakan warna deret default untuk anotasi tersebut:
Jenis: boolean
Default: benar (true)
annotations.stem
Untuk diagram yang mendukung anotasi, objek annotations.stem memungkinkan Anda mengganti pilihan Google Chart untuk gaya batang. Anda dapat mengontrol warna dengan annotations.stem.color dan panjang batang dengan annotations.stem.length. Perhatikan bahwa opsi panjang batang tidak berpengaruh pada anotasi dengan gaya 'line': untuk anotasi data 'line', panjang batang selalu sama dengan teks, dan untuk anotasi domain 'line', batangnya akan meluas ke seluruh diagram.
Jenis: objek
Default: warnanya "black"; panjangnya adalah 5 untuk anotasi domain dan 12 untuk anotasi data.
annotations.style
Untuk diagram yang mendukung anotasi, opsi annotations.style memungkinkan Anda mengganti pilihan jenis anotasi Google Chart. Nilainya dapat berupa 'line' atau 'point'.
Jenis: string
Default: 'point'
annotations.textStyle
Untuk diagram yang mendukung anotasi, objek annotations.textStyle mengontrol tampilan teks anotasi: 
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};

Saat ini opsi ini didukung untuk diagram area, batang, kolom, kombinasi, garis, dan sebar. Nilai ini tidak didukung oleh Diagram Anotasi .

Jenis: objek
Default: null
axisTitlesPosition

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

  • in - Menggambar judul sumbu di dalam area bagan.
  • out - Menggambar judul sumbu di luar area diagram.
  • tidak ada - Menghilangkan judul sumbu.
Jenis: string
Default: 'out'
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'
chart.title

Untuk Diagram Material, opsi ini menentukan judul.

Jenis: string
Default: null
chart.subtitle

Untuk Diagram Material, opsi ini menentukan subtitel. Hanya Diagram Material yang mendukung subtitel.

Jenis: string
Default: null
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
garis bidik

Objek yang berisi properti crosshair untuk diagram.

Jenis: objek
Default: null
crosshair.color

Warna garis bidik, dinyatakan sebagai nama warna (mis., "blue") atau nilai RGB (misalnya, "#adf").

Jenis: string
Jenis: default
crosshair.focused

Objek yang berisi properti garis bidik saat fokus.
Contoh: crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

Jenis: objek
Default: default
crosshair.opacity

Opasitas crosshair, dengan 0.0 sepenuhnya transparan dan 1.0 sepenuhnya buram.

Jenis: nomor
Default: 1,0
crosshair.orientation

Orientasi garis bidik, yang bisa 'vertikal' untuk rambut vertikal saja, 'horizontal' hanya untuk rambut horizontal, atau 'keduanya' untuk garis bidik tradisional.

Jenis: string
Default: 'keduanya'
crosshair.selected

Objek yang berisi properti garis bidik saat pemilihan.
Contoh: crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

Jenis: objek
Default: default
crosshair.trigger

Kapan menampilkan garis bidik: pada 'focus', 'selection', atau 'both'.

Jenis: string
Default: 'keduanya'
curveType

Mengontrol kurva garis jika lebar garis bukan nol. Dapat berupa salah satu dari hal berikut:

  • 'none' - Garis lurus tanpa kurva.
  • 'function' - Sudut garis akan dihaluskan.
Jenis:string
Default: 'none'
dataOpacity

Transparansi titik data, dengan 1,0 adalah benar-benar buram dan 0,0 sepenuhnya transparan. Dalam diagram sebar, histogram, batang, dan kolom, ini mengacu pada data yang terlihat: titik di diagram sebar dan persegi panjang di diagram lain. Dalam diagram dengan pemilihan data yang membuat titik, seperti diagram garis dan area, hal ini mengacu pada lingkaran yang muncul saat mengarahkan kursor atau memilih. Diagram kombinasi menunjukkan kedua perilaku tersebut, dan opsi ini tidak berpengaruh pada diagram lainnya. (Untuk mengubah opasitas garis tren, lihat opasitas garis tren .)

Jenis: nomor
Default: 1,0
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)
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 kontinu (seperti angka atau tanggal).

Jenis: objek
Default: null
explorer.actions

Penjelajah Google Chart mendukung tiga tindakan:

  • dragToPan: Tarik untuk menggeser di sekitar diagram secara horizontal dan vertikal. Untuk menggeser hanya di sepanjang sumbu horizontal, gunakan explorer: { axis: 'horizontal' }. Begitu pula untuk sumbu vertikal.
  • dragToZoom: Perilaku default penjelajah adalah memperbesar dan memperkecil saat pengguna men-scroll. Jika explorer: { actions: ['dragToZoom', 'rightClickToReset'] } digunakan, tarik area persegi panjang untuk 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 mengembalikannya ke tingkat geser dan zoom asal.
Jenis: Array string
Default: ['dragToPan', 'rightClickToReset']
explorer.axis

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

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

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

Jenis: boolean
Default: false
explorer.maxZoomIn

Jumlah maksimum yang dapat diperbesar oleh penjelajah. Secara default, pengguna dapat memperbesar secukupnya sehingga mereka hanya melihat 25% tampilan aslinya. Dengan menetapkan explorer: { maxZoomIn: .5 }, pengguna akan dapat memperbesar hanya secukupnya untuk melihat setengah tampilan aslinya.

Jenis: nomor
Default: 0,25
explorer.maxZoomOut

Batas maksimum yang dapat diperkecil oleh penjelajah. Secara default, pengguna dapat memperkecil tampilan hingga diagram hanya 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 ruang yang tersedia.

Jenis: nomor
Default: 4
explorer.zoomDelta

Saat pengguna memperbesar atau memperkecil, explorer.zoomDelta akan menentukan seberapa besar pengguna dapat memperbesar atau memperkecil. Semakin kecil angkanya, semakin halus dan lambat zoomnya.

Jenis: nomor
Default: 1,5
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
hAxis

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'
  }
}
Jenis: objek
Default: null
hAxis.baseline

Garis dasar untuk sumbu horizontal.

Jenis: nomor
Default: otomatis
hAxis.baselineColor

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

Jenis: nomor
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 berikut ini:

  • {format: 'none'}: menampilkan angka tanpa format (misalnya, 8.000.000)
  • {format: 'decimal'}: menampilkan angka dengan pemisah ribuan (misalnya, 8.000.000)
  • {format: 'scientific'}: menampilkan angka dalam notasi ilmiah (mis., 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 singkatan angka (misalnya, 8 jt)
  • {format: 'long'}: menampilkan angka sebagai kata lengkap (mis., 8 juta)

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

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

Jenis: string
Default: otomatis
hAxis.gridlines

Objek dengan properti untuk mengonfigurasi garis petak pada sumbu horizontal. Perhatikan bahwa garis petak 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}
Jenis: objek
Default: null
hAxis.gridlines.color

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

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

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

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

Mengganti format default untuk berbagai aspek jenis data tanggal/tanggal/waktu saat digunakan dengan garis petak 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.

Jenis: objek
Default: null
hAxis.minorGridlines

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

Jenis: objek
Default: null
hAxis.minorGridlines.color

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

Jenis: string
Default: Kombinasi warna garis petak dan latar belakang
hAxis.minorGridlines.count

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

Jenis: nomor
Default:1
hAxis.minorGridlines.units

Mengganti format default untuk berbagai aspek jenis data tanggal/tanggal/waktu/waktu jika digunakan dengan garis minorGrid yang dihitung pada 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.

Jenis: objek
Default: null
hAxis.logScale

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

Jenis: boolean
Default: false
hAxis.scaleType

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

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

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

Jenis: string
Default: 'out'
hAxis.textStyle

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

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

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

ViewWindow akan otomatis diperluas untuk menyertakan tick min dan maks 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 menetapkan 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.

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

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

Jenis: nomor
Default: otomatis
hAxis.minValue

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

Jenis: nomor
Default: otomatis
hAxis.viewWindowMode

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

  • 'pretty' - Menskalakan 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 petak minor terdekat untuk tanggal dan waktu.
  • 'maximized' - Menskalakan nilai horizontal sehingga nilai data maksimum dan minimum menyentuh sisi kiri dan kanan area diagram. Hal ini akan menyebabkan haxis.viewWindow.min dan haxis.viewWindow.max diabaikan.
  • 'eksplisit' - Opsi yang tidak digunakan lagi untuk menentukan nilai skala kiri dan kanan 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.

Jenis: objek
Default: null
hAxis.viewWindow.max

Nilai data horizontal maksimum yang akan dirender.

Diabaikan jika hAxis.viewWindowMode bersifat 'cantik' atau 'dimaksimalkan'.

Jenis: nomor
Default: otomatis
hAxis.viewWindow.min

Nilai data horizontal minimum yang akan dirender.

Diabaikan jika hAxis.viewWindowMode bersifat 'cantik' atau 'dimaksimalkan'.

Jenis: nomor
Default: otomatis
tinggi

Tinggi diagram, dalam piksel.

Jenis: nomor
Default: tinggi elemen yang memuatnya
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.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.pageIndex

Indeks halaman legenda awal yang dipilih berdasarkan nol.

Jenis: nomor
Default: 0
legend.position

Posisi legenda. Dapat berupa salah satu dari hal berikut:

  • 'bottom' - Di bawah diagram.
  • 'left' - Di sebelah kiri diagram, asalkan sumbu kiri tidak memiliki deret yang terkait dengannya. Jadi, jika Anda ingin legenda di sebelah kiri, gunakan opsi targetAxisIndex: 1.
  • 'in' - Di dalam diagram, di sudut kiri atas.
  • 'none' - Tidak ada legenda yang ditampilkan.
  • 'right' - Di sebelah kanan diagram. Tidak kompatibel dengan opsi vAxes.
  • 'top' - Di atas diagram.
Jenis: string
Default: 'right'
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>}
lineWidth

Lebar garis dalam piksel. Gunakan nol untuk menyembunyikan semua garis dan hanya menampilkan titik.

Jenis: nomor
Default: 0
orientasi

Orientasi diagram. Jika ditetapkan ke 'vertical', memutar sumbu diagram sehingga (misalnya) diagram kolom menjadi diagram batang, dan diagram area berkembang ke kanan, bukan ke atas:

Jenis: string
Default: 'horizontal'
pointShape

Bentuk elemen data individual: 'lingkaran', 'segitiga', 'persegi', 'belah ketupat', 'bintang', atau 'poligon'. Lihat dokumentasi poin untuk mengetahui contohnya.

Jenis: string
Default: 'lingkaran'
pointSize

Diameter titik data, dalam piksel. Gunakan nol untuk menyembunyikan semua titik. Anda dapat mengganti nilai untuk setiap deret menggunakan properti series. Jika Anda menggunakan garis tren, opsi ini juga akan memengaruhi pointSize titik yang menyusunnya, yang akan mengubah lebar garis tren yang tampak. Untuk menghindari hal ini, Anda dapat menggantinya dengan opsi trendlines.n.pointsize.

Jenis: nomor
Default: 7
pointsVisible

Menentukan apakah titik akan ditampilkan. Tetapkan ke false untuk menyembunyikan semua titik. Anda dapat mengganti nilai untuk setiap seri menggunakan properti series. Jika Anda menggunakan garis tren, opsi pointsVisible akan memengaruhi visibilitas titik di semua garis tren, kecuali Anda menggantinya dengan opsi trendlines.n.pointsVisible.

Hal ini juga dapat diganti menggunakan peran gaya dalam bentuk "point {visible: true}".

Jenis: boolean
Default: benar (true)
selectionMode

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

Jenis: string
Default: 'tunggal'
series

Array objek, masing-masing menjelaskan format deret yang sesuai dalam diagram. Untuk menggunakan nilai default rangkaian, tetapkan objek kosong {}. Jika rangkaian atau nilai tidak ditetapkan, nilai global yang akan digunakan. Setiap objek mendukung properti berikut:

  • color - Warna yang akan digunakan untuk deret ini. Tentukan string warna HTML yang valid.
  • labelInLegend - Deskripsi deret yang akan muncul di legenda diagram.
  • lineWidth - Mengganti nilai lineWidth global untuk rangkaian ini.
  • pointShape - Mengganti nilai pointShape global untuk rangkaian ini.
  • pointSize - Mengganti nilai pointSize global untuk rangkaian ini.
  • pointsVisible - Mengganti nilai pointsVisible global untuk rangkaian ini.
  • visibleInLegend - Nilai boolean, jika benar (true) berarti deret harus memiliki entri legenda, dan salah (false) berarti tidak boleh. Defaultnya adalah true (benar).

Anda dapat menentukan array objek, yang masing-masing berlaku untuk deret dalam urutan yang ditentukan, atau Anda dapat menentukan objek yang setiap turunan memiliki kunci numerik yang menunjukkan ke deret mana hal tersebut diterapkan. Misalnya, dua deklarasi berikut identik, dan deklarasikan deret pertama sebagai hitam dan tidak ada di legenda, sedangkan yang keempat sebagai merah dan tidak ada di legenda: 

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
Jenis: Array objek atau objek dengan objek bertingkat
Default: {}
tema

Tema adalah sekumpulan nilai opsi yang telah ditentukan yang bekerja sama untuk mencapai perilaku diagram atau efek visual tertentu. Saat ini hanya satu tema yang tersedia:

  • 'maximized' - Memaksimalkan area diagram, dan menggambar legenda serta 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
title

Teks yang akan ditampilkan di atas diagram.

Jenis: string
Default: tanpa judul
titlePosition

Lokasi untuk menempatkan judul bagan, dibandingkan dengan area bagan. Nilai yang didukung:

  • in - Menggambar judul di dalam area bagan.
  • out - Menggambar judul di luar area bagan.
  • tidak ada - Hapus judul.
Jenis: string
Default: 'out'
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 serial dalam tooltip.

Jenis: boolean
Default: false
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'
garis tren

Menampilkan garis tren pada diagram yang mendukungnya. Secara default, garis tren linear digunakan, tetapi dapat disesuaikan dengan opsi trendlines.n.type.

Garis tren ditentukan per seri, sehingga biasanya opsi Anda akan terlihat seperti ini: 

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
Jenis: objek
Default: null
trendlines.n.color

Warna garis tren , yang dinyatakan sebagai nama warna bahasa Inggris atau string heksadesimal.

Jenis: string
Default: warna seri default
trendlines.n.degree

Untuk garis tren type: 'polynomial', derajat polinomial (2 untuk kuadrat, 3 untuk kubik, dan seterusnya). (Tingkat default dapat berubah dari 3 menjadi 2 dalam rilis Google Chart mendatang.)

Jenis: nomor
Default: 3
trendlines.n.labelInLegend

Jika ditetapkan, garis tren akan muncul di legenda sebagai string ini.

Jenis: string
Default: null
trendlines.n.lineWidth

Lebar garis garis tren , dalam piksel.

Jenis: nomor
Default: 2
trendlines.n.opacity

Transparansi garis tren , dari 0.0 (transparan) hingga 1,0 (buram).

Jenis: nomor
Default: 1,0
trendlines.n.pointSize

Garis tren disusun dengan memberi stempel pada banyak titik pada diagram; opsi yang jarang diperlukan ini memungkinkan Anda menyesuaikan ukuran titik. Opsi lineWidth garis tren biasanya akan lebih baik. Namun, Anda memerlukan opsi ini jika menggunakan opsi pointSize global dan menginginkan ukuran titik yang berbeda untuk garis tren.

Jenis: nomor
Default: 1
trendlines.n.pointsVisible

Garis tren disusun dengan memberi stempel pada sekelompok titik pada diagram. Opsi pointsVisible garis tren menentukan apakah titik untuk garis tren tertentu terlihat.

Jenis: boolean
Default: benar (true)
trendlines.n.showR2

Apakah akan menampilkan koefisien determinasi dalam tooltip legenda atau garis tren.

Jenis: boolean
Default: false
trendlines.n.type

Apakah garis tren adalah 'linear' (default), 'exponential', atau 'polynomial'.

Jenis: string
Default: linear
trendlines.n.visibleInLegend

Apakah persamaan garis tren muncul di legenda. (Ini akan muncul di tooltip garis tren.)

Jenis: boolean
Default: false
vAxis

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'}}
Jenis: objek
Default: null
vAxis.baseline

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

Jenis: nomor
Default: otomatis
vAxis.baselineColor

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

Jenis: nomor
Default: 'hitam'
vAxis.direction

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

Jenis: 1 atau -1
Default: 1
vAxis.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 berikut ini:

  • {format: 'none'}: menampilkan angka tanpa format (misalnya, 8.000.000)
  • {format: 'decimal'}: menampilkan angka dengan pemisah ribuan (misalnya, 8.000.000)
  • {format: 'scientific'}: menampilkan angka dalam notasi ilmiah (mis., 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 singkatan angka (misalnya, 8 jt)
  • {format: 'long'}: menampilkan angka sebagai kata lengkap (mis., 8 juta)

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

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

Jenis: string
Default: otomatis
vAxis.gridlines

Objek dengan anggota untuk mengonfigurasi garis petak pada sumbu vertikal. Perhatikan bahwa garis petak 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}
Jenis: objek
Default: null
vAxis.gridlines.color

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

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

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

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

Mengganti format default untuk berbagai aspek jenis data tanggal/tanggal/waktu saat digunakan dengan garis petak 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.

Jenis: objek
Default: null
vAxis.minorGridlines

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

Jenis: objek
Default: null
vAxis.minorGridlines.color

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

Jenis: string
Default: Kombinasi warna garis petak dan latar belakang
vAxis.minorGridlines.count

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

Jenis: nomor
Default: 1
vAxis.minorGridlines.units

Mengganti format default untuk berbagai aspek jenis data tanggal/tanggal/waktu/waktu jika digunakan dengan garis minorGrid yang dihitung pada 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.

Jenis: objek
Default: null
vAxis.logScale

Jika true (benar), menjadikan sumbu vertikal sebagai skala logaritmik. Catatan: Semua nilai harus positif.

Jenis: boolean
Default: false
vAxis.scaleType

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

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

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

Jenis: string
Default: 'out'
vAxis.textStyle

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

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

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

ViewWindow akan otomatis diperluas untuk menyertakan tick min dan maks 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.

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

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

Jenis: nomor
Default: otomatis
vAxis.minValue

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

Jenis: nomor
Default: null
vAxis.viewWindowMode

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

  • 'pretty' - Menskalakan 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 petak minor terdekat untuk tanggal dan waktu.
  • 'maximized' - 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 ini 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.

Jenis: objek
Default: null
vAxis.viewWindow.max

Nilai data vertikal maksimum yang akan dirender.

Diabaikan jika vAxis.viewWindowMode bersifat 'cantik' atau 'dimaksimalkan'.

Jenis: nomor
Default: otomatis
vAxis.viewWindow.min

Nilai data vertikal minimum yang akan dirender.

Diabaikan jika vAxis.viewWindowMode bersifat 'cantik' atau 'dimaksimalkan'.

Jenis: nomor
Default: otomatis
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 titik dan entri legenda. Titik sesuai dengan sel dalam tabel data, dan entri legenda ke kolom (indeks baris null). 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 titik dan entri legenda. Titik sesuai dengan sel dalam tabel data, dan entri legenda ke kolom (indeks baris null). Untuk diagram ini, hanya satu entitas yang dapat dipilih pada satu waktu. Extended description

Jenis Pengembalian: tidak ada
clearChart()

Mengosongkan diagram, dan melepaskan semua resource yang dialokasikan.

Jenis Pengembalian: tidak ada

Acara

Untuk informasi selengkapnya tentang cara menggunakan peristiwa ini, lihat Interaktivitas Dasar, Menangani Peristiwa, dan Mengaktifkan Peristiwa.

Name
animationfinish

Diaktifkan saat animasi transisi selesai.

Properti: tidak ada
click

Diaktifkan saat pengguna mengklik di dalam diagram. Dapat digunakan untuk mengidentifikasi kapan judul, elemen data, entri legenda, sumbu, garis petak, atau label diklik.

Properti: targetID
error

Diaktifkan saat terjadi error saat mencoba merender diagram.

Properties: id, pesan
legendpagination

Diaktifkan saat pengguna mengklik panah penomoran halaman legenda. Meneruskan kembali indeks halaman berbasis nol pada legenda saat ini dan jumlah total halaman.

Properti: currentPageIndex, totalPages
onmouseover

Diaktifkan saat pengguna mengarahkan mouse ke entitas visual. Meneruskan kembali indeks baris dan kolom dari elemen tabel data yang sesuai.

Properti: baris, kolom
onmouseout

Diaktifkan saat pengguna menjauhi entity visual. Meneruskan kembali indeks baris dan kolom dari elemen tabel data yang sesuai.

Properti: baris, kolom
ready

Diagram siap untuk panggilan metode eksternal. Jika ingin berinteraksi dengan diagram, dan memanggil metode setelah menggambarnya, Anda harus menyiapkan pemroses untuk peristiwa ini sebelum memanggil metode draw, dan memanggilnya hanya setelah peristiwa diaktifkan.

Properti: tidak ada
select

Diaktifkan saat pengguna mengklik entitas visual. Untuk mempelajari apa yang telah dipilih, panggil getSelection().

Properti: tidak ada

Kebijakan data

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