Visualisasi: Diagram Area (Versi Lama)

Tidak digunakan lagi

Visualisasi ini telah diganti dengan versi baru; sebagai gantinya, gunakan versi tersebut. Untuk memudahkan migrasi, lihat halaman catatan rilis.

Ringkasan

Diagram area yang dirender dalam browser menggunakan SVG atau VML. Menampilkan tips saat mengklik titik. Menganimasikan baris saat mengklik entri legenda.

Oleh: Google

Contoh

Buat kode sendiri di Visualisasi Playground

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["areachart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Memuat

Nama paket google.load adalah "areachart".

  google.load("visualization", "1", {packages: ["areachart"]});

Nama class visualisasinya adalah google.visualization.AreaChart 

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

Format Data

Kolom pertama harus berupa string dan berisi label kategori. Berapa pun jumlah kolom dapat mengikuti, semuanya harus berupa angka. Setiap kolom ditampilkan sebagai baris terpisah.

Opsi Konfigurasi

Name Jenis Default Deskripsi
sumbuWarna string atau Objek warna default Warna sumbu. Nilai yang mungkin adalah nilai yang tersedia dari opsi konfigurasi backgroundColor.
sumbuBackgroundBackgroundColor string atau Objek warna default Batas di sekitar latar belakang sumbu. Nilai yang mungkin adalah nilai yang tersedia dari opsi konfigurasi backgroundColor.
SumbuFontSize angka otomatis Ukuran font teks sumbu diagram, dalam piksel.
WarnaWarnaLatar Belakang string atau Objek warna default Warna latar belakang untuk area utama diagram. Mungkin salah satu dari opsi berikut:
  • String dengan warna yang didukung oleh HTML, misalnya 'red' atau '#00cc00'
  • Objek dengan properti stroke fill dan strokeSize. stroke dan fill harus berupa string dengan warna. strokeSize adalah angka. Contoh: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}. Untuk menggunakan hanya pengisian, tanpa guratan, gunakan stroke:null, strokeSize: 0.
batasWarna string atau Objek warna default Batas di sekitar elemen diagram. Nilai yang mungkin adalah nilai yang tersedia dari opsi konfigurasi backgroundColor.
warna Array string Warna default Warna yang akan digunakan untuk elemen diagram. Array string. Setiap elemen adalah string dengan warna yang didukung oleh HTML, misalnya 'red' atau '#00cc00'.
enableTooltip boolean benar Jika disetel ke benar, tooltip ditampilkan saat pengguna mengklik titik data.
FocusBorderColor string atau Objek warna default Batas di sekitar elemen diagram yang menjadi fokus (diarahkan oleh mouse). Nilai yang mungkin adalah nilai yang tersedia dari opsi konfigurasi backgroundColor.
tinggi angka Tinggi penampung Tinggi diagram dalam piksel.
Ditumpuk boolean salah Jika disetel ke benar (true), nilai baris akan ditumpuk (akumulasi).
legenda string 'kanan' Posisi dan jenis legenda. Dapat berupa salah satu dari hal berikut:
  • 'kanan' - Di sebelah kanan diagram.
  • 'kiri' - Di sebelah kiri diagram.
  • 'top' - Di atas diagram.
  • 'bawah' - Di bawah diagram.
  • 'tidak ada' - Tidak ada legenda yang ditampilkan.
