แผนภูมิทรีแม็ป

  1. ภาพรวม
  2. ตัวอย่าง
  3. ไฮไลต์
  4. เคล็ดลับเครื่องมือ
  5. กำลังโหลด
  6. รูปแบบข้อมูล
  7. ตัวเลือกการกําหนดค่า
  8. เมธอด
  9. เหตุการณ์
  10. นโยบายข้อมูล

ภาพรวม

โครงสร้างข้อมูลที่แสดงเป็นแผนผังข้อมูล ซึ่งแต่ละโหนดมีบุตรได้ตั้งแต่ 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()

พร็อพเพอร์ตี้: ไม่มี

นโยบายข้อมูล

โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ ทั้งนี้จะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