Visualisasi: Diagram Kolom

Ringkasan

Diagram kolom adalah diagram batang vertikal yang dirender di browser menggunakan SVG atau VML, mana saja yang sesuai untuk browser pengguna. Seperti semua diagram Google, diagram kolom menampilkan tooltip saat pengguna mengarahkan kursor ke data. Untuk versi horizontal diagram ini, lihat diagram batang.

Contoh

Kolom mewarnai

Mari kita gambar kepadatan empat logam mulia:

Di atas, semua warna adalah biru default. Ini karena semuanya merupakan bagian dari rangkaian yang sama; jika ada rangkaian kedua, seri akan diberi warna merah. Kita dapat menyesuaikan warna ini dengan peran gaya:

Ada tiga cara untuk memilih warna, dan tabel data kami menampilkan semuanya: nilai RGB, nama warna dalam bahasa Inggris, dan deklarasi seperti CSS:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],

       ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

Gaya kolom

Peran gaya memungkinkan Anda mengontrol beberapa aspek tampilan kolom dengan deklarasi seperti CSS:

  • color
  • opacity
  • fill-color
  • fill-opacity
  • stroke-color
  • stroke-opacity
  • stroke-width

Sebaiknya jangan mencampur gaya terlalu bebas di dalam diagram—pilih gaya dan pertahankan gayanya—tetapi untuk menunjukkan semua atribut gaya, berikut adalah sampel:

Dua kolom pertama masing-masing menggunakan color tertentu (kolom pertama dengan nama bahasa Inggris, kolom kedua dengan nilai RGB). Tidak ada opacity yang dipilih, sehingga default 1.0 (sepenuhnya tidak tembus pandang) digunakan; itulah sebabnya kolom kedua mengaburkan garis kisi di belakangnya. Di kolom ketiga, opacity 0,2 digunakan, untuk menampilkan garis kisi. Pada yang keempat, tiga atribut gaya digunakan: stroke-color dan stroke-width untuk menggambar batas, dan fill-color untuk menentukan warna persegi panjang di dalamnya. Kolom paling kanan juga menggunakan stroke-opacity dan fill-opacity untuk memilih opasitas batas dan pengisian:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Memberi label pada kolom

Diagram memiliki beberapa jenis label, seperti label centang, label legenda, dan label di tooltip. Di bagian ini, kita akan melihat cara menempatkan label di dalam (atau di dekat) kolom dalam diagram kolom.

Misalnya, kita ingin menganotasi setiap kolom dengan simbol kimia yang sesuai. Kita dapat melakukannya dengan peran annotation:

Dalam tabel data, kita menentukan kolom baru dengan { role: 'annotation' } untuk menyimpan label kolom kita:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Meskipun pengguna dapat mengarahkan kursor ke kolom untuk melihat nilai data, Anda dapat menyertakannya pada kolom itu sendiri:

Ini sedikit lebih rumit daripada yang seharusnya, karena kita membuat DataView untuk menentukan anotasi untuk setiap kolom.

  <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([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>

Jika ingin memformat nilai secara berbeda, kita dapat menentukan pemformat dan menggabungkannya ke dalam fungsi seperti ini:

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

Kemudian, kita dapat memanggilnya dengan calc: getValueAt.bind(undefined, 1).

Jika label terlalu besar untuk sepenuhnya dimasukkan ke dalam kolom, label akan ditampilkan di luar:

Diagram kolom bertumpuk

Diagram kolom bertumpuk adalah diagram kolom yang menempatkan nilai terkait di atas satu sama lain. Jika ada nilai negatif, nilai tersebut akan ditumpuk dalam urutan terbalik di bawah garis dasar diagram. Fungsi ini biasanya digunakan saat suatu kategori terbagi secara alami menjadi komponen. Misalnya, pertimbangkan beberapa penjualan buku fiktif, dibagi berdasarkan genre, dan dibandingkan dari waktu ke waktu:

Anda membuat diagram kolom bertumpuk dengan menetapkan opsi isStacked ke true:

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true,
      };

Diagram kolom bertumpuk juga mendukung penumpukan 100%, dan tumpukan elemen pada setiap nilai domain diskalakan ulang sehingga berjumlah hingga 100%. Opsi untuk ini adalah isStacked: 'percent', yang memformat setiap nilai sebagai persentase 100%, dan isStacked: 'relative', yang memformat setiap nilai sebagai pecahan 1. Ada juga opsi isStacked: 'absolute', yang secara fungsional setara dengan isStacked: true.

Perhatikan bahwa pada diagram tumpuk 100% di sebelah kanan, nilai centang didasarkan pada skala 0-1 relatif sebagai pecahan 1, tetapi nilai sumbu ditampilkan sebagai persentase. Ini karena tick sumbu persentase adalah hasil penerapan format "#.##%" ke nilai skala 0-1 relatif. Saat menggunakan isStacked: 'percent', pastikan untuk menentukan nilai tick/sumbu apa pun menggunakan skala relatif 0-1.

Menumpuk
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {minValue: 0}
        };
    
100% Ditumpuk
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

Membuat diagram kolom Material

Pada tahun 2014, Google mengumumkan pedoman yang dimaksudkan untuk mendukung tampilan dan nuansa yang sama di seluruh properti dan aplikasinya (seperti aplikasi Android) yang berjalan di platform Google. Kami menyebutnya upaya Desain Material. Kami akan menyediakan versi "Material" dari semua diagram inti kami; Anda dapat menggunakannya jika Anda menyukai tampilannya.

