Trang này được dịch bởi Cloud Translation API.

Mã ví dụ

Dưới đây là một số mã mẫu để minh hoạ cách sử dụng API Trực quan hoá của Google.

Ví dụ về bảng
Ví dụ về bảng tuỳ chỉnh
Ví dụ về Analytics
Ví dụ về lượt tương tác
Ví dụ đầy đủ về trang HTML
Ví dụ về Trình bao bọc truy vấn
Ví dụ về trình bao bọc truy vấn bảng
Ví dụ về mẹo sử dụng công cụ di chuột qua

Ví dụ về bảng

function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time');
  data.addRows(5);
  data.setCell(0, 0, 'John');
  data.setCell(0, 1, 10000, '$10,000');
  data.setCell(0, 2, true);
  data.setCell(1, 0, 'Mary');
  data.setCell(1, 1, 25000, '$25,000');
  data.setCell(1, 2, true);
  data.setCell(2, 0, 'Steve');
  data.setCell(2, 1, 8000, '$8,000');
  data.setCell(2, 2, false);
  data.setCell(3, 0, 'Ellen');
  data.setCell(3, 1, 20000, '$20,000');
  data.setCell(3, 2, true);
  data.setCell(4, 0, 'Mike');
  data.setCell(4, 1, 12000, '$12,000');
  data.setCell(4, 2, false);

  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});

  google.visualization.events.addListener(table, 'select', function() {
    var row = table.getSelection()[0].row;
    alert('You selected ' + data.getValue(row, 0));
  });
}

Ví dụ về bảng tuỳ chỉnh


<style>
  .bold-green-font {
    font-weight: bold;
    color: green;
  }

  .bold-font {
    font-weight: bold;
  }

  .right-text {
    text-align: right;
  }

  .large-font {
    font-size: 15px;
  }

  .italic-darkblue-font {
    font-style: italic;
    color: darkblue;
  }

  .italic-purple-font {
    font-style: italic;
    color: purple;
  }

  .underline-blue-font {
    text-decoration: underline;
    color: blue;
  }

  .gold-border {
    border: 3px solid gold;
  }

  .deeppink-border {
    border: 3px solid deeppink;
  }

  .orange-background {
    background-color: orange;
  }

  .orchid-background {
    background-color: orchid;
  }

  .beige-background {
    background-color: beige;
  }

</style>

...

function drawTable() {
  var cssClassNames = {
    'headerRow': 'italic-darkblue-font large-font bold-font',
    'tableRow': '',
    'oddTableRow': 'beige-background',
    'selectedTableRow': 'orange-background large-font',
    'hoverTableRow': '',
    'headerCell': 'gold-border',
    'tableCell': '',
    'rowNumberCell': 'underline-blue-font'};

  var options = {'showRowNumber': true, 'allowHtml': true, 'cssClassNames': cssClassNames};

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time');
  data.addRows(5);
  data.setCell(0, 0, 'John');
  data.setCell(0, 1, 10000, '$10,000', {'className': 'bold-green-font large-font right-text'});
  data.setCell(0, 2, true, {'style': 'background-color: red;'});
  data.setCell(1, 0, 'Mary', null, {'className': 'bold-font'});
  data.setCell(1, 1, 25000, '$25,000', {'className': 'bold-font right-text'});
  data.setCell(1, 2, true, {'className': 'bold-font'});
  data.setCell(2, 0, 'Steve', null, {'className': 'deeppink-border'});
  data.setCell(2, 1, 8000, '$8,000', {'className': 'deeppink-border right-text'});
  data.setCell(2, 2, false, null);
  data.setCell(3, 0, 'Ellen', null, {'className': 'italic-purple-font large-font'});
  data.setCell(3, 1, 20000, '$20,000');
  data.setCell(3, 2, true);
  data.setCell(4, 0, 'Mike');
  data.setCell(4, 1, 12000, '$12,000');
  data.setCell(4, 2, false);
  var container = document.getElementById('table');
  var table = new google.visualization.Table(container);
  table.draw(data, options);
  table.setSelection([{'row': 4}]);
}

Ví dụ về biểu đồ dạng đồng hồ đo

