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, pengisian latar belakang, dan sebagainya. Meskipun tim Alat Diagram telah berupaya keras untuk membuat tampilan diagram default, Anda mungkin ingin menyesuaikan diagram, misalnya untuk menambahkan label judul atau sumbu.

Tentukan opsi kustom untuk diagram 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 terdokumentasi.

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 tersebut untuk melihat pengaruhnya terhadap diagram.

Menentukan 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 secara umum akan mengikuti ukuran yang ditentukan di HTML. Jika Anda tidak menentukan ukuran diagram baik di HTML maupun sebagai opsi, diagram mungkin tidak dirender dengan benar.

Ada keuntungan untuk menentukan ukuran di satu atau tempat lainnya:

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

 

Info Selengkapnya