Membuat Diagram Kolom Material mirip dengan membuat diagram yang sekarang kita sebut Diagram Kolom "Klasik". Anda memuat Google Visualization API (meskipun dengan paket 'bar', bukan paket 'corechart'), tentukan tabel data, lalu buat objek (tetapi bukan class google.charts.Bar, bukan google.visualization.ColumnChart).

Karena diagram batang dan diagram kolom pada dasarnya identik, tetapi untuk orientasi, kami memanggil kedua Diagram Batang Material, terlepas dari apakah batang tersebut vertikal (klasik, diagram kolom) atau horizontal (diagram batang). Di Material, satu-satunya perbedaan adalah opsi bars. Jika ditetapkan ke 'horizontal', orientasi akan menyerupai Diagram Batang Klasik tradisional; jika tidak, batang akan berbentuk vertikal.

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

Diagram Kolom Material memiliki banyak peningkatan kecil dibandingkan Diagram Kolom Klasik, termasuk palet warna yang lebih baik, sudut membulat, format label yang lebih jelas, jarak default yang lebih sempit antar-seri, garis petak dan judul yang lebih lembut (serta penambahan subtitel).

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>
  </body>
</html>

Diagram Material tersedia dalam versi beta. Tampilan dan interaktivitas sebagian besar bersifat 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 deklarasi opsi belum final. Jadi, jika Anda menggunakan salah satu opsi klasik, Anda harus mengonversinya ke opsi material dengan mengganti baris ini:

chart.draw(data, options);

...dengan ini:

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

Penggunaan google.charts.Bar.convertOptions() memungkinkan Anda memanfaatkan fitur-fitur tertentu, seperti opsi preset hAxis/vAxis.format.

Diagram ganda Y

Terkadang, Anda mungkin ingin menampilkan dua seri dalam diagram kolom, dengan dua sumbu Y independen: sumbu kiri untuk satu rangkaian, dan sumbu kanan untuk seri lainnya:

Perlu diperhatikan bahwa dua sumbu y tidak hanya diberi label secara berbeda ("parsec" versus "magnitudo semu"), tetapi masing-masing memiliki skala dan garis petaknya sendiri. Jika Anda ingin menyesuaikan perilaku ini, gunakan opsi vAxis.gridlines.

Pada kode di bawah, opsi axes dan series bersama-sama menentukan tampilan Y ganda di diagram. Opsi series menentukan sumbu yang akan digunakan untuk masing-masing ('distance' dan 'brightness'; keduanya tidak harus ada hubungannya dengan nama kolom di data). Opsi axes kemudian membuat diagram ini menjadi diagram Y ganda, yang menempatkan sumbu 'distance' di sebelah kiri (berlabel "parsecs") dan sumbu 'brightness' di sebelah kanan (diberi label "besarnya terlihat").

<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', 'bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

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

        var data = google.visualization.arrayToDataTable([
          ['Galaxy', 'Distance', 'Brightness'],
          ['Canis Major Dwarf', 8000, 23.3],
          ['Sagittarius Dwarf', 24000, 4.5],
          ['Ursa Major II Dwarf', 30000, 14.3],
          ['Lg. Magellanic Cloud', 50000, 0.9],
          ['Bootes I', 60000, 13.1]
        ]);

        var materialOptions = {
          width: 900,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            y: {
              distance: {label: 'parsecs'}, // Left y-axis.
              brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis.
            }
          }
        };

        var classicOptions = {
          width: 900,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Nearby galaxies - distance on the left, brightness on the right',
          vAxes: {
            // Adds titles to each axis.
            0: {title: 'parsecs'},
            1: {title: 'apparent magnitude'}
          }
        };

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

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

        drawMaterialChart();
    };
    </script>
  </head>
  <body>
    <button id="change-chart">Change to Classic</button>
    <br><br>
    <div id="chart_div" style="width: 800px; height: 500px;"></div>
  </body>
</html>

Diagram Teratas