Nhiệt độ

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

    var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250,
      redFrom: 250, redTo: 280, minorTicks: 5};
    var gauge;

    function drawGauge() {
      gaugeData = new google.visualization.DataTable();
      gaugeData.addColumn('number', 'Engine');
      gaugeData.addColumn('number', 'Torpedo');
      gaugeData.addRows(2);
      gaugeData.setCell(0, 0, 120);
      gaugeData.setCell(0, 1, 80);

      gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
      gauge.draw(gaugeData, gaugeOptions);
    }

    function changeTemp(dir) {
      gaugeData.setValue(0, 0, gaugeData.getValue(0, 0) + dir * 25);
      gaugeData.setValue(0, 1, gaugeData.getValue(0, 1) + dir * 20);
      gauge.draw(gaugeData, gaugeOptions);
    }
  </script>
 </head>
 <body>
  <div id="gauge_div" style="width:280px; height: 140px;"></div>
  <input type="button" value="Go Faster" onclick="changeTemp(1)" />
  <input type="button" value="Slow down" onclick="changeTemp(-1)" />
 </body>
</html>

Ví dụ về tương tác

Ví dụ này minh hoạ cách kết hợp hình ảnh trực quan để có hoạt động tương tác phức tạp hơn.
Tệp này cho thấy các tính năng sau:

Cách sử dụng đối tượng DataView để giới hạn và định dạng dữ liệu trong DataTable,
Cách liên kết hai hình ảnh trực quan với cùng một dữ liệu,
Cách sử dụng sự kiện 'sắp xếp' của hình ảnh trực quan dạng bảng,
Cách sử dụng trình định dạng để định dạng lại dữ liệu hiển thị.

Nhấp vào tiêu đề của bảng để xem biểu đồ cột cũng được sắp xếp.

Lưu ý rằng Chế độ kiểm soát và Trang tổng quan cho phép bạn kết hợp nhiều biểu đồ cùng với các tuỳ chọn kiểm soát để thao tác với dữ liệu mà biểu đồ hiển thị.

function drawSort() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time');
  data.addRows(5);
  data.setCell(0, 0, 'John');
  data.setCell(0, 1, 10000);
  data.setCell(0, 2, true);
  data.setCell(1, 0, 'Mary');
  data.setCell(1, 1, 25000);
  data.setCell(1, 2, true);
  data.setCell(2, 0, 'Steve');
  data.setCell(2, 1, 8000);
  data.setCell(2, 2, false);
  data.setCell(3, 0, 'Ellen');
  data.setCell(3, 1, 20000);
  data.setCell(3, 2, true);
  data.setCell(4, 0, 'Mike');
  data.setCell(4, 1, 12000);
  data.setCell(4, 2, false);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1]);

  var formatter = new google.visualization.NumberFormat({prefix: '$'});
  formatter.format(data, 1); // Apply formatter to second column

  var table = new google.visualization.Table(document.getElementById('table_sort_div'));
  table.draw(data, {width: '100%', height: '100%'});

  var chart = new google.visualization.BarChart(document.getElementById('chart_sort_div'));
  chart.draw(view);

  google.visualization.events.addListener(table, 'sort',
      function(event) {
        data.sort([{column: event.column, desc: !event.ascending}]);
        chart.draw(view);
      });
}

Ví dụ về trang HTML đầy đủ

Ví dụ toàn diện về cách tạo một trang web có các biểu đồ trực quan được nhúng trong đó. Hướng dẫn này cũng minh hoạ một biểu đồ được kết nối với Bảng tính Google và hai biểu đồ tương tác bằng cách sử dụng Sự kiện trực quan hoá.

Ví dụ này hiển thị một trang thống kê đơn giản về các bộ phim và địa điểm chiếu phim nổi tiếng của một công ty chuỗi rạp chiếu phim đáng tin cậy.

