ภาพรวม
การแสดงภาพโครงสร้างของแผนผังข้อมูล โดยที่แต่ละโหนดอาจมีระดับย่อยเป็น 0 รายการขึ้นไป และมีระดับบนสุด 1 รายการ (ยกเว้นรูทที่ไม่มีรายการระดับบน) แต่ละโหนดจะแสดงเป็นรูปสี่เหลี่ยมผืนผ้า มีขนาดและสีตามค่าที่คุณกำหนด ขนาดและสีจะมีค่าเมื่อเทียบกับโหนดอื่นๆ ทั้งหมดในกราฟ คุณสามารถระบุจำนวนระดับที่จะแสดงพร้อมกัน และแสดงระดับที่ลึกขึ้นในรูปแบบที่แนะนำก็ได้ หากโหนดเป็นโหนด Leaf คุณจะระบุขนาดและสีได้ แต่หากไม่ใช่ Leaf ก็จะแสดงเป็นช่องล้อมรอบโหนด Leaf ลักษณะการทำงานเริ่มต้นคือการเลื่อนลงไปในโครงสร้างเมื่อผู้ใช้คลิกซ้ายโหนด และเลื่อนขึ้นไปบนโครงสร้างอีกครั้งเมื่อผู้ใช้คลิกขวาที่กราฟ
ขนาดรวมของกราฟจะกำหนดโดยขนาดขององค์ประกอบที่มีอยู่ที่คุณแทรกลงในหน้าเว็บ หากคุณมีโหนดใบไม้ที่มีชื่อยาวเกินกว่าจะแสดงได้ ระบบจะตัดชื่อให้สั้นลงด้วยจุดไข่ปลา (...)
ตัวอย่าง
<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>
ไฮไลต์
คุณระบุได้ว่าควรไฮไลต์องค์ประกอบหรือไม่ และตั้งค่าสีที่เจาะจงสำหรับองค์ประกอบที่ต้องการเมื่อเกิดเหตุการณ์นี้ขึ้น หากต้องการเปิดการไฮไลต์ ให้ตั้งค่า highlightOnMouseOver:true (สำหรับเวอร์ชัน 49 หรือเวอร์ชันก่อนหน้า) หรือ enableHighlight: true (สำหรับเวอร์ชัน 50 ขึ้นไป) จากนั้นตั้งค่าสีเพื่อใช้สำหรับการไฮไลต์องค์ประกอบโดยใช้ตัวเลือก 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'],
}
};
เคล็ดลับเครื่องมือ
โดยค่าเริ่มต้น เคล็ดลับเครื่องมือแผนภูมิทรีแม็ปจะเป็นแบบพื้นฐาน ซึ่งแสดงป้ายกำกับของเซลล์ทรีแม็ป ซึ่งจะเป็นประโยชน์เมื่อเซลล์มีขนาดเล็กเกินกว่าที่จะมีป้ายกำกับ แต่คุณสามารถปรับแต่งป้ายกำกับเพิ่มเติมได้ตามที่อธิบายไว้ในส่วนนี้
เคล็ดลับเครื่องมือแผนภูมิทรีแม็ปมีการปรับแต่งแตกต่างจากแผนภูมิอื่นๆ โดยคุณเป็นผู้กำหนดฟังก์ชันแล้วตั้งค่าตัวเลือก generateTooltip ให้กับฟังก์ชันนั้น ลองดูตัวอย่างง่ายๆ ดังนี้
ในแผนภูมิด้านบน เรากำหนดฟังก์ชันที่ชื่อว่า showStaticTooltip ซึ่งเพียงส่งคืนสตริงที่มี HTML เพื่อแสดงเมื่อผู้ใช้วางเมาส์เหนือเซลล์ทรีแม็ป ลองใช้เลย โค้ดสำหรับสร้างมีดังนี้
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>';
}
ฟังก์ชัน generateTooltip เป็น JavaScript แบบใดก็ได้
ที่คุณชอบ โดยปกติแล้ว คุณจะต้องมีเคล็ดลับเครื่องมือที่แตกต่างกันไปตามค่าของข้อมูล ตัวอย่างต่อไปนี้แสดงวิธีเข้าถึงทุกช่องในตารางข้อมูล
หากวางเมาส์เหนือเซลล์ในแผนผังด้านบน คุณจะเห็นเคล็ดลับเครื่องมือที่ต่างกันสำหรับแต่ละเซลล์ เคล็ดลับเครื่องมือแผนภูมิต้นไม้ทั้งหมดจะใช้ค่า 3 ค่า ได้แก่ row, size และ value
row: แถวของเซลล์จากตารางข้อมูลsize: ผลรวมของค่า (คอลัมน์ 3) ของเซลล์นี้และรายการย่อยทั้งหมดของเซลล์value: สีของเซลล์ซึ่งแสดงเป็นตัวเลขตั้งแต่ 0 ถึง 1
ใน showFullTooltip สตริงที่เราส่งคืนคือช่อง HTML
ที่มี 5 บรรทัดดังนี้
- บรรทัดที่ 1 จะแสดงแถวที่เหมาะสมจากตารางข้อมูล ซึ่งเป็นการใช้
data.getValueแบบเสรี - บรรทัดที่ 2 จะบอกว่าแถวใด ซึ่งเป็นแถวหนึ่งซึ่งเป็นพารามิเตอร์
rowเท่านั้น - บรรทัดที่ 3 แสดงข้อมูลจากคอลัมน์ที่ 3 ของตารางข้อมูล ซึ่งได้แก่ ผลรวมของค่าคอลัมน์ 3 จากแถวนี้ บวกกับค่าจากองค์ประกอบสืบทอด
- บรรทัดที่ 4 แสดงข้อมูลจากคอลัมน์ 4 ของตารางข้อมูล ค่านี้คือค่า แต่แสดงเป็นตัวเลขระหว่าง 0 ถึง 1 ตามสีของเซลล์
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>';
}
}
กำลังโหลด
ชื่อแพ็กเกจ google.charts.load คือ "treemap"
google.charts.load("current", {packages: ["treemap"]});
ชื่อคลาสของการแสดงภาพคือ google.visualization.TreeMap
var visualization = new google.visualization.TreeMap(container);
รูปแบบข้อมูล
แต่ละแถวในตารางข้อมูลอธิบายโหนดหนึ่งโหนด (สี่เหลี่ยมผืนผ้าในกราฟ) แต่ละโหนด (ยกเว้นโหนดรูท) มีโหนดหลัก 1 โหนด แต่ละโหนดจะมีขนาดและลงสีตามค่าของโหนดที่สัมพันธ์กับโหนดอื่นๆ ที่แสดงอยู่ในขณะนั้น
ตารางข้อมูลควรมี 4 คอลัมน์ในรูปแบบต่อไปนี้
- คอลัมน์ 0 - [string] รหัสสำหรับโหนดนี้ ซึ่งอาจเป็นสตริง JavaScript ที่ถูกต้อง เว้นวรรค และความยาวเท่าที่สตริงรองรับได้ ค่านี้จะแสดงเป็นส่วนหัวของโหนด
- คอลัมน์ 1 - [string] - รหัสของโหนดหลัก หากเป็นโหนดรูท ให้ปล่อยช่องนี้ว่างไว้ ต้นไม้อนุญาตเพียง 1 รูทต่อ ทรีแมป
- คอลัมน์ 2 - [ตัวเลข] - ขนาดของโหนด อนุญาตให้ใช้ค่าบวก ค่านี้จะกำหนดขนาดของโหนด ซึ่งคำนวณโดยสัมพันธ์กับโหนดอื่นๆ ทั้งหมดที่แสดงอยู่ สำหรับโหนดที่ไม่ใช่ใบไม้ ระบบจะไม่สนใจค่านี้และคำนวณจากขนาดของโหนดย่อยทั้งหมด
- คอลัมน์ 3 - [ไม่บังคับ, number] - ค่าที่ไม่บังคับที่ใช้ในการคำนวณสีสำหรับโหนดนี้ อนุญาตให้ใช้ค่าใดก็ได้ไม่ว่าจะเป็นค่าบวกหรือค่าลบ
ก่อนอื่นระบบจะคำนวณค่าสีใหม่ในสเกลจาก
minColorValueถึงmaxColorValueจากนั้นโหนดจะกำหนดสีจากการไล่ระดับสีระหว่างminColorถึงmaxColor
ตัวเลือกการกำหนดค่า
| ชื่อ | |
|---|---|
| enabledhighlight (สำหรับ v50+) |
กำหนดว่าองค์ประกอบควรแสดงเอฟเฟกต์ที่ไฮไลต์หรือไม่ ทริกเกอร์เริ่มต้นคือเมื่อมีการนำเมาส์ไปวางด้านบน
คุณกำหนดค่าทริกเกอร์ได้ด้วย ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
| eventConfig (สำหรับ v50+) |
การกําหนดค่าเหตุการณ์เพื่อทริกเกอร์การโต้ตอบกับแผนผังต้นไม้ รูปแบบที่จะกำหนดค่าการโต้ตอบ:
eventsConfig: {
interaction1: undefined, // or missing
interaction2: [], // disable
interaction3: [
'mouse_event',
'optional_key1',
'optional_key2',
'optional_key3',
'optional_key4'
],
...,
}
หากไม่ได้กำหนดอาร์เรย์การกำหนดค่าหรือไม่มีการโต้ตอบ ระบบจะใช้ default
หากการกำหนดค่าเป็นอาร์เรย์ว่างเปล่า ระบบจะปิดใช้การโต้ตอบ
การกำหนดค่าที่ถูกต้องจำเป็นต้องมี
mouse_event และต้องเป็นเหตุการณ์เมาส์ที่รองรับ จากนั้นคุณจะมีคีย์ตัวปรับแต่งที่ไม่บังคับได้สูงสุด 4 รายการ
ตัวอย่างการใช้ Control+Shift+Right_Click เพื่อเลื่อนขึ้นในโครงสร้าง
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }ประเภท: ออบเจ็กต์
ค่าเริ่มต้น:
{
highlight: ['mouseover'],
unhighlight: ['mouseout'],
rollup: ['contextmenu'], // right-click
drilldown: ['click']
}
|
| fontColor |
สีข้อความ ระบุค่าสี HTML ประเภท: สตริง
ค่าเริ่มต้น: #ffffff
|
| fontFamily |
ชุดแบบอักษรที่ใช้สำหรับข้อความทั้งหมด ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ
|
| fontSize |
ขนาดแบบอักษรของข้อความทั้งหมดเป็นจุด ประเภท: ตัวเลข
ค่าเริ่มต้น: 12
|
| forceIFrame |
วาดแผนภูมิภายในเฟรมแบบอินไลน์ (โปรดทราบว่าใน IE8 ตัวเลือกนี้จะถูกละเว้น และแผนภูมิ IE8 ทั้งหมดวาดใน i-frame) ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
| headerColor |
สีของส่วนหัวสำหรับแต่ละโหนด ระบุค่าสี HTML ประเภท: สตริง
ค่าเริ่มต้น: #988f86
|
| headerHeight |
ความสูงของส่วนส่วนหัวสำหรับแต่ละโหนดในหน่วยพิกเซล (อาจเป็น 0 ได้) หมายเลขประเภท
ค่าเริ่มต้น: 0
|
| headerHighlightColor |
สีของส่วนหัวของโหนดที่วางเมาส์เหนือ ระบุค่าสี HTML หรือค่า Null หากเป็น Null ค่านี้จะเพิ่มความสว่าง ประเภท: สตริง
ค่าเริ่มต้น: null
|
| highlightOnMouseOver (เลิกใช้งานแล้วสำหรับ v50+) |
เลิกใช้งานสำหรับ v50+ สำหรับ v50 ขึ้นไป โปรดใช้ ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
| hintOpacity |
เมื่อ ประเภท: ตัวเลข
ค่าเริ่มต้น: 0.0
|
| maxColor |
สีของสี่เหลี่ยมที่มีค่าคอลัมน์ 3 เป็น ประเภท: สตริง
ค่าเริ่มต้น: #00dd00
|
| maxDepth |
จำนวนระดับโหนดสูงสุดที่จะแสดงในมุมมองปัจจุบัน ระบบจะปรับระดับลงในระนาบปัจจุบัน หากต้นไม้มีชั้นมากกว่านี้ คุณจะต้องขึ้นหรือลงเพื่อดูระดับ นอกจากนี้ คุณยังดู ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
|
| maxHighlightColor |
สีไฮไลต์ที่จะใช้กับโหนดที่มีค่ามากที่สุดในคอลัมน์ 3 ระบุค่าสี HTML หรือเป็นค่าว่าง หากค่าเป็น Null ค่านี้จะเป็นค่า ประเภท: สตริง
ค่าเริ่มต้น: null
|
| maxPostDepth |
จำนวนระดับของโหนดที่เกิน ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
|
| maxColorValue |
ค่าสูงสุดที่ใช้ได้ในคอลัมน์ 3 ระบบจะตัดค่าทั้งหมดที่มากกว่าค่านี้ออก หากตั้งค่าเป็น Null ระบบจะตั้งเป็นค่าสูงสุดในคอลัมน์ ประเภท: ตัวเลข
ค่าเริ่มต้น: null
|
| midColor |
สีของสี่เหลี่ยมผืนผ้าที่มีค่าคอลัมน์ 3 อยู่ระหว่าง ประเภท: สตริง
ค่าเริ่มต้น: #000000
|
| midHighlightColor |
สีไฮไลต์ที่จะใช้สำหรับโหนดที่มีค่าคอลัมน์ 3 ใกล้ค่ามัธยฐานของ ประเภท: สตริง
ค่าเริ่มต้น: null
|
| minColor |
สีของสี่เหลี่ยมที่มีค่าคอลัมน์ 3 เป็น ประเภท: สตริง
ค่าเริ่มต้น: #dd0000
|
| minHighlightColor |
สีไฮไลต์ที่จะใช้สำหรับโหนดที่มีค่าคอลัมน์ 3 ใกล้เคียงกับ ประเภท: สตริง
ค่าเริ่มต้น: null
|
| minColorValue |
ค่าต่ำสุดที่ใช้ได้ในคอลัมน์ 3 ระบบจะตัดค่าทั้งหมดที่น้อยกว่าค่านี้เป็นค่านี้ หากตั้งค่าเป็น Null ระบบจะคำนวณเป็นค่าต่ำสุดในคอลัมน์ ประเภท: ตัวเลข
ค่าเริ่มต้น: null
|
| noColor |
สีที่จะใช้สำหรับรูปสี่เหลี่ยมผืนผ้าเมื่อโหนดไม่มีค่าสำหรับคอลัมน์ 3 และโหนดนั้นเป็นใบไม้ (หรือมีเฉพาะใบ) ระบุค่าสี HTML ประเภท: สตริง
ค่าเริ่มต้น: #000000
|
| noHighlightColor |
สีที่ใช้สำหรับสี่เหลี่ยมผืนผ้าที่มีสี "ไม่มี" เมื่อไฮไลต์ ระบุค่าสี HTML หรือ Null หากเป็น Null ค่าของ ประเภท: สตริง
ค่าเริ่มต้น: null
|
| showScale |
แสดงสเกลการไล่ระดับสีจาก ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
| showTooltips |
แสดงเคล็ดลับเครื่องมือหรือไม่ ประเภท: บูลีน
ค่าเริ่มต้น: true
|
| textStyle |
ออบเจ็กต์ที่ระบุรูปแบบข้อความสำหรับแผนภูมิบางรายการที่มีข้อความในพื้นที่ของเนื้อหา เช่น แผนภูมิทรีแม็ป ออบเจ็กต์มีรูปแบบดังนี้
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| title |
ข้อความที่จะแสดงเหนือแผนภูมิ ประเภท: สตริง
ค่าเริ่มต้น: ไม่มีชื่อ
|
| titleTextStyle |
วัตถุที่ระบุรูปแบบข้อความชื่อ ออบเจ็กต์มีรูปแบบดังนี้
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| useWeightedAverageForAggregation |
ดูว่าจะใช้ค่าเฉลี่ยถ่วงน้ำหนักในการรวบรวมข้อมูลหรือไม่ ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
วิธีการ
| วิธีการ | |
|---|---|
draw(data, options) |
วาดแผนภูมิ ประเภทการคืนสินค้า: ไม่มี
|
getEventsConfig() (for v50+) |
แสดงการกำหนดค่าการโต้ตอบปัจจุบัน สามารถใช้เพื่อยืนยันตัวเลือกการกำหนดค่า ประเภทการคืนสินค้า: วัตถุ
{ // An empty array (i.e. []) means the interaction is disabled.
highlight: string[],
unhighlight: string[],
rollup: string[],
drilldown: string[] }
|
getSelection() |
การติดตั้งใช้งาน ประเภทผลลัพธ์: อาร์เรย์ขององค์ประกอบการเลือก
|
setSelection() |
การติดตั้งใช้งาน ประเภทการคืนสินค้า: ไม่มี
|
goUpAndDraw() |
เลื่อนต้นไม้ขึ้นหนึ่งระดับแล้ววาดใหม่ ไม่แสดงข้อผิดพลาดหากโหนดเป็นโหนดรูท ซึ่งจะเริ่มทำงานโดยอัตโนมัติเมื่อผู้ใช้คลิกขวาที่โหนด ประเภทการคืนสินค้า: ไม่มี
|
getMaxPossibleDepth() |
แสดงความลึกสูงสุดที่เป็นไปได้สำหรับมุมมองปัจจุบัน ประเภทการคืนสินค้า: ตัวเลข
|
clearChart() |
ล้างแผนภูมิ และปล่อยทรัพยากรที่จัดสรรทั้งหมด ประเภทการคืนสินค้า: ไม่มี
|
กิจกรรม
eventsConfig สำหรับทริกเกอร์เหตุการณ์ที่กำหนดค่าได้| ชื่อ | |
|---|---|
onmouseover |
เริ่มทำงานเมื่อผู้ใช้วางเมาส์เหนือโหนด ตัวแฮนเดิลเหตุการณ์จะส่งผ่านดัชนีแถวของรายการที่เกี่ยวข้องในตารางข้อมูล พร็อพเพอร์ตี้: แถว
|
highlight (for v50+) |
เริ่มทำงานเมื่อผู้ใช้ไฮไลต์โหนด ทริกเกอร์เริ่มต้นคือเมาส์โอเวอร์
ซึ่งอาจกำหนดค่าด้วย พร็อพเพอร์ตี้: แถว
|
onmouseout |
เริ่มทำงานเมื่อผู้ใช้เลื่อนเมาส์ออกจากโหนด ตัวแฮนเดิลเหตุการณ์จะส่งผ่านดัชนีแถวของรายการที่เกี่ยวข้องในตารางข้อมูล พร็อพเพอร์ตี้: แถว
|
unhighlight (for v50+) |
เริ่มทำงานเมื่อผู้ใช้เลิกไฮไลต์โหนด ทริกเกอร์เริ่มต้นคือเมาส์เอาต์
ซึ่งอาจกำหนดค่าด้วย พร็อพเพอร์ตี้: แถว
|
ready |
เริ่มทำงานเมื่อแผนภูมิพร้อมสำหรับการเรียกใช้เมธอดภายนอก หากต้องการโต้ตอบกับแผนภูมิและวิธีเรียกใช้หลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สำหรับเหตุการณ์นี้ก่อนเรียกใช้เมธอด ที่พัก: ไม่มี
|
rollup |
เริ่มทำงานเมื่อผู้ใช้ย้อนกลับไปยังแผนผังต้นไม้ ทริกเกอร์เริ่มต้นคือคลิกขวา
โดยสามารถกำหนดค่าด้วย พร็อพเพอร์ตี้: แถว
|
select |
เริ่มทำงานเมื่อผู้ใช้เจาะลึกหรือม้วนโหนด และเริ่มทำงานเมื่อมีการเรียกใช้เมธอด พร็อพเพอร์ตี้: ไม่มี
|
drilldown (for v50+) |
เริ่มทำงานเมื่อผู้ใช้ลึกเข้าไปในต้นไม้ ทริกเกอร์เริ่มต้นคือการคลิก
โดยสามารถกำหนดค่าได้ด้วย พร็อพเพอร์ตี้: ไม่มี
|
นโยบายข้อมูล
โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ โดยจะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