Các biểu đồ dạng cây

  1. Tổng quan
  2. Ví dụ
  3. Điểm nổi bật
  4. Chú giải công cụ
  5. Đang tải
  6. Định dạng dữ liệu
  7. Các lựa chọn cấu hình
  8. Phương thức
  9. Sự kiện
  10. Chính sách về dữ liệu

Tổng quan

Hình ảnh minh hoạ cây dữ liệu, trong đó mỗi nút có thể có 0 phần tử con hoặc nhiều phần tử con và một phần tử mẹ (ngoại trừ phần tử gốc không có phần tử mẹ). Mỗi nút được hiển thị dưới dạng một hình chữ nhật, có kích thước và được tô màu theo giá trị mà bạn chỉ định. Kích thước và màu sắc được có giá trị so với tất cả các nút khác trong biểu đồ. Bạn có thể chỉ định số cấp độ cần hiển thị đồng thời và tuỳ ý hiển thị các cấp độ sâu hơn theo gợi ý. Nếu một nút là một nút lá, bạn có thể chỉ định kích thước và màu sắc. Nếu không phải là nút lá, nút đó sẽ hiển thị dưới dạng một hộp giới hạn cho các nút lá. Hành vi mặc định là di chuyển xuống dưới cây khi người dùng nhấp chuột trái vào một nút và di chuyển lên trên cây khi người dùng nhấp chuột phải vào biểu đồ.

Tổng kích thước của biểu đồ được xác định theo kích thước của phần tử chứa mà bạn chèn vào trang của mình. Nếu bạn có các nút lá có tên quá dài nên không thể hiển thị, thì tên sẽ bị cắt bớt bằng dấu ba chấm (...).

Ví dụ

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['treemap']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
          ['Global',    null,                 0,                               0],
          ['America',   'Global',             0,                               0],
          ['Europe',    'Global',             0,                               0],
          ['Asia',      'Global',             0,                               0],
          ['Australia', 'Global',             0,                               0],
          ['Africa',    'Global',             0,                               0],
          ['Brazil',    'America',            11,                              10],
          ['USA',       'America',            52,                              31],
          ['Mexico',    'America',            24,                              12],
          ['Canada',    'America',            16,                              -23],
          ['France',    'Europe',             42,                              -11],
          ['Germany',   'Europe',             31,                              -2],
          ['Sweden',    'Europe',             22,                              -13],
          ['Italy',     'Europe',             17,                              4],
          ['UK',        'Europe',             21,                              -5],
          ['China',     'Asia',               36,                              4],
          ['Japan',     'Asia',               20,                              -12],
          ['India',     'Asia',               40,                              63],
          ['Laos',      'Asia',               4,                               34],
          ['Mongolia',  'Asia',               1,                               -5],
          ['Israel',    'Asia',               12,                              24],
          ['Iran',      'Asia',               18,                              13],
          ['Pakistan',  'Asia',               11,                              -52],
          ['Egypt',     'Africa',             21,                              0],
          ['S. Africa', 'Africa',             30,                              43],
          ['Sudan',     'Africa',             12,                              2],
          ['Congo',     'Africa',             10,                              12],
          ['Zaire',     'Africa',             8,                               10]
        ]);

        tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

        tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true
        });

      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Điểm nổi bật

Bạn có thể chỉ định xem các phần tử có cần làm nổi bật hay không và đặt màu cụ thể để một số phần tử nhất định sử dụng khi điều này xảy ra. Để bật tính năng đánh dấu, hãy đặt highlightOnMouseOver:true (dành cho phiên bản 49 trở xuống) hoặc enableHighlight: true (dành cho phiên bản 50 trở lên). Từ đó, bạn có thể thiết lập màu sắc để sử dụng cho việc đánh dấu các phần tử bằng cách sử dụng nhiều tuỳ chọn HighlightColor. 

      var options = { // For v49 or before
        highlightOnMouseOver: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true
      };
      var optionsV50 = { // For v50+
        enableHighlight: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true,
        // Use click to highlight and double-click to drill down.
        eventsConfig: {
          highlight: ['click'],
          unhighlight: ['mouseout'],
          rollup: ['contextmenu'],
          drilldown: ['dblclick'],
        }
      };

