Thanh công cụ

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

Tổng quan

Bạn có thể thêm 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 vào một trang web hoặc tiện ích tùy ý.

Của: Google

Ví dụ:

Chọn một trong các tùy 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>

Mức sử dụng

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

Để 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ừ mộ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 được dùng để điền hình ảnh trực quan vào phương thức drawToolbar().

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

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 của dữ liệu đơn giản (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
  • Bảng HTML chứa dữ liệu, được mở trong cửa sổ trình duyệt mới và/hoặc
  • Mã < iframe> HTML để nhúng hình ảnh này vào một trang web và/hoặc
  • Đường liên kết đến trang cho phép người dùng nhúng tiện ích này vào trang iGoogle của họ.

Cú pháp

google.visualization.drawToolbar(container, components)

Các tham số

vùng chứa
Xử lý thành phần 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 một 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 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à bạn có thể xuất dữ liệu hoặc hình ảnh trực quan. Thanh công cụ sẽ hiển thị các tùy 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 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ở trong trình duyệt.
    • datasource: "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 – Tuỳ chọn này cho phép người dùng thêm hình ảnh trực quan vào trang iGoogle của họ. Trang 'thêm vào iGoogle' sẽ mở trong trình duyệt. Chỉ sử dụng tính năng này nếu hình ảnh có trong 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 cho hình ảnh này, chỉ định lựa chọn ưu tiên về hình ảnh.
  • type: htmlcode – Tùy chọn này tạo một khối mã HTML mà người dùng có thể nhúng vào trang web để hiển thị hình ảnh trực quan 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 tính năng 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.
    • widget: Chuỗi url xml 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 cho hình ảnh này, chỉ định lựa chọn ưu tiên về hình ảnh.
    • style: Một chuỗi tuỳ chọn cho kiểu của 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 dữ liệu

Toàn bộ mã và dữ liệu đều được xử lý và kết xuất trong trình duyệt. Dữ liệu không đượ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ỹ).