Catatan: Sumbu Top-X hanya tersedia untuk Diagram material (yaitu yang memiliki paket bar).

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

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

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);

        var options = {
          width: 800,
          legend: { position: 'none' },
          chart: {
            title: 'Chess opening moves',
            subtitle: 'popularity by percentage' },
          axes: {
            x: {
              0: { side: 'top', label: 'White to move'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        // Convert the Classic options to Material options.
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };
    </script>
  </head>
  <body>
    <div id="top_x_div" style="width: 800px; height: 600px;"></div>
  </body>
</html>

Memuat

Nama paket google.charts.load adalah "corechart". Nama class visualisasinya adalah google.visualization.ColumnChart.

  google.charts.load("current", {packages: ["corechart"]});
  var visualization = new google.visualization.ColumnChart(container);

Untuk Diagram Kolom Material, nama paket google.charts.load adalah "bar". (Bukan kesalahan ketik: Diagram Batang Material menangani kedua orientasi.) Nama class visualisasinya adalah google.charts.Bar. (Bukan kesalahan ketik: Diagram Batang Material menangani kedua orientasi.)

  google.charts.load("current", {packages: ["bar"]});
  var chart = new google.charts.Bar(container);

Format data

Setiap baris dalam tabel mewakili grup batang yang berdekatan.

Baris: Setiap baris dalam tabel mewakili grup batang.

Kolom:

  Kolom 0 Kolom 1 ... Kolom N
Tujuan: Nilai batang 1 dalam grup ini ... Nilai N batang di grup ini
Jenis Data: angka ... angka
Peran: domain data ... data
Peran kolom opsional: ...

 

Opsi konfigurasi

Name
animasi.durasi

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

Jenis: angka
Default: 0
animasi.easing

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

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

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

Jenis: boolean
Default false
anotasi.selaluDi Luar

Dalam diagram Batang dan Kolom, jika ditetapkan ke true, akan menarik semua anotasi di luar Kolom/Kolom.

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

Opsi ini saat ini didukung untuk diagram area, batang, kolom, kombinasi, garis, dan sebar. Ini tidak didukung oleh Diagram Anotasi.

Objek Type:
Default: null
anotasi.datum
Untuk diagram yang mendukung anotasi, objek annotations.datum memungkinkan Anda mengganti pilihan Google Chart untuk anotasi yang disediakan untuk elemen data individual (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.
Objek Type:
Default: warna "black"; panjangnya 12; gaya adalah "point".
anotasi.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 standar). Anda dapat mengontrol warna dengan annotations.domain.stem.color, panjang batang dengan annotations.domain.stem.length, dan gaya dengan annotations.domain.style.
Objek Type:
Default: warna "hitam"; panjangnya 5; gaya adalah "titik".
anotasi.highContrast
Untuk diagram yang mendukung anotasi, boolean annotations.highContrast memungkinkan Anda mengganti pilihan warna anotasi di Google Chart. Secara default, annotations.highContrast disetel ke benar (true), yang menyebabkan Diagram memilih warna anotasi dengan kontras yang baik: warna terang pada latar belakang gelap, dan gelap pada terang. Jika Anda menyetel annotations.highContrast ke false dan tidak menentukan warna anotasi Anda sendiri, Google Chart akan menggunakan warna seri default untuk anotasi tersebut:
Jenis: boolean
Default: true (benar):
anotasi.stem
Untuk diagram yang mendukung anotasi, objek annotations.stem memungkinkan Anda mengganti pilihan Google Chart untuk gaya stem. Anda dapat mengontrol warna dengan annotations.stem.color dan panjang batang dengan annotations.stem.length. Perhatikan bahwa opsi panjang stem tidak berpengaruh pada anotasi dengan gaya 'line': untuk anotasi datum 'line', panjang stem selalu sama dengan teks, dan untuk anotasi domain 'line', stem memanjang di seluruh diagram.
Objek Type:
Default: warna "black"; panjangnya adalah 5 untuk anotasi domain dan 12 untuk anotasi datum.
anotasi.gaya
Untuk diagram yang mendukung anotasi, opsi annotations.style memungkinkan Anda mengganti pilihan jenis anotasi di Google Chart. Ini dapat berupa 'line' atau 'point'.
Jenis: string
Default: 'point'
annotation.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
    }
  }
};
    

Opsi ini saat ini didukung untuk diagram area, batang, kolom, kombinasi, garis, dan sebar. Ini tidak didukung oleh Diagram Anotasi .

Objek Type:
Default: null
axeTitlesPosition

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

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

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

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

Warna garis batas diagram, sebagai string warna HTML.

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

Lebar pembatas, dalam piksel.

Jenis: angka
Default: 0
backgroundColor.fill

Warna pengisi diagram, sebagai string warna HTML.

Jenis: string
Default: 'putih'
lebar bar.grup
Lebar grup batang, yang ditentukan dalam salah satu format berikut:
  • Piksel (mis. 50).
  • Persentase lebar yang tersedia untuk setiap grup (misalnya, '20%'), dengan '100%' berarti grup tidak memiliki spasi di antara grup tersebut.
Jenis: angka atau string
Default: Rasio emas, sekitar '61,8%'.
bar

Apakah batang dalam Bahan Bagan Batang vertikal atau horizontal. Opsi ini tidak berpengaruh pada Diagram Batang Klasik atau Diagram Kolom Klasik.

Jenis: 'horizontal' atau 'vertical'
Default: 'vertikal'
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
subjudul.diagram

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

Jenis: string
Default: null
chart.title

Untuk Diagram Material, opsi ini menentukan judul.

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

Transparansi titik data, dengan 1,0 menjadi sepenuhnya buram dan 0,0 sepenuhnya transparan. Di diagram sebar, histogram, batang, dan kolom, data ini mengacu pada data yang terlihat: titik di diagram sebar dan persegi panjang di diagram lainnya. Dalam diagram dengan memilih data akan menghasilkan titik, seperti diagram garis dan area, ini merujuk pada lingkaran yang muncul saat kursor diarahkan atau dipilih. Diagram kombinasi menunjukkan kedua perilaku tersebut, dan opsi ini tidak berpengaruh pada diagram lainnya. (Untuk mengubah opasitas garis tren, lihat Opasitas garis tren .)

Jenis: angka
Default: 1.0
aktifkanInteraktivitas

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

Jenis: boolean
Default: true (benar):
explorer

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

Fitur ini bersifat eksperimental dan dapat berubah dalam rilis mendatang.

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