Chú giải công cụ

Theo mặc định, chú giải công cụ liên quan đến sơ đồ dạng cây là cơ bản, hiển thị nhãn của ô sơ đồ cây. Điều này rất hữu ích khi các ô quá nhỏ nên không thể chứa nhãn, nhưng bạn có thể tuỳ chỉnh thêm các ô đó như mô tả trong phần này.

Chú giải công cụ dạng sơ đồ dạng cây được tuỳ chỉnh khác với các biểu đồ khác: bạn xác định một hàm rồi đặt tuỳ chọn generateTooltip cho hàm đó. Sau đây là một ví dụ đơn giản:

Trong biểu đồ trên, chúng ta xác định một hàm có tên là showStaticTooltip. Hàm này chỉ trả về một chuỗi có HTML sẽ hiển thị bất cứ khi nào người dùng di chuột qua ô sơ đồ cây. Hãy dùng thử! Mã để tạo như sau:

  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showStaticTooltip
  };

  tree.draw(data, options);

  function showStaticTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           'Read more about the <a href="http://en.wikipedia.org/wiki/Kingdom_(biology)">kingdoms of life</a>.</div>';
  }

Hàm generateTooltip có thể là bất kỳ JavaScript nào bạn thích. Thông thường, bạn sẽ muốn các chú giải công cụ thay đổi dựa trên giá trị dữ liệu. Ví dụ sau cho thấy cách truy cập vào mọi trường trong bảng dữ liệu.

Nếu di chuột qua các ô trong sơ đồ cây ở trên, bạn sẽ thấy một phần chú thích khác nhau cho từng ô. Tất cả các hàm chú giải công cụ dạng sơ đồ cây đều nhận 3 giá trị: row, size và value.

  • row: hàng của ô từ bảng dữ liệu
  • size: tổng giá trị (cột 3) của ô này và tất cả phần tử con của ô
  • value: màu của ô, được biểu thị dưới dạng một số từ 0 đến 1

Trong showFullTooltip, chuỗi chúng ta trả về là một hộp HTML có 5 dòng:

  • Dòng 1 hiển thị hàng thích hợp trong bảng dữ liệu, giúp bạn thoải mái sử dụng data.getValue.
  • Dòng 2 cho bạn biết hàng nào đó chỉ là tham số row.
  • Dòng 3 cung cấp cho bạn thông tin từ cột 3 của bảng dữ liệu: tổng giá trị của cột 3 trong hàng này, cộng với các giá trị từ các con cháu.
  • Dòng 4 cung cấp cho bạn thông tin từ cột 4 của bảng dữ liệu. Đây là giá trị, nhưng được biểu thị dưới dạng một số từ 0 đến 1 tương ứng với màu của ô.
  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showFullTooltip
  };

  tree.draw(data, options);

  function showFullTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           '<span style="font-family:Courier"><b>' + data.getValue(row, 0) +
           '</b>, ' + data.getValue(row, 1) + ', ' + data.getValue(row, 2) +
           ', ' + data.getValue(row, 3) + '</span><br>' +
           'Datatable row: ' + row + '<br>' +
	   data.getColumnLabel(2) +
           ' (total value of this cell and its children): ' + size + '<br>' +
	   data.getColumnLabel(3) + ': ' + value + ' </div>';
  }

}

Đang tải

Tên gói google.charts.load là "treemap".

  google.charts.load("current", {packages: ["treemap"]});

Tên lớp của hình ảnh trực quan là google.visualization.TreeMap.

  var visualization = new google.visualization.TreeMap(container);

Định dạng dữ liệu

