Teknik Menggambar Diagram

Halaman ini mencantumkan berbagai cara untuk membuat instance dan menggambar diagram di halaman. Setiap metode memiliki kelebihan dan kekurangan, seperti yang tercantum di bawah ini.

Daftar Isi

  1. chart.draw()
  2. ChartWrapper
  3. DrawChart()
  4. Informasi Selengkapnya

chart.draw()

Ini adalah metode dasar yang dibahas dalam contoh Hello Chart! dalam dokumentasi ini. Berikut langkah-langkah dasarnya:

  1. Memuat loader library gstatic, Google Visualization, dan chart chart
  2. Menyiapkan data
  3. Siapkan opsi diagram apa pun
  4. Buat instance class diagram, dengan meneruskan handle ke elemen penampung halaman.
  5. Opsional untuk mendaftar guna menerima peristiwa diagram. Jika ingin memanggil metode pada diagram, Anda harus memproses peristiwa "siap".
  6. Panggil chart.draw() dengan meneruskan data dan opsi.

Kelebihan:

  • Anda memiliki kontrol penuh atas setiap langkah proses.
  • Anda dapat mendaftar untuk memproses semua peristiwa yang ditampilkan oleh diagram.

Kekurangan:

  • Verbose
  • Anda harus secara eksplisit memuat semua library diagram yang diperlukan.
  • Jika mengirim kueri, Anda harus menerapkan callback secara manual, memeriksa keberhasilannya, mengekstrak DataTable yang ditampilkan, dan meneruskannya ke diagram.

Contoh:

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

      // 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 our data table.
        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.
        chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'select', selectHandler);
        chart.draw(data, options);
      }

      function selectHandler() {
        var selectedItem = chart.getSelection()[0];
        var value = data.getValue(selectedItem.row, 0);
        alert('The user selected ' + value);
      }

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

ChartWrapper

ChartWrapper adalah class praktis yang menangani pemuatan semua library diagram yang sesuai untuk Anda dan juga menyederhanakan pengiriman kueri ke Sumber Data Alat Diagram.

Kelebihan:

  • Kode jauh lebih sedikit
  • Memuat semua library diagram yang diperlukan untuk Anda
  • Membuat kueri Sumber Data menjadi lebih mudah dengan membuat objek Query dan menangani callback untuk Anda
  • Teruskan ID elemen penampung, yang akan memanggil getElementByID untuk Anda.
  • Data dapat dikirim dalam berbagai format: sebagai array nilai, sebagai string literal JSON, atau sebagai nama sebutan channel DataTable

Kekurangan:

  • ChartWrapper saat ini hanya menyebarkan peristiwa pilih, siap, dan error. Untuk mendapatkan peristiwa lain, Anda harus mendapatkan handle untuk diagram yang digabungkan dan berlangganan peristiwa di sana. Lihat dokumentasi ChartWrapper untuk mengetahui contohnya.

Contoh:

Berikut adalah contoh diagram kolom dengan data yang dibuat secara lokal yang ditentukan sebagai array. Anda tidak dapat menentukan label diagram atau nilai datetime menggunakan sintaksis array, tetapi Anda dapat membuat objek DataTable secara manual dengan nilai tersebut dan meneruskannya ke properti dataTable.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'ColumnChart',
          dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                      ['', 700, 300, 400, 500, 600, 800]],
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw();
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Berikut ini adalah contoh dari bagan garis yang mendapatkan datanya dengan melakukan kueri pada Google {i>Spreadsheet<i}. Perhatikan bahwa kode tidak perlu menangani callback.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()

        // No query callback handler needed!
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Jika digabungkan dengan pemuatan otomatis, langkah ini dapat menghasilkan kode yang sangat ringkas:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Menggunakan Chart Editor dengan ChartWrapper

Anda dapat menggunakan dialog Chart Editor yang terdapat dalam Google Spreadsheet untuk mendesain diagram, lalu meminta string ChartWrapper serial yang mewakili diagram. Selanjutnya, Anda dapat menyalin dan menempelkan string ini dan menggunakannya seperti yang dijelaskan di atas dalam ChartWrapper.

Anda dapat menyematkan editor diagram di halaman Anda sendiri dan menampilkan metode bagi pengguna untuk terhubung ke sumber data lain dan menampilkan string ChartWrapper. Lihat dokumentasi referensi ChartEditor untuk mengetahui informasi selengkapnya.

 

DrawChart()

DrawChart adalah metode statis global yang menggabungkan ChartWrapper.

Kelebihan:

  • Sama seperti ChartWrapper, tetapi sedikit lebih singkat digunakan.

Kekurangan:

  • Tidak mengembalikan handle ke wrapper, sehingga Anda tidak dapat menangani peristiwa apa pun.
<DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);
      function drawVisualization() {
        google.visualization.drawChart({
         "containerId": "visualization_div",
         "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
         "query":"SELECT A,D WHERE D > 100 ORDER BY D",
         "refreshInterval": 5,
         "chartType": "Table",
         "options": {
            "alternatingRowStyle": true,
            "showRowNumber" : true
         }
       });
      }
    google.charts.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Informasi Selengkapnya