Trang này bao gồm một Bản đồ và một hình ảnh trực quan Bảng tương tác với nhau để hiển thị các vị trí rạp chiếu phim. Trang này bao gồm một biểu đồ cột cho thấy số lượng vé mà mỗi bộ phim đã bán ở mỗi địa điểm. Công cụ này lấy dữ liệu từ Bảng tính của Google. Bạn có thể xem phiên bản đã xuất bản của bảng tính này để đảm bảo tính hoàn chỉnh.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages': ['table', 'map', 'corechart'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(initialize);

      function initialize() {
        // The URL of the spreadsheet to source data from.
        var query = new google.visualization.Query(
            'https://spreadsheets.google.com/pub?key=pCQbetd-CptF0r8qmCOlZGg');
        query.send(draw);
      }

      function draw(response) {
        if (response.isError()) {
          alert('Error in query');
        }

        var ticketsData = response.getDataTable();
        var chart = new google.visualization.ColumnChart(
            document.getElementById('chart_div'));
        chart.draw(ticketsData, {'isStacked': true, 'legend': 'bottom',
            'vAxis': {'title': 'Number of tickets'}});

        var geoData = google.visualization.arrayToDataTable([
          ['Lat', 'Lon', 'Name', 'Food?'],
          [51.5072, -0.1275, 'Cinematics London', true],
          [48.8567, 2.3508, 'Cinematics Paris', true],
          [55.7500, 37.6167, 'Cinematics Moscow', false]]);

        var geoView = new google.visualization.DataView(geoData);
        geoView.setColumns([0, 1]);

        var table =
            new google.visualization.Table(document.getElementById('table_div'));
        table.draw(geoData, {showRowNumber: false, width: '100%', height: '100%'});

        var map =
            new google.visualization.Map(document.getElementById('map_div'));
        map.draw(geoView, {showTip: true});

        // Set a 'select' event listener for the table.
        // When the table is selected, we set the selection on the map.
        google.visualization.events.addListener(table, 'select',
            function() {
              map.setSelection(table.getSelection());
            });

        // Set a 'select' event listener for the map.
        // When the map is selected, we set the selection on the table.
        google.visualization.events.addListener(map, 'select',
            function() {
              table.setSelection(map.getSelection());
            });
      }
    </script>
  </head>

  <body>
    <table align="center">
      <tr valign="top">
        <td style="width: 50%;">
          <div id="map_div" style="width: 400px; height: 300;"></div>
        </td>
        <td style="width: 50%;">
          <div id="table_div"></div>
        </td>
      </tr>
      <tr>
        <td colSpan=2>
          <div id="chart_div" style="align: center; width: 700px; height: 300px;"></div>
        </td>
      </tr>
    </table>

  </body>
</html>

Ví dụ về trình bao bọc truy vấn

Ví dụ này minh hoạ cách tạo một đối tượng JavaScript bao bọc nhiều khía cạnh của việc gửi truy vấn cho bạn. Đối tượng này có tên là QueryWrapper, được tạo thực thể bằng một chuỗi truy vấn, một tên người dùng cho hình ảnh trực quan và một tập hợp các tuỳ chọn cho hình ảnh trực quan. Lớp này sẽ hiển thị một phương thức cho các phương thức gọi bên ngoài, sendAndDraw(), phương thức này sẽ gửi chuỗi truy vấn, xử lý phản hồi và gọi draw() trên hình ảnh trực quan hoặc hiển thị thông báo lỗi nếu truy vấn trả về lỗi. Trang lưu trữ ở đây hiển thị kết quả dưới dạng biểu đồ tổ chức trực quan.

Dưới đây là mã cho trang lưu trữ:

<!DOCTYPE html>
<html>
<head>
  <title>Query Wrapper Example</title>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="querywrapper.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages' : ['orgchart']});
    google.charts.setOnLoadCallback(function() { sendAndDraw('') });

    var dataSourceUrl = 'https://spreadsheets.google.com/tq?key=rCaVQNfFDMhOM6ENNYeYZ9Q&pub=1';
    var query;

    function sendAndDraw(queryString) {
      var container = document.getElementById('orgchart');
      var orgChart = new google.visualization.OrgChart(container);
      query && query.abort();
      query = new google.visualization.Query(dataSourceUrl + queryString);
      var queryWrapper = new QueryWrapper(query, orgChart, {'size': 'large'}, container);
      queryWrapper.sendAndDraw();
    }

  </script>
</head>

<body>
<h1>Query Wrapper Example</h1>
<form action="">
  <span> This example uses the following spreadsheet: <br />
    <a href="https://spreadsheets.google.com/pub?key=rCaVQNfFDMhOM6ENNYeYZ9Q">
      https://spreadsheets.google.com/pub?key=rCaVQNfFDMhOM6ENNYeYZ9Q
    </a></span>
  <br /><br />
  <select onChange="sendAndDraw(this.value)">
    <option value="">No query string</option>
    <option value="&tq=limit 3">query=limit 3</option>
    <option value="&tq=select G,H">(Error) query=select G,H</option>
  </select>
</form>
<br />
<div id="orgchart"></div>
</body>
</html>

Dưới đây là JavaScript cho đối tượng QueryWrapper.