Mỗi hàng trong bảng dữ liệu mô tả một nút (một hình chữ nhật trong biểu đồ). Mỗi nút (ngoại trừ nút gốc) có một nút mẹ. Mỗi nút sẽ được định kích thước và tô màu theo giá trị tương ứng với các nút khác đang hiển thị.

Bảng dữ liệu phải có 4 cột theo định dạng như sau:

  • Cột 0 – [string] Mã nhận dạng cho nút này. Đó có thể là chuỗi JavaScript hợp lệ, bao gồm cả dấu cách và độ dài bất kỳ mà chuỗi có thể chứa. Giá trị này được hiển thị dưới dạng tiêu đề nút.
  • Cột 1 – [string] – Mã của nút mẹ. Nếu đây là nút gốc, hãy để trống trường này. Chỉ cho phép một gốc cho mỗi sơ đồ dạng cây.
  • Cột 2 - [number] – Kích thước của nút. Chúng tôi chấp nhận mọi giá trị dương. Giá trị này xác định kích thước của nút, được tính toán tương ứng với tất cả các nút khác hiện đang hiển thị. Đối với các nút không có lá, giá trị này sẽ bị bỏ qua và được tính dựa trên kích thước của tất cả phần tử con.
  • Cột 3 – [không bắt buộc, number] – Một giá trị không bắt buộc dùng để tính màu cho nút này. Bạn có thể sử dụng bất kỳ giá trị nào, dương hay âm. Trước tiên, giá trị màu được tính toán lại trên thang tỷ lệ từ minColorValue đến maxColorValue, sau đó nút được gán một màu từ độ dốc giữa minColor và maxColor.

Các lựa chọn cấu hình

Tên
enablehighlight (dành cho phiên bản 50 trở lên)

Xác định xem các phần tử có hiển thị hiệu ứng được đánh dấu hay không. Điều kiện kích hoạt mặc định là khi bạn di chuột qua. Bạn có thể định cấu hình điều kiện kích hoạt bằng eventsConfig. Nếu bạn đặt thành true, bạn có thể chỉ định đánh dấu cho các phần tử khác nhau bằng nhiều tuỳ chọn highlightColor.

Loại: boolean
Mặc định: false
eventConfig (dành cho phiên bản 50 trở lên)

Cấu hình sự kiện để kích hoạt các lượt tương tác trên bản đồ cây. Định dạng để định cấu hình lượt tương tác:

eventsConfig: {
  interaction1: undefined, // or missing
  interaction2: [], // disable
  interaction3: [
    'mouse_event',
    'optional_key1',
    'optional_key2',
    'optional_key3',
    'optional_key4'
  ],
  ...,
}
Nếu mảng cấu hình không xác định hoặc bị thiếu cho một lượt tương tác, thì giá trị mặc định sẽ được sử dụng.
Nếu cấu hình là một mảng trống, thì hoạt động tương tác sẽ bị tắt.
Đối với cấu hình hợp lệ, mouse_event là bắt buộc và phải là một sự kiện chuột được hỗ trợ. Sau đó, bạn có thể có tối đa 4 phím bổ trợ tuỳ chọn.
Các tương tác được hỗ trợ:
đánh dấu, bỏ đánh dấu, hợp nhất, xem chi tiết.
Các sự kiện chuột được hỗ trợ:
'click', 'contextmenu', 'dblclick', 'Mouseout', 'di chuột'. Với 'contextmenu' tương ứng với thao tác nhấp chuột phải.
Các phím bổ trợ sự kiện chuột được hỗ trợ:
"altKey", "ctrlKey", "metaKey", "shiftKey".
Lấy cấu hình hiện tại:
Phương thức gọi getEventsConfig().
Ví dụ về cách sử dụng tổ hợp phím Control+Shift+Right_Click để di chuyển lên cây:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }
Loại: đối tượng
Mặc định: 
{
  highlight: ['mouseover'],
  unhighlight: ['mouseout'],
  rollup: ['contextmenu'], // right-click
  drilldown: ['click']
}
fontColor