Objek Type:
Default: null
explorer.actions

Penjelajah Google Chart mendukung tiga tindakan:

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

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

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

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

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

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

Jenis: angka
Default: 0,25
explorer.maxZoomOut

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

Jenis: angka
Default: 4
explorer.zoomDelta

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

Jenis: angka
Default: 1,5
targetTarget

Jenis entitas yang menerima fokus saat kursor diarahkan ke kursor. Juga memengaruhi entity mana yang dipilih oleh klik mouse, dan elemen tabel data mana yang terkait dengan peristiwa. Dapat berupa salah satu dari hal berikut:

  • 'datum' - Fokus pada satu titik data. Korelasi dengan sel dalam tabel data.
  • 'category' - Memfokuskan pada pengelompokan semua titik data di sepanjang sumbu utama. Berkaitan dengan baris di tabel data.

Dalam FocusTarget 'category', tooltip menampilkan semua nilai kategori. Tindakan ini mungkin berguna untuk membandingkan nilai rangkaian yang berbeda.

Jenis: string
Default: 'datum'
ukuranFont

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

Jenis: angka
Default: otomatis
NamaFont

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

Jenis: string
Default: 'chromebook'
forceIFrame

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

Jenis: boolean
Default: false (salah)
Sumbu h

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

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

Garis dasar untuk sumbu horizontal.

Opsi ini hanya didukung untuk sumbu continuous.

Jenis: angka
Default: otomatis
hAxis.baselineColor

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

Opsi ini hanya didukung untuk sumbu continuous.

Jenis: angka
Default: 'hitam'
hAxis.direction

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

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

String format untuk label sumbu tanggal atau numerik.

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

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

Untuk label sumbu tanggal, ini adalah subset dari pemformatan tanggal kumpulan pola ICU. Misalnya, {format:'MMM d, y'} akan menampilkan nilai "1 Juli 2011" untuk tanggal Juli pertama kali pada tahun 2011.

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

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

Opsi ini hanya didukung untuk sumbu continuous.

Jenis: string
Default: otomatis
hAxis.gridline

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

{color: '#333', minSpacing: 20}

Opsi ini hanya didukung untuk sumbu continuous.

Objek Type:
Default: null
hAxis.gridlines.color

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

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

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

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

Array ukuran (sebagai nilai data, bukan piksel) antar-garis petak yang berdekatan. Saat ini, opsi tersebut hanya untuk sumbu numerik, tetapi setara dengan opsi gridlines.units.<unit>.interval yang hanya digunakan untuk tanggal dan waktu. Untuk skala linear, defaultnya adalah [1, 2, 2.5, 5] yang berarti nilai petak dapat berada di setiap unit (1), di unit genap (2), atau di kelipatan 2,5 atau 5. Nilai pangkat 10 kali dari nilai ini juga dipertimbangkan (misalnya [10, 20, 25, 50] dan [.1, .2, .25, .5]). Untuk skala log, default-nya adalah [1, 2, 5].

Jenis: angka antara 1 dan 10, tidak termasuk 10.
Default: yang dihitung
hAxis.gridlines.minSpacing

Ruang layar minimum, dalam piksel, antara garis petak utama hAxis. Default untuk garis kisi utama adalah 40 untuk skala linear, dan 20 untuk skala log. Jika Anda menentukan count, bukan minSpacing, minSpacing akan dihitung dari jumlah. Sebaliknya, jika Anda menentukan minSpacing dan bukan count, jumlahnya dihitung dari minSpacing. Jika Anda menentukan keduanya, minSpacing akan menggantikan.

Jenis: angka
Default: yang dihitung
hAxis.gridlines.multiple

Semua nilai kotak dan kotak centang harus kelipatan dari nilai opsi ini. Perhatikan bahwa, tidak seperti interval, pangkat 10 kali kelipatan ini tidak dipertimbangkan. Jadi, Anda dapat memaksa tick menjadi bilangan bulat dengan menentukan gridlines.multiple = 1, atau memaksa tick menjadi kelipatan 1000 dengan menentukan gridlines.multiple = 1000.

Jenis: angka
Default: 1
hAxis.gridlines.units

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

Format umumnya adalah:

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

Informasi tambahan dapat ditemukan di Tanggal dan Waktu.

Objek Type:
Default: null
hAxis.minorGridlines

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

Opsi ini hanya didukung untuk sumbu continuous.

Objek Type:
Default: null
hAxis.minorGridlines.color

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

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

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

Jenis: angka
Default:1
hAxis.minorGridlines.interval

Opsi minorGridlines.interval mirip dengan opsi interval garis petak utama, tetapi interval yang dipilih akan selalu menjadi pembagi genap dari garis petak utama. Interval default untuk skala linear adalah [1, 1.5, 2, 2.5, 5], dan untuk skala log adalah [1, 2, 5].

Jenis: angka
Default:1
hAxis.minorGridlines.minSpacing

Spasi minimum yang diperlukan, dalam piksel, antara garis petak kecil yang berdekatan, serta antara garis petak kecil dan utama. Nilai defaultnya adalah 1/2 minSpacing dari garis petak utama untuk skala linear, dan 1/5 minSpacing untuk skala log.

Jenis: angka
Default:dihitung
hAxis.minorGridlines.multiple

Sama seperti gridlines.multiple utama.