legendaWarnaWarnaLatar Belakang string atau Objek warna default Warna latar belakang untuk area legenda diagram. Nilai yang mungkin adalah nilai yang tersedia dari opsi konfigurasi backgroundColor.
legendFontSize angka otomatis Ukuran font legenda, dalam piksel.
legendaTeksWarna string atau Objek warna default Warna teks legenda. Nilai yang mungkin adalah nilai yang tersedia dari opsi konfigurasi backgroundColor.
ukuranbaris angka 2 Lebar garis dalam piksel. Gunakan nol untuk menyembunyikan semua baris dan hanya menampilkan titik.
logScale boolean salah Jika true, sumbu utama harus diskalakan secara logaritmik.
maks. angka otomatis Menentukan garis petak sumbu Y tertinggi. Garis petak sebenarnya akan menjadi lebih besar dari dua nilai: nilai opsi maksimum, atau nilai data tertinggi, dibulatkan ke tanda petak berikutnya yang lebih tinggi.
mnt angka otomatis Menentukan garis petak sumbu Y terendah. Garis petak sebenarnya akan berada di bawah dua nilai: nilai opsi min, atau nilai data terendah, dibulatkan ke bawah ke tanda petak bawah berikutnya.
pointSize angka 3 Ukuran titik yang ditampilkan dalam piksel. Gunakan nol untuk menyembunyikan semua titik.
Sumbu Terbalik boolean salah Jika ditetapkan ke benar, akan mengambil kategori dari kanan ke kiri. Defaultnya adalah menggambar kiri-ke-kanan.
showCategories boolean benar Jika benar, label kategori akan ditampilkan. Jika salah, tidak akan dilakukan.
judul string tanpa judul Teks yang akan ditampilkan di atas diagram.
judulX string tanpa judul Teks yang akan ditampilkan di bawah sumbu horizontal.
judulY string tanpa judul Teks yang akan ditampilkan berdasarkan sumbu vertikal.
titleColor string atau Objek warna default Warna untuk judul diagram. Nilai yang mungkin adalah nilai yang tersedia dari opsi konfigurasi backgroundColor.
titleFontSize angka otomatis Ukuran font untuk judul diagram, dalam piksel.

tooltipFontSize		 angka 11 Ukuran font teks tooltip. Hal ini mungkin dikurangi, jika tooltip terlalu kecil untuk menyimpan teks dalam font yang ditentukan.
tooltipTinggi
 angka 60 Tinggi tooltip, dalam piksel. Tinggi tooltip bersifat tetap; tidak akan bertambah atau berkurang agar sesuai dengan panjang atau ukuran font teks. Namun, apa pun yang lebih besar dari 1/3 tinggi diagram akan dipangkas.
Lebar tooltip angka 120 Lebar tooltip, dalam piksel. Lebar tooltip bersifat tetap; tidak akan pernah bertambah atau berkurang agar sesuai dengan panjang atau ukuran font teks. Namun, apa pun yang lebih besar dari lebar diagram akan dipangkas.
lebar angka Lebar penampung Lebar diagram dalam piksel.

Metode

Metode Jenis Nilai yang Ditampilkan Deskripsi
draw(data, options) tidak ada Menggambar diagram.
getSelection() Array elemen pilihan Implementasi getSelection() standar. Elemen yang dipilih adalah elemen kolom dan sel. Hanya satu kolom atau sel yang dapat dipilih sekaligus oleh pengguna.
setSelection() tidak ada Implementasi setSelection() standar, tetapi hanya mendukung pemilihan satu elemen. Memperlakukan setiap entri pemilihan sebagai kolom atau pilihan sel. Perhatikan bahwa kolom label tidak dapat dipilih.

Acara

Name Deskripsi Properti
onmouseover Dipicu jika pengguna mengarahkan mouse ke satu titik, dan meneruskan indeks baris serta kolom sel terkait. baris, kolom
onmouseout Dipicu jika pengguna mouse menjauh dari titik, dan meneruskan indeks baris dan kolom sel yang bersangkutan. 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 memanggil hanya setelah peristiwa diaktifkan Tidak ada
select Dipicu jika pengguna mengklik titik atau legenda. Saat titik dipilih, sel yang sesuai dalam tabel data akan dipilih; ketika legenda dipilih, kolom yang sesuai dalam tabel data akan dipilih. Untuk mempelajari apa yang telah dipilih, panggil getSelection(). Tidak ada

Kebijakan Data

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