Màu văn bản. Chỉ định giá trị màu HTML.

Loại: chuỗi
Mặc định: #ffffff
fontFamily

Bộ phông chữ dùng cho tất cả văn bản.

Loại: chuỗi
Mặc định: tự động
fontSize

Cỡ chữ cho tất cả văn bản, tính bằng điểm.

Loại: số
Mặc định: 12
forceIFrame

Vẽ biểu đồ bên trong một khung cùng dòng. (Lưu ý rằng trên IE8, tuỳ chọn này sẽ bị bỏ qua; tất cả biểu đồ của IE8 đều được vẽ trong các khung i.)

Loại: boolean
Mặc định: false
headerColor

Màu của phần tiêu đề cho mỗi nút. Chỉ định giá trị màu HTML.

Loại: chuỗi
Mặc định: #988f86
headerHeight

Chiều cao của phần tiêu đề cho mỗi nút, tính bằng pixel (có thể bằng 0).

Loại số
Mặc định: 0
headerHighlightColor

Màu tiêu đề của nút bạn di chuột qua. Chỉ định một giá trị màu HTML hoặc giá trị rỗng; nếu rỗng, giá trị này sẽ được làm sáng headerColor 35%.

Loại: chuỗi
Mặc định: rỗng
MarkOnMouseOver (không dùng nữa cho phiên bản 50 trở lên)

Không dùng nữa cho phiên bản 50 trở lên. Đối với phiên bản 50 trở lên, vui lòng sử dụng enableHighlight. Xác định xem các phần tử có hiển thị hiệu ứng được đánh dấu khi di chuột qua hay không. Nếu bạn đặt thành true, bạn có thể chỉ định đánh dấu cho các phần tử khác nhau bằng nhiều tuỳ chọn highlightColor.

Loại: boolean
Mặc định: false
hintOpacity

Khi maxPostDepth lớn hơn 1, khiến các nút dưới độ sâu hiện tại xuất hiện, hintOpacity sẽ chỉ định độ trong suốt của giá trị này. Giá trị này phải nằm trong khoảng từ 0 đến 1. Giá trị càng cao thì nút càng mờ.

Loại: số
Mặc định: 0.0
maxColor

Màu cho hình chữ nhật có giá trị của cột 3 là maxColorValue. Chỉ định một giá trị màu HTML.

Loại: chuỗi
Mặc định: #00dd00
maxDepth

Số cấp nút tối đa để hiển thị trong chế độ xem hiện tại. Các cấp sẽ được làm phẳng trong mặt phẳng hiện tại. Nếu cây của bạn có nhiều cấp hơn giới hạn này, bạn sẽ phải di chuyển lên hoặc xuống để xem các cấp độ đó. Bạn có thể thấy thêm các cấp maxPostDepth bên dưới dưới dạng hình chữ nhật được tô bóng trong các nút này.

Loại: số
Mặc định: 1
maxHighlightColor

Màu đánh dấu cần sử dụng cho nút có giá trị lớn nhất trong cột 3. Chỉ định một giá trị màu HTML hoặc giá trị rỗng; Nếu là rỗng, giá trị này sẽ là giá trị của maxColor được làm sáng thêm 35%

Loại: chuỗi
Mặc định: rỗng
maxPostDepth

Số lượng cấp của nút vượt quá maxDepth để hiển thị theo kiểu "gợi ý". Các nút gợi ý sẽ hiển thị dưới dạng hình chữ nhật được tô bóng bên trong một nút nằm trong giới hạn maxDepth.

Loại: số
Mặc định: 0
maxColorValue

Giá trị lớn nhất được phép trong cột 3. Tất cả các giá trị lớn hơn giá trị này sẽ được cắt thành giá trị này. Nếu bạn đặt thành rỗng, giá trị này sẽ được đặt thành giá trị tối đa trong cột.

Loại: số
Mặc định: rỗng
midColor

