Menyesuaikan Diagram 

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

          // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);

// Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
<!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

 

Tentukan opsi

Setiap diagram memiliki banyak opsi yang dapat disesuaikan, termasuk judul, warna, ketebalan garis, isian latar belakang, dan sebagainya. Meskipun tim Alat Diagram telah bekerja keras dalam membuat tampilan diagram default, Anda mungkin ingin menyesuaikan diagram, misalnya untuk menambahkan judul atau label sumbu.

Tentukan opsi kustom untuk diagram Anda dengan menentukan objek JavaScript dengan properti option_name/option_value. Gunakan nama opsi yang tercantum dalam dokumentasi diagram. Dokumentasi setiap diagram mencantumkan serangkaian opsi yang dapat disesuaikan. Misalnya, opsi yang tersedia untuk Diagram Lingkaran mencakup 'legend', 'title', dan 'is3D'. Semua opsi memiliki nilai default yang didokumentasikan.

Objek berikut menentukan posisi legenda, judul diagram, ukuran diagram, dan opsi 3D untuk Diagram Lingkaran:

var options = {
  'legend':'left',
  'title':'My Big Pie Chart',
  'is3D':true,
  'width':400,
  'height':300
}

Perbarui objek opsi pada contoh di atas dengan nilai ini untuk melihat pengaruhnya terhadap diagram.

Tentukan Ukuran Diagram

Salah satu opsi yang sangat umum untuk ditetapkan adalah tinggi dan lebar diagram. Anda dapat menentukan ukuran diagram di dua tempat: di HTML elemen <div> penampung, atau di opsi diagram. Jika Anda menentukan ukuran di kedua lokasi, diagram umumnya akan menyesuaikan dengan ukuran yang ditetapkan di HTML. Jika Anda tidak menentukan ukuran diagram di HTML atau sebagai opsi, diagram mungkin tidak akan dirender dengan benar.

Ada beberapa keuntungan dalam menentukan ukuran di satu tempat atau lainnya:

  • Menentukan ukuran dalam HTML - Diagram dapat membutuhkan waktu beberapa detik untuk dimuat dan dirender. Jika Anda sudah memiliki ukuran penampung diagram di HTML, tata letak halaman tidak akan berpindah-pindah saat diagram dimuat.
  • Menentukan ukuran sebagai opsi diagram - Jika ukuran diagram menggunakan JavaScript, Anda dapat menyalin dan menempelkan, atau melakukan serialisasi, menyimpan, dan memulihkan JavaScript serta mengubah ukuran diagram secara konsisten.

 

Informasi Selengkapnya