ภาพรวม
โครงสร้างข้อมูลที่แสดงเป็นแผนผังข้อมูล ซึ่งแต่ละโหนดมีบุตรได้ตั้งแต่ 0 คนขึ้นไป และระดับบนสุด 1 คน (ยกเว้นรูทที่ไม่มีระดับบนสุด) แต่ละโหนดจะแสดงเป็นสี่เหลี่ยมผืนผ้า มีขนาด และสีตามค่าที่คุณกําหนด ขนาดและสีจะมีค่าเมื่อเทียบกับโหนดอื่นๆ ทั้งหมดในกราฟ คุณระบุจํานวนระดับที่จะแสดงพร้อมกันได้ และเลือกแสดงระดับที่ละเอียดยิ่งขึ้นในรูปแบบคําแนะนํา หากโหนดเป็นโหนดใบไม้ คุณจะระบุขนาดและสีได้ หากโหนดไม่ใช่ใบไม้ ระบบจะแสดงโหนดเป็นกรอบล้อมรอบของใบไม้ ลักษณะการทํางานเริ่มต้นคือการเลื่อนโครงสร้างเมื่อผู้ใช้คลิกโหนดไปทางซ้าย และเลื่อนแผนผังกลับขึ้นเมื่อผู้ใช้คลิกขวาที่กราฟ
ขนาดรวมของกราฟจะอิงตามขนาดขององค์ประกอบที่มีการแทรกไว้ในหน้าเว็บ หากโหนดใบไม้มีชื่อยาวเกินไปจะแสดง
ชื่อจะถูกตัดด้วยจุดไข่ปลา (...)
ตัวอย่าง
<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
(สําหรับ v49 หรือก่อนหน้า) หรือ enableHighlight: true
(สําหรับ v50 ขึ้นไป) จากนั้นคุณจะตั้งค่าสีเพื่อใช้ไฮไลต์องค์ประกอบได้โดยใช้ตัวเลือก 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 โหนด (สี่เหลี่ยมผืนผ้าในกราฟ) แต่ละโหนด (ยกเว้นโหนดรูท) มีโหนดหลัก 1 โหนด แต่ละโหนดมีขนาดและเปลี่ยนสีตามค่าที่เกี่ยวข้องกับโหนดอื่นๆ ที่แสดงอยู่ในปัจจุบัน
ตารางข้อมูลควรมี 4 คอลัมน์ในรูปแบบต่อไปนี้
- คอลัมน์ 0 - [สตริง] รหัสสําหรับโหนดนี้ ซึ่งอาจเป็นสตริง JavaScript ที่ถูกต้อง รวมถึงการเว้นวรรคและความยาวที่สตริงเก็บได้ ค่านี้จะแสดงเป็นส่วนหัวของโหนด
- คอลัมน์ที่ 1 - [สตริง] - รหัสของโหนดหลัก หากเป็นโหนดรูท ให้เว้นช่องนี้ว่างไว้ ใส่รากได้เพียง 1 รูทต่อแผนผังต้นไม้
- คอลัมน์ที่ 2 - [number] - ขนาดของโหนด โดยจะอนุญาตค่าบวก ค่านี้จะกําหนดขนาดของโหนด ซึ่งคํานวณโดยสัมพันธ์กับโหนดอื่นๆ ทั้งหมดที่แสดงอยู่ในขณะนี้ สําหรับโหนดที่ไม่ใช่ใบไม้ ค่านี้จะไม่มีผลและคํานวณจากขนาดของบุตรหลานทั้งหมด
- คอลัมน์ที่ 3 - [ไม่บังคับ, ตัวเลข] - ค่าที่ไม่บังคับที่ใช้ในการคํานวณสีสําหรับโหนดนี้ อนุญาตค่าบวกหรือลบ
ระบบจะคํานวณค่าสีอีกครั้งในสเกลจาก
minColorValue
ถึง maxColorValue
จากนั้นโหนดจะได้รับสีจากการไล่ระดับสีระหว่าง minColor
ถึง maxColor
ตัวเลือกการกําหนดค่า
ชื่อ |
enablehighlight (สําหรับ v50+) |
กําหนดว่าองค์ประกอบควรแสดงเอฟเฟกต์ที่ไฮไลต์หรือไม่ ทริกเกอร์เริ่มต้นคือการวางเมาส์เหนือโฆษณา
กําหนดค่าทริกเกอร์ด้วย eventsConfig ได้ หากตั้งค่าเป็น true การไฮไลต์องค์ประกอบต่างๆ จะระบุได้โดยใช้ตัวเลือก highlightColor ต่างๆ
ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
eventConfig (สําหรับ v50+) |
การกําหนดค่าเหตุการณ์เพื่อทริกเกอร์การโต้ตอบกับแผนผังต้นไม้
รูปแบบสําหรับกําหนดค่าการโต้ตอบ
eventsConfig: {
interaction1: undefined, // or missing
interaction2: [], // disable
interaction3: [
'mouse_event',
'optional_key1',
'optional_key2',
'optional_key3',
'optional_key4'
],
...,
}
หากไม่มีการกําหนดอาร์เรย์การกําหนดค่าที่ขาดหายไปหรือสําหรับการโต้ตอบ ระบบจะใช้ค่าเริ่มต้น
หากการกําหนดค่าเป็นอาร์เรย์ที่ว่างเปล่า ระบบจะปิดใช้การโต้ตอบ
สําหรับการกําหนดค่าที่ถูกต้อง ต้องใช้ mouse_event และต้องเป็นเหตุการณ์เมาส์ที่รองรับ จากนั้นคุณจะมีคีย์ตัวปรับแต่งที่ไม่บังคับได้สูงสุด 4 รายการ
- การโต้ตอบที่รองรับ
- ไฮไลต์ ยกเลิกการไฮไลต์ ควบรวม เจาะลึก
- เหตุการณ์เมาส์ที่รองรับ:
- 'click', 'contextmenu', 'dblclick', 'mouseout', 'mouseover' เมื่อใช้ 'contextmenu' จะคลิกขวาคลิกขวา
- คีย์ตัวปรับแต่งเหตุการณ์เมาส์ที่รองรับ
- 'altKey', 'ctrlKey', 'metaKey', 'shiftKey'
- รับการกําหนดค่าปัจจุบัน:
- วิธีโทร
getEventsConfig()
ตัวอย่างการใช้ Control+Shift+Right_Click เพื่อเลื่อนขึ้น
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น:
{
highlight: ['mouseover'],
unhighlight: ['mouseout'],
rollup: ['contextmenu'], // right-click
drilldown: ['click']
}
|
สีแบบอักษร |
สีข้อความ ระบุค่าสี HTML
ประเภท: สตริง
ค่าเริ่มต้น: #caption
|
ชุดแบบอักษร |
ชุดแบบอักษรที่จะใช้สําหรับข้อความทั้งหมด
ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ
|
ขนาดแบบอักษร |
ขนาดแบบอักษรสําหรับข้อความทั้งหมด เป็นจุด
ประเภท: ตัวเลข
ค่าเริ่มต้น: 12
|
ForceIFrame |
วาดแผนภูมิภายในเฟรมแบบอินไลน์ (โปรดทราบว่าใน IE8 ระบบจะละเว้นตัวเลือกนี้ แผนภูมิ IE8 ทั้งหมดจะวาดใน i-frame)
ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
สีส่วนหัว |
สีของส่วนหัวของแต่ละโหนด ระบุค่าสี HTML
ประเภท: สตริง
ค่าเริ่มต้น: #988f86
|
ความสูงของส่วนหัว |
ความสูงของส่วนส่วนหัวของแต่ละโหนด หน่วยเป็นพิกเซล (อาจเป็น 0)
หมายเลขประเภท
ค่าเริ่มต้น: 0
|
ส่วนหัวสีไฮไลต์ |
สีของส่วนหัวของโหนดที่วางเมาส์เหนือ ระบุค่าสี HTML หรือ Null
หากเป็น Null ค่านี้จะheaderColor สว่างขึ้น 35%
ประเภท: สตริง
ค่าเริ่มต้น: Null
|
highlightOnMouseOver (เลิกใช้งานแล้วสําหรับ v50+) |
เลิกใช้งานแล้วสําหรับ v50+ สําหรับ v50 ขึ้นไป โปรดใช้ enableHighlight
กําหนดว่าองค์ประกอบควรแสดงเอฟเฟกต์ที่ไฮไลต์เมื่อวางเมาส์เหนือองค์ประกอบหรือไม่ หากตั้งค่าเป็น true การไฮไลต์องค์ประกอบต่างๆ จะระบุได้โดยใช้ตัวเลือก highlightColor ต่างๆ
ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
คําแนะนําความทึบแสง |
เมื่อ maxPostDepth มากกว่า 1 ซึ่งทําให้โหนดที่อยู่ต่ํากว่าความลึกปัจจุบันแสดงขึ้น hintOpacity จะระบุระดับความโปร่งใส ค่านี้ควรอยู่ระหว่าง 0 ถึง 1 ยิ่งค่าสูงเท่าไหร่ โหนดก็จะจางลง
ประเภท: ตัวเลข
ค่าเริ่มต้น: 0.0
|
สีสูงสุด |
สีของสี่เหลี่ยมผืนผ้าที่มีค่าคอลัมน์ 3 เป็น maxColorValue ระบุค่าสี HTML
ประเภท: สตริง
ค่าเริ่มต้น: #00dd00
|
ความลึกสูงสุด |
จํานวนระดับโหนดสูงสุดที่จะแสดงในมุมมองปัจจุบัน ระบบจะแยกระดับลงในระนาบปัจจุบัน หากต้นไม้มีระดับมากกว่านี้ คุณจะต้องเลื่อนขึ้นหรือลงจึงจะเห็น นอกจากนี้ คุณยังดู maxPostDepth ระดับได้จากด้านล่างเป็นสี่เหลี่ยมผืนผ้าร่มรื่นในโหนดเหล่านี้
ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
|
ไฮไลต์สีสูงสุด |
สีไฮไลต์ที่ใช้สําหรับโหนดที่มีค่ามากที่สุดในคอลัมน์ 3 ระบุค่าสี HTML หรือ Null หากเป็น Null ค่านี้จะเป็นค่าของ maxColor ที่สว่างขึ้น 35%
ประเภท: สตริง
ค่าเริ่มต้น: Null
|
ความลึกสูงสุดของโพสต์ |
จํานวนโหนดที่นอกเหนือจาก maxDepth ที่จะแสดงในลักษณะ "แนะนํา"
โหนดคําแนะนําจะแสดงเป็นสี่เหลี่ยมผืนผ้าสีเทาในโหนดที่มีขนาดไม่เกิน maxDepth
ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
|
ค่าสีสูงสุด |
ค่าสูงสุดที่ใช้ได้ในคอลัมน์ 3 ระบบจะตัดค่าทั้งหมดที่มากกว่าค่านี้เป็นค่านี้ หากตั้งค่าเป็น Null ระบบจะตั้งค่าเป็นค่าสูงสุดในคอลัมน์
ประเภท: ตัวเลข
ค่าเริ่มต้น: Null
|
สีกลาง |
สีของสี่เหลี่ยมผืนผ้าที่มีค่าคอลัมน์ 3 อยู่ระหว่าง maxColorValue ถึง minColorValue ระบุค่าสี HTML
ประเภท: สตริง
ค่าเริ่มต้น: #000000
|
ไฮไลต์สีกลาง |
สีไฮไลต์ที่ใช้สําหรับโหนดที่มีค่าคอลัมน์ 3 ใกล้กับค่ามัธยฐานของ minColorValue และ maxColorValue ระบุค่าสี HTML หรือ Null หากเป็น Null ค่านี้จะเป็น midColor ที่สว่างขึ้น 35%
ประเภท: สตริง
ค่าเริ่มต้น: Null
|
สีต่ําสุด |
สีของสี่เหลี่ยมผืนผ้าที่มีค่าคอลัมน์ 3 เป็น minColorValue ระบุค่าสี HTML
ประเภท: สตริง
ค่าเริ่มต้น: #dd0000
|
นาทีไฮไลต์สี |
สีไฮไลต์ที่ใช้สําหรับโหนดที่มีค่าคอลัมน์ 3 ใกล้กับ minColorValue ระบุค่าสี HTML หรือ Null หากเป็น Null ค่านี้จะเป็น minColor ที่สว่างขึ้น 35%
ประเภท: สตริง
ค่าเริ่มต้น: Null
|
ค่าสีต่ําสุด |
ค่าขั้นต่ําที่อนุญาตในคอลัมน์ 3 ระบบจะตัดค่าทั้งหมดที่น้อยกว่าค่านี้เป็นค่านี้ หากตั้งค่าเป็น Null ระบบจะคํานวณเป็นค่าขั้นต่ําในคอลัมน์
ประเภท: ตัวเลข
ค่าเริ่มต้น: Null
|
ไม่มีสี |
สีที่จะใช้สําหรับสี่เหลี่ยมผืนผ้าเมื่อโหนดไม่มีค่าสําหรับคอลัมน์ 3 และโหนดนั้นเป็นใบไม้ (หรือมีเฉพาะใบ) ระบุค่าสี HTML
ประเภท: สตริง
ค่าเริ่มต้น: #000000
|
ไฮไลต์สี |
สีที่จะใช้สําหรับสี่เหลี่ยมผืนผ้าสี "ไม่" เมื่อไฮไลต์ ระบุค่าสี HTML หรือ Null หากเป็น Null ค่า noColor จะสว่างขึ้น 35%
ประเภท: สตริง
ค่าเริ่มต้น: Null
|
แสดงสเกล |
เลือกว่าจะแสดงสเกลการไล่ระดับสีสีจาก minColor เป็น maxColor ที่ด้านบนสุดของแผนภูมิหรือไม่ ระบุจริงเพื่อแสดงสเกล
ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
แสดงเคล็ดลับเครื่องมือ |
จะแสดงเคล็ดลับเครื่องมือไหม
ประเภท: บูลีน
ค่าเริ่มต้น: จริง
|
รูปแบบข้อความ |
ออบเจ็กต์ที่ระบุสไตล์ข้อความสําหรับแผนภูมิบางรายการที่มีข้อความในพื้นที่เนื้อหา เช่น แผนผังต้นไม้ ออบเจ็กต์มีรูปแบบต่อไปนี้
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
color อาจเป็นสตริงสี HTML ใดก็ได้ เช่น 'red' หรือ '#00cc00' โปรดดู fontName และ fontSize
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
title |
ข้อความที่จะแสดงเหนือแผนภูมิ
ประเภท: สตริง
ค่าเริ่มต้น: ไม่มีชื่อ
|
รูปแบบข้อความชื่อ |
ออบเจ็กต์ที่ระบุรูปแบบข้อความชื่อ ออบเจ็กต์มีรูปแบบต่อไปนี้
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
color อาจเป็นสตริงสี HTML ใดก็ได้ เช่น 'red' หรือ '#00cc00' โปรดดู fontName และ fontSize
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
ใช้ค่าเฉลี่ยปานกลางสําหรับการรวม |
ควรใช้ค่าเฉลี่ยที่ถ่วงน้ําหนักสําหรับการรวม
ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
เมธอด
วิธีการ |
draw(data, options) |
วาดแผนภูมิ
ประเภทการคืนสินค้า: ไม่มี
|
getEventsConfig() (for v50+) |
แสดงผลการกําหนดค่าการโต้ตอบปัจจุบัน ใช้เพื่อยืนยันตัวเลือกการกําหนดค่า eventsConfig ได้
ประเภทการแสดงผล: ออบเจ็กต์
{ // An empty array (i.e. []) means the interaction is disabled.
highlight: string[],
unhighlight: string[],
rollup: string[],
drilldown: string[] }
|
getSelection() |
การนํา
getSelection()
แบบมาตรฐานไปใช้ องค์ประกอบที่เลือกคือโหนด เลือกได้ครั้งละ 1 โหนดเท่านั้น
ประเภทการแสดงผล: อาร์เรย์ขององค์ประกอบการเลือก
|
setSelection() |
การนํา
setSelection()
แบบมาตรฐานไปใช้ องค์ประกอบที่เลือกคือโหนด เลือกได้ครั้งละ 1 โหนดเท่านั้น
ประเภทการคืนสินค้า: ไม่มี
|
goUpAndDraw() |
เลื่อนต้นไม้ขึ้น 1 ระดับและวาดใหม่ ไม่เกิดข้อผิดพลาดหากโหนดเป็นโหนดรูท จะเริ่มทํางานโดยอัตโนมัติเมื่อผู้ใช้คลิกขวาที่โหนด
ประเภทการคืนสินค้า: ไม่มี
|
getMaxPossibleDepth() |
แสดงผลความลึกสูงสุดที่เป็นไปได้สําหรับมุมมองปัจจุบัน
ประเภทการแสดงผล: จํานวน
|
clearChart() |
ล้างแผนภูมิและปล่อยทรัพยากรที่จัดสรรไว้ทั้งหมด
ประเภทการคืนสินค้า: ไม่มี
|
เหตุการณ์
โปรดดู
eventsConfig
สําหรับทริกเกอร์เหตุการณ์ที่กําหนดค่าได้
ชื่อ |
onmouseover |
เริ่มทํางานเมื่อผู้ใช้วางเมาส์เหนือโหนด ระบบจะส่งเครื่องจัดการเหตุการณ์ผ่านดัชนีแถวของรายการที่เกี่ยวข้องในตารางข้อมูล
พร็อพเพอร์ตี้: แถว
|
highlight (for v50+) |
เริ่มทํางานเมื่อผู้ใช้ไฮไลต์โหนด ทริกเกอร์เริ่มต้นคือเมาส์โอเวอร์
ซึ่งกําหนดค่าด้วย eventsConfig สําหรับ v50+ ได้ ส่วนเครื่องจัดการเหตุการณ์จะส่งดัชนีแถวของรายการที่เกี่ยวข้องในตารางข้อมูล
พร็อพเพอร์ตี้: แถว
|
onmouseout |
เริ่มทํางานเมื่อผู้ใช้เลื่อนเมาส์ออกจากโหนด ระบบจะส่งเครื่องจัดการเหตุการณ์ผ่านดัชนีแถวของรายการที่เกี่ยวข้องในตารางข้อมูล
พร็อพเพอร์ตี้: แถว
|
unhighlight (for v50+) |
เริ่มทํางานเมื่อผู้ใช้ไฮไลต์โหนดไม่ได้ ทริกเกอร์เริ่มต้นคือเมาส์โอเวอร์
ซึ่งกําหนดค่าด้วย eventsConfig สําหรับ v50+ ได้ ส่วนเครื่องจัดการเหตุการณ์จะส่งดัชนีแถวของรายการที่เกี่ยวข้องในตารางข้อมูล
พร็อพเพอร์ตี้: แถว
|
ready |
เริ่มทํางานเมื่อแผนภูมิพร้อมสําหรับการเรียกเมธอดภายนอก หากต้องการโต้ตอบกับแผนภูมิและวิธีการเรียกใช้หลังจากวาด คุณควรตั้งค่า Listener สําหรับเหตุการณ์นี้ก่อนที่เรียกใช้เมธอด draw และเรียกใช้หลังจากที่เหตุการณ์เริ่มทํางานเท่านั้น
พร็อพเพอร์ตี้: ไม่มี
|
rollup |
เริ่มทํางานเมื่อผู้ใช้นําทางกลับไปยังต้นไม้ ทริกเกอร์เริ่มต้นจะเป็นการคลิกขวา
ซึ่งกําหนดค่าด้วย eventsConfig สําหรับ v50 ขึ้นไปได้
พร็อพเพอร์ตี้แถวที่ส่งไปยังเครื่องจัดการเหตุการณ์คือแถวของโหนดที่ผู้ใช้ใช้
จาก ไม่ใช่แถวที่ผู้ใช้ใช้ไปยัง
พร็อพเพอร์ตี้: แถว
|
select |
เริ่มทํางานเมื่อผู้ใช้เจาะลึก หรือควบรวมโหนด เริ่มทํางานเมื่อมีการเรียกใช้เมธอด setSelection() หรือ goUpAndDraw() ด้วย
หากต้องการดูโหนดที่เลือก ให้โทรหา getSelection()
พร็อพเพอร์ตี้: ไม่มี
|
drilldown (for v50+) |
เริ่มทํางานเมื่อผู้ใช้เดินลึกเข้าไปในต้นไม้ กําลังทริกเกอร์เริ่มต้น
ซึ่งกําหนดค่าด้วย eventsConfig สําหรับ v50+ ได้ หากต้องการทราบว่ามีการคลิกโหนดใด โปรดเรียกใช้ getSelection()
พร็อพเพอร์ตี้: ไม่มี
|
นโยบายข้อมูล
โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ ทั้งนี้จะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