Jenis: angka
Default: 1
hAxis.minorGridlines.units

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

Format umumnya adalah:

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

Informasi tambahan dapat ditemukan di Tanggal dan Waktu.

Objek Type:
Default: null
hAxis.logScale

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

Opsi ini hanya didukung untuk sumbu continuous.

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

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

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

Opsi ini hanya didukung untuk sumbu continuous.

Jenis: string
Default: null
hAxis.textPosition

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

Jenis: string
Default: 'keluar'
hAxis.textStyle

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

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

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

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

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

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

Contoh:

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

Opsi ini hanya didukung untuk sumbu continuous.

Jenis: Array elemen
Default: otomatis
hAxis.title

Properti hAxis yang menentukan judul sumbu horizontal.

Jenis: string
Default: null
hAxis.titleTextStyle

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

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

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

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

Jika salah, akan menyembunyikan label terluar, bukan membiarkannya dipangkas oleh penampung diagram. Jika true (benar), akan memungkinkan pemangkasan label.

Opsi ini hanya didukung untuk sumbu discrete.

Jenis: boolean
Default: false (salah)
Teks hAxis.slanted

Jika true, gambar teks sumbu horizontal pada suatu sudut untuk membantu menyesuaikan lebih banyak teks di sepanjang sumbu; jika salah, gambar teks sumbu horizontal dengan tegak. Perilaku defaultnya adalah teks miring jika tidak semuanya pas saat digambar tegak. Perhatikan bahwa opsi ini hanya tersedia jika hAxis.textPosition ditetapkan ke 'out' (yang merupakan default). Defaultnya adalah false untuk tanggal dan waktu.

Jenis: boolean
Default: otomatis
hAxis.slantedTextAngle

Sudut teks sumbu horizontal, jika digambar miring. Diabaikan jika hAxis.slantedText adalah false, atau dalam mode otomatis, dan diagram memutuskan untuk menggambar teks secara horizontal. Jika sudutnya positif, rotasi berlawanan arah jarum jam, dan jika negatif, searah jarum jam.

Jenis: angka, -90—90
Default: 30
hAxis.maxAlternation

Jumlah tingkat maksimum teks sumbu horizontal. Jika label teks sumbu terlalu padat, server dapat menggeser label yang berdekatan ke atas atau ke bawah agar pas dengan label yang berdekatan. Nilai ini menentukan jumlah level yang paling banyak digunakan; server dapat menggunakan lebih sedikit level, jika label dapat disesuaikan tanpa tumpang tindih. Untuk tanggal dan waktu, default-nya adalah 1.

Jenis: angka
Default: 2
hAxis.maxTextLines

Jumlah baris maksimum yang diizinkan untuk label teks. Label dapat mencakup beberapa baris jika terlalu panjang, dan secara default jumlah baris dibatasi oleh tinggi ruang yang tersedia.

Jenis: angka
Default: otomatis
hAxis.minTextSpacing

Spasi horizontal minimum, dalam piksel, yang diizinkan di antara dua label teks yang berdekatan. Jika label diberi spasi yang terlalu padat, atau terlalu panjang, spasinya dapat berada di bawah batas ini, dan dalam hal ini salah satu tindakan penghapusan label akan diterapkan (misalnya, memotong label atau menghapus beberapa label).

Jenis: angka
Default: Nilai hAxis.textStyle.fontSize
hAxis.showTextSetiap

Jumlah label sumbu horizontal yang akan ditampilkan, dengan 1 berarti setiap label, 2 berarti setiap label lainnya, dan seterusnya. Defaultnya adalah mencoba menampilkan sebanyak mungkin label tanpa tumpang-tindih.

Jenis: angka
Default: otomatis
hAxis.maxValue

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

Opsi ini hanya didukung untuk sumbu continuous.

Jenis: angka
Default: otomatis
hAxis.minValue

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

Opsi ini hanya didukung untuk sumbu continuous.

Jenis: angka
Default: otomatis
hAxis.viewWindowMode

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

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

Opsi ini hanya didukung untuk sumbu continuous.

Jenis: string
Default: Setara dengan 'pretty', tetapi haxis.viewWindow.min dan haxis.viewWindow.max lebih diutamakan jika digunakan.
hAxis.viewWindow

Menentukan rentang pemangkasan sumbu horizontal.

Objek Type:
Default: null
hAxis.viewWindow.max
  • Untuk sumbu continuous :

    Nilai data horizontal maksimum yang akan dirender.

  • Untuk sumbu discrete:

    Indeks baris berbasis nol tempat periode pemangkasan berakhir. Titik data pada indeks ini dan yang lebih tinggi akan dipangkas. Bersama vAxis.viewWindowMode.min, menentukan rentang setengah terbuka [min, maks) yang menunjukkan indeks elemen yang akan ditampilkan. Dengan kata lain, setiap indeks sedemikian rupa sehingga min <= index < max akan ditampilkan.

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

Jenis: angka
Default: otomatis
hAxis.viewWindow.min
  • Untuk sumbu continuous:

    Nilai data horizontal minimum yang akan dirender.

  • Untuk sumbu discrete:

    Indeks baris berbasis nol tempat periode pemangkasan dimulai. Titik data pada indeks yang lebih rendah dari ini akan dipangkas. Bersama vAxis.viewWindowMode.max, menentukan rentang setengah terbuka [min, maks) yang menunjukkan indeks elemen yang akan ditampilkan. Dengan kata lain, setiap indeks sedemikian rupa sehingga min <= index < max akan ditampilkan.

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

