Thanh công cụ

  1. Tổng quan
  2. Ví dụ
  3. Cách sử dụng
    1. Các loại đầu ra
    2. Cú pháp
  4. Chính sách về dữ liệu

Tổng quan

Bạn có thể thêm một phần tử thanh công cụ vào bất kỳ hình ảnh trực quan nào để cho phép người dùng xuất dữ liệu cơ bản vào tệp CSV hoặc bảng HTML, hoặc để cung cấp mã để nhúng hình ảnh trực quan vào một trang web hoặc tiện ích tuỳ ý.

Bởi: Google

Ví dụ

Chọn một trong các tuỳ chọn trên thanh công cụ.

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

    function draw() {
      drawVisualization();
      drawToolbar();
    }

    function drawVisualization() {
      var container = document.getElementById('visualization_div');
      visualization = new google.visualization.PieChart(container);
      new google.visualization.Query('https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA').
          send(queryCallback);
    }

    function queryCallback(response) {
      visualization.draw(response.getDataTable(), {is3D: true});
    }

    function drawToolbar() {
      var components = [
          {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1}},
          {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1},
           style: 'width: 800px; height: 700px; border: 3px solid purple;'}
      ];

      var container = document.getElementById('toolbar_div');
      google.visualization.drawToolbar(container, components);
    };

    google.charts.setOnLoadCallback(draw);
  </script>
</head>
<body>
  <div id="visualization_div" style="width: 270px; height: 200px;"></div>
  <div id="toolbar_div"></div>
</body>
</html>

Việc sử dụng

Thêm thanh công cụ vào trang bằng cách gọi phương thức google.visualization.drawToolbar(), điền sẵn các loại xuất được phép và dữ liệu cần thiết cho mỗi loại.

Để sử dụng thanh công cụ, hình ảnh trực quan của bạn phải lấy dữ liệu từ URL; bạn không thể chuyển các đối tượng DataTable hoặc DataView được điền thủ công. Bạn sẽ truyền URL của dữ liệu dùng để điền hình ảnh trực quan vào phương thức drawToolbar().

Nếu bạn muốn cung cấp một thành phần của CMS hoặc một iFrame có thể nhúng để chứa tiện ích này, bạn phải có URL cho một phiên bản hình ảnh trực quan được tiện ích.

Các loại đầu ra

Thanh công cụ có thể cho phép người dùng lựa chọn một hoặc nhiều loại đầu ra sau đây, tuỳ thuộc vào cách bạn định cấu hình thanh công cụ trong phương thức drawToolbar():

  • Phiên bản CSV đơn giản của dữ liệu (mà trình duyệt của bạn sẽ hiển thị hoặc đề xuất tải xuống và lưu, tùy thuộc vào cấu hình trình duyệt của bạn và/hoặc
  • Một bảng HTML chứa dữ liệu, được mở trong một cửa sổ trình duyệt mới và/hoặc
  • Mã <iframe> HTML để nhúng hình ảnh trực quan này vào một trang web và/hoặc
  • Một liên kết tới trang cho phép người dùng nhúng tiện ích này vào trang Blogger của họ.

Cú pháp

google.visualization.drawToolbar(container, components)

Thông số

vùng chứa
Tên người dùng của phần tử DOM trên trang. API sẽ vẽ thanh công cụ vào phần tử này. Điều này tương tự như thông số vùng chứa cho hình ảnh trực quan chuẩn. Bạn nên đặt thanh công cụ bên cạnh hình ảnh trực quan có sử dụng thanh công cụ đó.
thành phần
Một mảng đối tượng, mỗi đối tượng mô tả một định dạng mà dữ liệu hoặc hình ảnh trực quan có thể được xuất sang. Thanh công cụ sẽ hiển thị các tuỳ chọn cho người dùng theo thứ tự được thêm vào mảng. Mỗi đối tượng có một thuộc tính loại mô tả định dạng và một hoặc nhiều thuộc tính bổ sung, tuỳ thuộc vào loại:
  • type: 'csv' – Tuỳ chọn này sẽ xuất dữ liệu sang một tệp giá trị được phân tách bằng dấu phẩy. Hộp thoại 'lưu dưới dạng' sẽ mở ra trong trình duyệt.
    • nguồn dữ liệu: "string" – URL nguồn dữ liệu.
  • type: html' – Tuỳ chọn này xuất dữ liệu sang bảng HTML. Trang có bảng dữ liệu sẽ mở trong cửa sổ mới trong trình duyệt.
    • datasource: Chuỗi url nguồn dữ liệu.
  • type: igoogle - Tùy chọn này cho phép người dùng thêm hình ảnh trực quan vào trang AdX của họ. Trang 'thêm vào OpenGL' sẽ mở trong trình duyệt. Chỉ sử dụng phương thức này nếu hình ảnh trực quan có sẵn trong một phiên bản tiện ích.
    • datasource: Chuỗi url nguồn dữ liệu.
    • tiện ích: Chuỗi url xml của phiên bản tiện ích. Lưu ý rằng hình ảnh trực quan mà thanh công cụ liên kết không nhất thiết phải là phiên bản tiện ích.
    • userprefs: Một đối tượng lựa chọn ưu tiên không bắt buộc phù hợp với hình ảnh trực quan này, giúp chỉ định các lựa chọn ưu tiên cho hình ảnh.
  • type: htmlcode – Tuỳ chọn này tạo một khối mã HTML mà người dùng có thể nhúng vào một trang web để hiển thị hình ảnh bên trong iframe. Cửa sổ bật lên có phần tử html chính xác của tiện ích sẽ mở trong trình duyệt.Chỉ sử dụng cửa sổ này nếu hình ảnh có sẵn trong một phiên bản tiện ích.
    • datasource: Chuỗi url nguồn dữ liệu.
    • tiện ích: Chuỗi url xml của tiện ích.
    • userprefs: Một đối tượng lựa chọn ưu tiên không bắt buộc phù hợp với hình ảnh trực quan này, giúp chỉ định các lựa chọn ưu tiên cho hình ảnh.
    • style: Một chuỗi tùy chọn cho kiểu iframe. Ví dụ: 'width: 300px; height: 500px;'.

Ví dụ:

function drawToolbar() {
  var components = [
      {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
       userprefs: {'3d': 1}},
      {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml'}
  ];

  var container = document.getElementById('toolbar_div');
  google.visualization.drawToolbar(container, components);
};

Chính sách về dữ liệu

Tất cả mã và dữ liệu đều được xử lý và hiển thị trong trình duyệt. Không có dữ liệu nào được gửi đến bất kỳ máy chủ nào. Đối với một số thành phần, dữ liệu được lấy từ nguồn dữ liệu tương ứng được cung cấp cho thanh công cụ.

Bản địa hoá

Thanh công cụ hiện chỉ hỗ trợ tiếng Anh (Mỹ).