Màu cho hình chữ nhật có giá trị của cột 3 nằm ở giữa maxColorValue và minColorValue. Chỉ định giá trị màu HTML.

Loại: chuỗi
Mặc định: #000000
midHighlightColor

Màu đánh dấu để sử dụng cho nút có giá trị của cột 3 gần giá trị trung vị của minColorValue và maxColorValue. Chỉ định một giá trị màu HTML hoặc giá trị rỗng; nếu là rỗng, giá trị này sẽ là giá trị của midColor được làm sáng thêm 35%.

Loại: chuỗi
Mặc định: rỗng
minColor

Màu cho hình chữ nhật có giá trị của cột 3 là minColorValue. Chỉ định một giá trị màu HTML.

Loại: chuỗi
Mặc định: #dd0000
minHighlightColor

Màu đánh dấu để sử dụng cho nút có giá trị cột 3 gần nhất với minColorValue. Chỉ định một giá trị màu HTML hoặc giá trị rỗng. Nếu là rỗng, giá trị này sẽ là giá trị của minColor được làm sáng thêm 35%

Loại: chuỗi
Mặc định: rỗng
minColorValue

Giá trị nhỏ nhất được phép sử dụng trong cột 3. Tất cả các giá trị nhỏ hơn giá trị này sẽ được cắt thành giá trị này. Nếu bạn đặt thành rỗng, giá trị này sẽ được tính là giá trị nhỏ nhất trong cột.

Loại: số
Mặc định: rỗng
noColor

Màu cần sử dụng cho hình chữ nhật khi một nút không có giá trị nào cho cột 3 và nút đó là một lá (hoặc chỉ chứa các lá). Chỉ định giá trị màu HTML.

Loại: chuỗi
Mặc định: #000000
noHighlightColor

Màu cần sử dụng cho hình chữ nhật có màu "không" khi được đánh dấu. Chỉ định một giá trị màu HTML hoặc giá trị rỗng; nếu là rỗng, giá trị này sẽ được làm sáng 35%.noColor

Loại: chuỗi
Mặc định: rỗng
showScale

Liệu có hiển thị thang độ dốc màu từ minColor đến maxColor dọc theo đầu biểu đồ hay không. Hãy chỉ định true để hiển thị tỷ lệ.

Loại: boolean
Mặc định: false
showTooltips

Liệu có hiển thị chú thích hay không.

Loại: boolean
Mặc định: true
textStyle

Một đối tượng chỉ định kiểu văn bản, đối với một số biểu đồ có văn bản trong vùng nội dung, chẳng hạn như sơ đồ dạng cây. Đối tượng có định dạng sau: 

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color có thể là bất kỳ chuỗi màu HTML nào, ví dụ: 'red' hoặc '#00cc00'. Xem thêm fontName và fontSize.

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
title

Văn bản để hiển thị phía trên biểu đồ.

Loại: chuỗi
Mặc định: không có tiêu đề
titleTextStyle

Đối tượng chỉ định kiểu văn bản tiêu đề. Đối tượng có định dạng sau:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color có thể là bất kỳ chuỗi màu HTML nào, ví dụ: 'red' hoặc '#00cc00'. Xem thêm fontName và fontSize.

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
useWeightedAverageForAggregation

Liệu có sử dụng giá trị trung bình có trọng số để tổng hợp hay không.

Loại: boolean
Mặc định: false

Phương thức

Phương thức
draw(data, options)

Vẽ biểu đồ.

Loại trả lại: không có
getEventsConfig() (for v50+)

Trả về cấu hình tương tác hiện tại. Thông tin này có thể dùng để xác minh lựa chọn cấu hình eventsConfig

Loại dữ liệu trả về: Đối tượng
{ // An empty array (i.e. []) means the interaction is disabled.
  highlight: string[],
  unhighlight: string[],
  rollup: string[],
  drilldown: string[] }
getSelection()

Cách triển khai getSelection() chuẩn. Các phần tử đã chọn là các nút. Bạn chỉ có thể chọn một nút mỗi lần.