Jenis: angka
Default: otomatis
tinggi

Tinggi diagram, dalam piksel.

Jenis: angka
Default: tinggi elemen penampung
Ditumpuk

Jika disetel ke benar (true), tumpukan elemen untuk semua seri di setiap nilai domain. Catatan: Pada diagram Kolom, Area, dan SteppedArea, Google Chart membalik urutan item legenda agar lebih sesuai dengan tumpukan elemen seri (misalnya, seri 0 akan menjadi item legenda paling bawah). Ini tidak berlaku untuk Diagram Batang.

Opsi isStacked juga mendukung stacking 100%, dan stack elemen pada setiap nilai domain diskalakan ulang hingga mencapai 100%.

Opsi untuk isStacked adalah:

  • false — elemen tidak akan ditumpuk. Ini adalah opsi default.
  • true — menumpuk elemen untuk semua rangkaian di setiap nilai domain.
  • 'percent' — menumpuk elemen untuk semua rangkaian di setiap nilai domain dan menskalakannya kembali hingga mencapai 100%, dengan nilai setiap elemen dihitung sebagai persentase 100%.
  • 'relative' — menumpuk elemen untuk semua rangkaian di setiap nilai domain dan menskalakannya kembali sehingga menambahkan hingga 1, dengan setiap nilai elemen dihitung sebagai pecahan 1.
  • 'absolute' — berfungsi sama seperti isStacked: true.

Untuk penumpukan 100%, nilai yang dihitung untuk setiap elemen akan muncul di tooltip setelah nilai yang sebenarnya.

Sumbu target akan ditetapkan secara default ke nilai skala berdasarkan skala 0-1 relatif sebagai pecahan 1 untuk 'relative', dan 0-100% untuk 'percent' (Catatan: saat menggunakan opsi 'percent', nilai sumbu/centang ditampilkan sebagai persentase, tetapi nilai sebenarnya adalah nilai skala 0-1 relatif. Hal ini karena tick sumbu persentase adalah hasil penerapan format "#.##%" ke nilai skala 0-1 relatif. Saat menggunakan isStacked: 'percent', pastikan untuk menentukan tick/gridline apa pun menggunakan nilai skala 0-1 relatif). Anda dapat menyesuaikan nilai petak dan nilai skala serta pemformatan menggunakan opsi hAxis/vAxis yang sesuai.

Penumpukan 100% hanya mendukung nilai data jenis number, dan harus memiliki dasar pengukuran nol.

Jenis: boolean/string
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
legend.pageIndex

Awal indeks halaman berbasis nol yang dipilih untuk legenda.

Jenis: angka
Default: 0
legenda.posisi

Posisi legenda. Dapat berupa salah satu dari hal berikut:

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

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

Jenis: string
Default: 'horizontal'
reverseKategori

Jika disetel ke benar, akan menggambar rangkaian dari kanan ke kiri. Defaultnya adalah menggambar kiri-ke-kanan.

Opsi ini hanya didukung untuk sumbu discrete major.

Jenis: boolean
Default: false (salah)
serial

Array objek, yang masing-masing menjelaskan format seri yang sesuai dalam diagram. Untuk menggunakan nilai default untuk suatu rangkaian, tentukan objek kosong {}. Jika rangkaian atau nilai tidak ditentukan, nilai global akan digunakan. Setiap objek mendukung properti berikut:

  • annotations - Objek yang akan diterapkan pada anotasi untuk seri ini. Ini dapat digunakan untuk mengontrol, misalnya, textStyle untuk rangkaian:

    series: {
      0: {
        annotations: {
          textStyle: {fontSize: 12, color: 'red' }
        }
      }
    }
              

    Lihat berbagai opsi annotations untuk daftar yang lebih lengkap tentang apa saja yang dapat disesuaikan.

  • color - Warna yang akan digunakan untuk rangkaian ini. Tentukan string warna HTML yang valid.
  • targetAxisIndex - Sumbu mana yang akan ditetapkan untuk rangkaian ini, dengan 0 adalah sumbu default, dan 1 adalah sumbu yang berlawanan. Nilai defaultnya adalah 0; tetapkan ke 1 untuk menentukan diagram tempat serial yang berbeda dirender terhadap sumbu yang berbeda. Setidaknya satu seri dapat dialokasikan ke sumbu default. Anda dapat menentukan skala yang berbeda untuk sumbu yang berbeda.
  • visibleInLegend - Nilai boolean, jika benar (true), berarti seri harus memiliki entri legenda, dan salah (false) berarti tidak boleh. Defaultnya adalah true (benar).

Anda bisa menentukan array objek, yang masing-masingnya berlaku untuk rangkaian dalam urutan yang diberikan, atau Anda dapat menentukan objek dengan setiap turunan memiliki kunci numerik yang menunjukkan rangkaian mana yang diterapkan padanya. Misalnya, dua deklarasi berikut identik, dan mendeklarasikan rangkaian pertama sebagai hitam dan tidak ada dalam legenda, serta yang keempat berwarna merah dan tidak ada dalam 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 ditetapkan sebelumnya dan berfungsi bersama untuk mencapai perilaku diagram atau efek visual tertentu. Saat ini hanya tersedia satu tema:

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

