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 về cấu hình
  8. Phương thức
  9. Sự kiện
  10. Chính sách dữ liệu

Tổng quan

Hình ảnh minh họa cây dữ liệu, trong đó mỗi nút có thể có 0 hoặc nhiều phần tử con và một phần tử mẹ (ngoại trừ gốc không có phần tử mẹ). Mỗi nút được hiển thị dưới dạng hình chữ nhật, có kích thước và màu sắc theo các giá trị mà bạn chỉ định. Kích thước và màu sắc có giá trị tương đối với tất cả các nút khác trong biểu đồ. Bạn có thể chỉ định số lượng màn hình để hiển thị đồng thời và tùy ý hiển thị các cấp độ sâu hơn theo cách gợi ý. Nếu một nút là nút lá, bạn có thể chỉ định kích thước và màu sắc; nếu nút không phải là lá, nút đó sẽ hiển thị dưới dạng hộp giới hạn cho các nút lá. Hành vi mặc định là di chuyển xuống cây khi người dùng nhấp chuột trái vào một nút và di chuyển cây lên trở lại 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. Nếu bạn dùng các nút lá có tên quá dài để hiển thị, thì tên lá sẽ bị cắt ngắn 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ó nên đánh dấu phần tử hay không và đặt màu cụ thể cho các phần tử nhất định để sử dụng khi điều này xảy ra. Để bật tính năng làm nổi bật, hãy đặt highlightOnMouseOver:true (đối với phiên bản 49 trở về trước) hoặc enableHighlight: true (đối với phiên bản 50 trở lên). Từ đó, bạn có thể đặt màu để sử dụng cho việc đánh dấu các phần tử bằ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ụ bản đồ cây là cơ bản, cho thấy nhãn của ô bản đồ cây. Điều này rất hữu ích khi các ô quá nhỏ để 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ụ sơ đồ 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ẽ xuất hiện bất cứ khi nào người dùng di chuột qua một ô bản đồ 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ì bạn sẽ muốn chú giải công cụ thay đổi theo các 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 bản đồ cây ở trên, bạn sẽ thấy chú giải công cụ cho từng ô khác nhau. Chú giải công cụ bản đồ cây hàm có cả 3 giá trị: row, size và value.

  • row: hàng của ô trong 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
  • value: màu của ô, được biểu thị dưới dạng số từ 0 đến 1

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

  • Dòng 1 cho thấy hàng thích hợp từ bảng dữ liệu, nhờ đó bạn có thể sử dụng data.getValue một cách tự do.
  • Dòng 2 cho bạn biết đó là hàng nào, chỉ là thông 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 từ hàng này, cộng với các giá trị từ 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 số từ 0 đến 1 tương ứng với màu sắc 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 (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 có kích thước và màu sắc theo các giá trị tương ứng với các nút hiện đang hiển thị.

Bảng dữ liệu phải có bốn cột ở định dạng sau:

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

Các tuỳ chọn cấu hình

Tên
enableHighlight (cho v50+)

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

Loại: Boolean
Mặc định: sai
eventConfig (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 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 để tương tác, mặc định sẽ được sử dụng.
Nếu cấu hình là một mảng trống, thì tương tác sẽ bị vô hiệu hóa.
Đối với cấu hình hợp lệ, mouse_event là bắt buộc và phải là sự kiện chuột được hỗ trợ. Sau đó, bạn có thể có tối đa 4 hệ số sửa đổi phím (không bắt buộc).
Các lượt tương tác được hỗ trợ:
đánh dấu, hủy đánh dấu, tổng hợp, xem chi tiết.
Các sự kiện chuột được hỗ trợ:
'nhấp vào', 'trình đơn theo bối cảnh', 'dblclick', 'chuột', 'di chuột'. Với 'contextmenu' tương ứng với nhấp chuột phải.
Các phím bổ trợ cho sự kiện chuột được hỗ trợ:
'altKey', 'ctrlKey', 'metaKey', 'shiftKey'.
Nhận 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']
}
phông chữ

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

Loại: chuỗi
Mặc định: #ffffff
phông chữ

Bộ phông chữ dùng cho mọi văn bản.

Loại: chuỗi
Mặc định: tự động
Kích thước phông chữ

Kích thước phông chữ của 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. (Xin lưu ý rằng trên IE8, tuỳ chọn này sẽ bị bỏ qua; tất cả biểu đồ IE8 đều được vẽ trong khung i.)

Loại: Boolean
Mặc định: sai
màu tiêu đề

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

Loại: chuỗi
Mặc định: #988f86
Chiều cao tiêu đề

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

Số type
Mặc định: 0
Thêm màu đánh dấu tiêu đề

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

Loại: chuỗi
Mặc định: rỗng
Khoảnh khắcOnMouseOver (không dùng nữa cho v50+)

Không được 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 đặt giá trị là true, thì bạn có thể chỉ định phần nổi bật cho các phần tử khác nhau bằng cách sử dụng các tuỳ chọn highlightColor khác nhau.

Loại: Boolean
Mặc định: sai
gợi ý

Khi maxPostDepth lớn hơn 1, khiến các nút bên dưới độ sâu hiện tại hiển thị, hintOpacity sẽ chỉ định độ trong suốt. 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
tối đamàu sắc

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

Loại: chuỗi
Mặc định: #00dd00
Độ sâu tối đa

Số lượng nút tối đa được hiển thị trong chế độ xem hiện tại. Các cấp độ sẽ được làm phẳng theo mặt phẳng hiện tại. Nếu cây của bạn có nhiều cấp hơn mức này, bạn sẽ phải đi 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 để 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 giá trị 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
Độ sâu tối đa của bài đăng

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

Loại: số
Mặc định: 0
giá trị màu tối đa

Giá trị tối đa được phép trong cột 3. Tất cả các giá trị lớn hơn giá trị này sẽ bị cắt thành giá trị này. Nếu được đặ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
màu trung tính

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

Loại: chuỗi
Mặc định: #000000
Màu giữa được đánh dấu

Màu đánh dấu để sử dụng cho nút có giá trị cột 3 gần trung bình của minColorValue và maxColorValue. Chỉ định một giá trị màu HTML hoặc rỗng; nếu giá trị 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 của hình chữ nhật có giá trị cột 3 là minColorValue. Hãy 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 giá trị 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
giá trị màu tối thiểu

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

Loại: số
Mặc định: rỗng
không màu

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

Loại: chuỗi
Mặc định: #000000
Không có màu

Màu sắc 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 rỗng; nếu giá trị rỗng, đây sẽ là giá trị của noColor sẽ được làm sáng 35%.

Loại: chuỗi
Mặc định: rỗng
tỷ lệ hiển thị

Xác định xem có hiển thị thang màu tô màu từ minColor đến maxColor hay không ở đầu biểu đồ. Chỉ định đúng để hiển thị tỷ lệ.

Loại: Boolean
Mặc định: sai
showTooltips

Có hiển thị chú giải công cụ hay không.

Loại: Boolean
Mặc định: true
Kiểu văn bản

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

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

color có thể là chuỗi màu HTML bất kỳ, ví dụ: 'red' hoặc '#00cc00'. Ngoài ra, hãy xem fontName và fontSize.

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

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

Loại: chuỗi
Mặc định: không có tiêu đề
Kiểu văn bản tiêu đề

Đố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à chuỗi màu HTML bất kỳ, ví dụ: 'red' hoặc '#00cc00'. Ngoài ra, hãy xem fontName và fontSize.

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
sử dụngSử dụngBên trung bình tổng hợp

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: sai

Phương thức

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

Vẽ biểu đồ.

Loại dữ liệu trả về: không có
getEventsConfig() (for v50+)

Trả về cấu hình tương tác hiện tại. Bạn có thể sử dụng tính năng này để xác minh tùy 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()

Triển khai getSelection() chuẩn. Phần tử được chọn là các nút. Mỗi lần, bạn chỉ có thể chọn một nút.

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

Triển khai setSelection() chuẩn. Phần tử được chọn là các nút. Mỗi lần, bạn chỉ có thể chọn một nút.

Loại dữ liệu trả về: không có
goUpAndDraw()

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

Loại dữ liệu trả về: không có
getMaxPossibleDepth()

Trả về chiều sâu tối đa có thể cho chế độ xem 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 được phân bổ của biểu đồ.

Loại dữ liệu trả về: không có

Sự kiện

Vui lòng tham khảo eventsConfig để biết các trình 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.

Properties (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. Trình kích hoạt mặc định là di chuột qua. Bạn có thể định cấu hình nó với 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 tương ứng trong bảng dữ liệu.

Properties (Thuộc tính): hàng
onmouseout

Được kích hoạt khi người dùng di chuột ra khỏi 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.

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

Được kích hoạt khi người dùng bỏ đánh dấu nút. Trình kích hoạt mặc định là chuột. Bạn có thể định cấu hình nó với 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 tương ứng trong bảng dữ liệu.

Properties (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.

Properties: Không có
rollup

Được kích hoạt khi người dùng điều hướng trở lại cây. Trình 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 chuyể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ừ, chứ không phải hàng mà người dùng đang điều hướng đến.

Properties (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. Trình kích hoạt mặc định đang nhấp vào. 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 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.