Loại dữ liệu trả về: Mảng gồm các phần tử lựa chọn
setSelection()

Cách triển khai setSelection() chuẩn. Các phần tử đã chọn là các nút. Bạn chỉ có thể chọn một nút mỗi lần.

Loại trả lại: không có
goUpAndDraw()

Di chuyển cây lên một cấp và vẽ lại. Không tạo ra lỗi nếu nút này là nút gốc. Lệnh này được kích hoạt tự động khi người dùng nhấp chuột phải vào một nút.

Loại trả lại: không có
getMaxPossibleDepth()

Trả về độ sâu tối đa có thể cho thành phần hiển thị hiện tại.

Loại trả về: số
clearChart()

Xoá biểu đồ và giải phóng tất cả tài nguyên đã phân bổ của biểu đồ đó.

Loại trả lại: không có

Sự kiện

Vui lòng tham khảo eventsConfig để biết các điều kiện kích hoạt sự kiện có thể định cấu hình.
Tên
onmouseover

Được kích hoạt khi người dùng di chuột qua một nút. Trình xử lý sự kiện được chuyển chỉ mục hàng của mục nhập tương ứng trong bảng dữ liệu.

Thuộc tính: hàng
highlight (for v50+)

Được kích hoạt khi người dùng đánh dấu một nút. Điều kiện kích hoạt mặc định là di chuột qua. Bạn có thể định cấu hình trình xử lý này bằng eventsConfig cho phiên bản 50 trở lên. Trình xử lý sự kiện được chuyển chỉ mục hàng của mục nhập tương ứng trong bảng dữ liệu.

Thuộc tính: hàng
onmouseout

Được kích hoạt khi người dùng di chuột ra khỏi một nút. Trình xử lý sự kiện được chuyển chỉ mục hàng của mục nhập tương ứng trong bảng dữ liệu.

Thuộc tính: hàng
unhighlight (for v50+)

Được kích hoạt khi người dùng bỏ đánh dấu một nút. Điều kiện kích hoạt mặc định là di chuột ra. Bạn có thể định cấu hình trình xử lý này bằng eventsConfig cho phiên bản 50 trở lên. Trình xử lý sự kiện được chuyển chỉ mục hàng của mục nhập tương ứng trong bảng dữ liệu.

Thuộc tính: hàng
ready

Được kích hoạt khi biểu đồ đã sẵn sàng cho các lệnh gọi phương thức bên ngoài. Nếu muốn tương tác với biểu đồ và gọi các phương thức sau khi vẽ, bạn nên thiết lập trình nghe cho sự kiện này trước khi gọi phương thức draw và chỉ gọi các phương thức này sau khi sự kiện được kích hoạt.

Thuộc tính: Không có
rollup

Được kích hoạt khi người dùng di chuyển lên lại cây. Điều kiện kích hoạt mặc định là nhấp chuột phải. Bạn có thể định cấu hình thuộc tính này bằng eventsConfig cho phiên bản 50 trở lên. Thuộc tính hàng được truyền vào trình xử lý sự kiện là hàng của nút mà người dùng đang di chuyển từ, không phải hàng mà người dùng đang di chuyển đến.

Thuộc tính: hàng
select

Được kích hoạt khi người dùng xem chi tiết hoặc cuộn lên một nút. Cũng được kích hoạt khi phương thức setSelection() hoặc goUpAndDraw() được gọi. Để tìm hiểu nút nào được chọn, hãy gọi getSelection().

Thuộc tính: không có
drilldown (for v50+)

Được kích hoạt khi người dùng di chuyển sâu hơn vào cây. Điều kiện kích hoạt mặc định là lượt nhấp. Bạn có thể định cấu hình nút này bằng eventsConfig cho phiên bản 50 trở lên. Để tìm hiểu nút nào đã được nhấp, hãy gọi getSelection().

Thuộc tính: không có

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.