Teks yang akan ditampilkan di atas diagram.

Jenis: string
Default: tanpa judul
titlePosition

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

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

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

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

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

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

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

{textStyle: {color: '#FF0000'}, showColorCode: true}
Objek Type:
Default: null
tooltip.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 true, tampilkan kotak berwarna di samping informasi seri dalam tooltip. Defaultnya adalah true jika focusTarget ditetapkan ke 'category', atau default ke false.

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

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

Garis tren ditentukan berdasarkan 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
    }
  }
}
    
Objek Type:
Default: null
trendsline.n.warna

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

Jenis: string
Default: warna seri default
trenline.n.derajat

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

Jenis: angka
Default: 3
trenlines.n.labelInLegend

Jika disetel, garis tren akan muncul dalam legenda sebagai string ini.

Jenis: string
Default: null
trendinglines.n.lineWidth

Lebar garis garis tren , dalam piksel.

Jenis: angka
Default: 2
trenlines.n.opacity

Transparansi garis tren , dari 0.0 (transparan) ke 1.0 (buram).

Jenis: angka
Default: 1.0
trenlines.n.pointSize

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

Jenis: angka
Default: 1
trenlines.n.pointsVisible

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

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

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

Jenis: boolean
Default: false (salah)
trenlines.n.type

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

Jenis: string
Default: linear
trenlines.n.visibleInLegend

Apakah persamaan garis tren muncul dalam legenda. (Label ini akan muncul di tooltip garis tren.)

Jenis: boolean
Default: false (salah)
Vaksin

Menentukan properti untuk sumbu vertikal masing-masing, jika diagram memiliki beberapa sumbu vertikal. Setiap objek turunan adalah objek vAxis, dan dapat berisi semua properti yang didukung oleh vAxis. Nilai properti ini menggantikan setelan global apa pun untuk properti yang sama.

Untuk menentukan diagram dengan beberapa sumbu vertikal, tentukan sumbu baru terlebih dahulu menggunakan series.targetAxisIndex, lalu konfigurasikan sumbu menggunakan vAxes. Contoh berikut menetapkan seri 2 ke sumbu kanan, lalu menentukan gaya kustom dan judul:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

Properti ini dapat berupa objek atau array: objek adalah kumpulan objek, masing-masing dengan label numerik yang menentukan sumbu yang ditentukannya - ini adalah format yang ditampilkan di atas; array adalah array objek, satu per sumbu. Misalnya, notasi gaya array berikut identik dengan objek vAxis yang ditampilkan di atas:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
Jenis: Array objek, atau objek dengan objek turunan
Default: null
Sumbu V

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

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

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

Jenis: angka
Default: otomatis
vAxis.baselineColor

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

Jenis: angka
Default: 'hitam'
vAxis.direction

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

Jenis: 1 atau -1
Default: 1
format vAxis

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

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

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

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

Jenis: string
Default: otomatis
baris vAxis.grid

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

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

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

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

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

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

Array ukuran (sebagai nilai data, bukan piksel) antar-garis petak yang berdekatan. Saat ini, opsi tersebut hanya untuk sumbu numerik, tetapi setara dengan opsi gridlines.units.<unit>.interval yang hanya digunakan untuk tanggal dan waktu. Untuk skala linear, defaultnya adalah [1, 2, 2.5, 5] yang berarti nilai petak dapat berada di setiap unit (1), di unit genap (2), atau di kelipatan 2,5 atau 5. Nilai pangkat 10 kali dari nilai ini juga dipertimbangkan (misalnya [10, 20, 25, 50] dan [.1, .2, .25, .5]). Untuk skala log, default-nya adalah [1, 2, 5].

Jenis: angka antara 1 dan 10, tidak termasuk 10.
Default: yang dihitung
vAxis.gridlines.minSpacing

Ruang layar minimum, dalam piksel, antara garis petak utama hAxis. Default untuk garis kisi utama adalah 40 untuk skala linear, dan 20 untuk skala log. Jika Anda menentukan count, bukan minSpacing, minSpacing akan dihitung dari jumlah. Sebaliknya, jika Anda menentukan minSpacing dan bukan count, jumlahnya dihitung dari minSpacing. Jika Anda menentukan keduanya, minSpacing akan menggantikan.

Jenis: angka
Default: yang dihitung
vAxis.gridline.beberapa

Semua nilai kotak dan kotak centang harus kelipatan dari nilai opsi ini. Perhatikan bahwa, tidak seperti interval, pangkat 10 kali kelipatan ini tidak dipertimbangkan. Jadi, Anda dapat memaksa tick menjadi bilangan bulat dengan menentukan gridlines.multiple = 1, atau memaksa tick menjadi kelipatan 1000 dengan menentukan gridlines.multiple = 1000.

Jenis: angka
Default: 1
vAxis.gridlines.units

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

Format umumnya adalah:

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

Informasi tambahan dapat ditemukan di Tanggal dan Waktu.

Objek Type:
Default: null
Garis Vektor Axis.minorGrid

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

Objek Type:
Default: null
vAxis.minorGridlines.color

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

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

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

Jenis: angka
Default: 1
vAxis.minorGridlines.interval