/**
 * A google.visualization.Query Wrapper. Sends a
 * query and draws the visualization with the returned data or outputs an
 * error message.
 *
 * DISCLAIMER: This is an example code which you can copy and change as
 * required. It is used with the google visualization API which is assumed to
 * be loaded to the page. For more info see:
 * https://developers.google.com/chart/interactive/docs/reference#Query
 */


/**
 * Constructs a new query wrapper with the given query, visualization,
 * visualization options, and error message container. The visualization
 * should support the draw(dataTable, options) method.
 * @constructor
 */
var QueryWrapper = function(query, visualization, visOptions, errorContainer) {

  this.query = query;
  this.visualization = visualization;
  this.options = visOptions || {};
  this.errorContainer = errorContainer;
  this.currentDataTable = null;

  if (!visualization || !('draw' in visualization) ||
      (typeof(visualization['draw']) != 'function')) {
    throw Error('Visualization must have a draw method.');
  }
};


/** Draws the last returned data table, if no data table exists, does nothing.*/
QueryWrapper.prototype.draw = function() {
  if (!this.currentDataTable) {
    return;
  }
  this.visualization.draw(this.currentDataTable, this.options);
};


/**
 * Sends the query and upon its return draws the visualization.
 * If the query is set to refresh then the visualization will be drawn upon
 * each refresh.
 */
QueryWrapper.prototype.sendAndDraw = function() {
  var query = this.query;
  var self = this;
  query.send(function(response) {self.handleResponse(response)});
};


/** Handles the query response returned by the data source. */
QueryWrapper.prototype.handleResponse = function(response) {
  this.currentDataTable = null;
  if (response.isError()) {
    this.handleErrorResponse(response);
  } else {
    this.currentDataTable = response.getDataTable();
    this.draw();
  }
};


/** Handles a query response error returned by the data source. */
QueryWrapper.prototype.handleErrorResponse = function(response) {
  var message = response.getMessage();
  var detailedMessage = response.getDetailedMessage();
  if (this.errorContainer) {
    google.visualization.errors.addError(this.errorContainer,
        message, detailedMessage, {'showInTooltip': false});
  } else {
    throw Error(message + ' ' + detailedMessage);
  }
};


/** Aborts the sending and drawing. */
QueryWrapper.prototype.abort = function() {
  this.query.abort();
};

Ví dụ về trình bao bọc truy vấn bảng

Đây là ví dụ minh hoạ cách hiển thị một tập dữ liệu lớn trong hình ảnh trực quan dạng bảng được phân trang mà không cần tìm nạp tất cả dữ liệu trong một yêu cầu duy nhất. Điều này rất hữu ích khi có một lượng lớn dữ liệu và bạn muốn tránh chi phí trong việc yêu cầu hoặc lưu trữ tất cả dữ liệu cùng lúc trên trang.

JavaScript xác định một đối tượng TableQueryWrapper, giúp quản lý đối tượng google.visualization.Query để đưa ra yêu cầu cũng như hình ảnh trực quan trong bảng để xử lý việc sắp xếp và phân trang. Hệ thống sẽ tạo thực thể cho đối tượng này bằng thực thể google.visualization.Query, một xử lý cho phần tử trang dùng để lưu giữ hình ảnh trực quan và mọi lỗi mà đối tượng đó tạo ra, cũng như mọi tuỳ chọn để truyền vào phương thức draw() (bao gồm cả số lượng hàng cần tìm nạp dưới dạng tuỳ chọn pageSize). Đối tượng này quản lý hình ảnh trực quan dạng bảng bằng cách phát hiện và xử lý các sự kiện phân trang và sắp xếp.

Khi các trang của người dùng tiến hoặc lùi, TableQueryWrapper xử lý sự kiện này bằng cách tạo và gửi một truy vấn mới với các giá trị LIMIT và OFFSET thích hợp để điền lại trang trong bảng. Tương tự như vậy, khi người dùng nhấp vào một cột để thay đổi thứ tự sắp xếp, TableQueryWrapper xử lý sự kiện này bằng cách tạo và gửi một truy vấn mới có mệnh đề ORDER BY thích hợp và đặt lại về giá trị bù 0.

Trong ví dụ sau, hộp thả xuống cho phép bạn chọn số lượng hàng của bảng sẽ hiển thị. Nếu thay đổi, trang lưu trữ sẽ tạo một thực thể TableQueryWrapper mới, sau đó gửi một truy vấn mới có mệnh đề LIMIT phản ánh số lượng hàng đã chọn và không có mệnh đề OFFSET (tức là mệnh đề sẽ chuyển về hàng đầu tiên).