Opsi minorGridlines.interval mirip dengan opsi interval garis petak utama, tetapi interval yang dipilih akan selalu menjadi pembagi genap dari garis petak utama. Interval default untuk skala linear adalah [1, 1.5, 2, 2.5, 5], dan untuk skala log adalah [1, 2, 5].

Jenis: angka
Default:1
vAxis.minorGridlines.minSpacing

Spasi minimum yang diperlukan, dalam piksel, antara garis petak kecil yang berdekatan, serta antara garis petak kecil dan utama. Nilai defaultnya adalah 1/2 minSpacing dari garis petak utama untuk skala linear, dan 1/5 minSpacing untuk skala log.

Jenis: angka
Default:dihitung
vAxis.minorGridlines.beberapa

Sama seperti gridlines.multiple utama.

Jenis: angka
Default: 1
vAxis.minorGridlines.units

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

Format umumnya adalah:

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

Informasi tambahan dapat ditemukan di Tanggal dan Waktu.

Objek Type:
Default: null
Skala vAxis.log

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

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

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

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

Opsi ini hanya didukung untuk sumbu continuous.

Jenis: string
Default: null
vAxis.textPosition

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

Jenis: string
Default: 'keluar'
vAxis.textStyle

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

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

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

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

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

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

Contoh:

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

Properti vAxis yang menentukan judul untuk sumbu vertikal.

Jenis: string
Default: tanpa judul
vAxis.titleTextStyle

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

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

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

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

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

Jenis: angka
Default: otomatis
NilaiVvx.minNilai

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

Jenis: angka
Default: null
vAxis.viewWindowMode

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

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

Menentukan rentang pemangkasan sumbu vertikal.

Objek Type:
Default: null
vAxis.viewWindow.maks

Nilai data vertikal maksimum yang akan dirender.

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

Jenis: angka
Default: otomatis
vAxis.viewWindow.min

Nilai data vertikal minimum yang akan dirender.

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

Jenis: angka
Default: otomatis
lebar

Lebar diagram, dalam piksel.

Jenis: angka
Default: lebar elemen yang memuatnya

Metode

Metode
draw(data, options)

Menggambar diagram. Diagram menerima panggilan metode lebih lanjut hanya setelah peristiwa ready diaktifkan. Extended description

Jenis Hasil: tidak ada
getAction(actionID)

Menampilkan objek tindakan tooltip dengan actionID yang diminta.

Return Type:
getBoundingBox(id)

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

var cli = chart.getChartLayoutInterface();

Ketinggian area diagram
cli.getBoundingBox('chartarea').height
Lebar batang ketiga dalam rangkaian pertama diagram batang atau kolom
cli.getBoundingBox('bar#0#2').width
Kotak pembatas pada dudukan kelima diagram lingkaran
cli.getBoundingBox('slice#4')
Kotak pembatas data diagram dari diagram vertikal (misalnya: kolom):
cli.getBoundingBox('vAxis#0#gridline')
Kotak pembatas data diagram dari diagram horizontal (misalnya, batang):
cli.getBoundingBox('hAxis#0#gridline')

Nilai relatif terhadap penampung diagram. Panggil ini setelah diagram digambar.

Return Type:
getChartAreaBoundingBox()

Menampilkan objek yang berisi bagian kiri, atas, lebar, dan tinggi konten diagram (yaitu, tidak termasuk label dan legenda):

var cli = chart.getChartLayoutInterface();

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

Nilai relatif terhadap penampung diagram. Panggil ini setelah diagram digambar.

Return Type:
getChartLayoutInterface()

Menampilkan objek yang berisi informasi tentang penempatan di layar diagram dan elemennya.

Metode berikut dapat dipanggil pada objek yang ditampilkan:

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

Panggil ini setelah diagram digambar.

Return Type:
getHAxisValue(xPosition, optional_axis_index)

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

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

Panggil ini setelah diagram digambar.

Jenis Hasil: angka
getImageURI()

Menampilkan diagram yang diserialisasi sebagai URI gambar.

Panggil ini setelah diagram digambar.

Lihat Mencetak Diagram PNG.

Jenis Hasil: string
getSelection()

Menampilkan array entitas diagram yang dipilih. Entitas yang dapat dipilih adalah batang, entri legenda, dan kategori. Batang sesuai dengan sel di tabel data, entri legenda ke kolom (indeks baris adalah null), dan kategori ke baris (indeks kolom bernilai null). 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 batang, entri legenda, dan kategori. Batang sesuai dengan sel di tabel data, entri legenda ke kolom (indeks baris adalah null), dan kategori ke baris (indeks kolom bernilai null). Untuk diagram ini, hanya satu entitas yang dapat dipilih sekaligus. Extended description

Jenis Hasil: tidak ada
clearChart()

Menghapus diagram, dan melepaskan semua resource yang dialokasikan.

Jenis Hasil: tidak ada

Acara

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

Name
animationfinish

Diaktifkan saat animasi transisi selesai.

Properti: tidak ada
click

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

Properti: targetID
error

Dipicu jika terjadi error saat mencoba merender diagram.

Properties: ID, pesan
legendpagination

Dipicu jika pengguna mengklik panah penomoran halaman legenda. Meneruskan indeks halaman berbasis nol legenda saat ini dan jumlah total halaman.

Properti: currentPageIndex, 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 mouse menjauh dari entitas 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.