แผนภาพ Sankey

  1. ภาพรวม
  2. ตัวอย่างง่ายๆ
  3. Sankey แบบหลายระดับ
  4. การควบคุมสี
  5. การปรับแต่งแบบอักษร
  6. การปรับแต่งโหนด
  7. กำลังโหลด
  8. รูปแบบข้อมูล
  9. ตัวเลือกการกำหนดค่า
  10. เมธอด
  11. เหตุการณ์
  12. นโยบายข้อมูล

ภาพรวม

แผนภาพ Sankey คือภาพที่ใช้แสดงโฟลว์จากชุดค่าหนึ่งไปยังอีกชุดหนึ่ง สิ่งที่เชื่อมต่ออยู่เรียกว่าโหนด และการเชื่อมต่อเรียกว่าลิงก์ Sankey เหมาะสำหรับเมื่อคุณต้องการแสดงการแมปแบบหลายต่อหลายระหว่าง 2 โดเมน (เช่น มหาวิทยาลัยและมหาวิทยาลัย) หรือหลายเส้นทางผ่านชุดขั้นตอน (เช่น Google Analytics ใช้ sankey เพื่อแสดงว่าการเข้าชมจากหน้าเว็บไปยังหน้าอื่นๆ ในเว็บไซต์) อย่างไร

หากอยากรู้เพิ่มเติม พวกเขาตั้งชื่อตามกัปตันแซนคีย์ ผู้สร้างแผนภาพประสิทธิภาพของเครื่องยนต์ไอน้ำซึ่งใช้ลูกศรที่มีความกว้างตามสัดส่วนของการสูญเสียความร้อน

หมายเหตุ: แผนภูมิ Sankey อาจอยู่ระหว่างการแก้ไขอย่างมากใน Google แผนภูมิรุ่นต่อๆ ไป

แผนภาพ Sankey จะแสดงในเบราว์เซอร์โดยใช้ SVG หรือ VML ขึ้นอยู่กับว่าแบบใดเหมาะกับเบราว์เซอร์ของผู้ใช้ โค้ดเลย์เอาต์ sankey ของ Google ได้มาจากโค้ดเลย์เอาต์ Sankey ของ D3

หมายเหตุ: แผนภูมิ Sankey ของ Google ไม่พร้อมใช้งานใน Microsoft Internet Explorer 8 และเวอร์ชันก่อนหน้า

ตัวอย่างง่ายๆ

สมมติว่าคุณมี 2 หมวดหมู่ ได้แก่ A และ B ซึ่งเชื่อมต่อกับหมวดหมู่อื่นๆ อีก 3 หมวดหมู่ ได้แก่ X, Y และ Z การเชื่อมโยงเหล่านั้นบางส่วน จะหนักกว่ารายการอื่นๆ เช่น B มีการเชื่อมต่อกับ X ที่บางและมีการเชื่อมต่อกับ Y ที่หนากว่า

ลองวางเมาส์เหนือลิงก์ใดลิงก์หนึ่งเพื่อไฮไลต์การเชื่อมต่อ

ในการสร้างแผนภูมิ Sankey ให้ระบุชุดของแถว โดยแต่ละชุดจะมีข้อมูลการเชื่อมต่อ 1 รายการดังนี้ "จาก" "ถึง" และ "น้ำหนัก" จากนั้นใช้เมธอด google.visualization.Sankey() เพื่อเริ่มต้นแผนภูมิ แล้วใช้เมธอด draw() เพื่อแสดงผล ดังนี้

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['sankey']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'From');
        data.addColumn('string', 'To');
        data.addColumn('number', 'Weight');
        data.addRows([
          [ 'A', 'X', 5 ],
          [ 'A', 'Y', 7 ],
          [ 'A', 'Z', 6 ],
          [ 'B', 'X', 2 ],
          [ 'B', 'Y', 9 ],
          [ 'B', 'Z', 4 ]
        ]);

        // Sets chart options.
        var options = {
          width: 600,
        };

        // Instantiates and draws our chart, passing in some options.
        var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="sankey_basic" style="width: 900px; height: 300px;"></div>
  </body>
</html>

หมายเหตุ: หลีกเลี่ยงรอบในข้อมูล: หาก A ลิงก์กับตัวเอง หรือลิงก์ไปยัง B ซึ่งลิงก์กับ C ซึ่งลิงก์ไปยัง A แผนภูมิจะไม่แสดง

Sankey แบบหลายระดับ

คุณสามารถสร้างแผนภูมิ Sankey ที่มีการเชื่อมต่อหลายระดับได้ดังนี้

แผนภูมิ Sankey จะเพิ่มระดับเพิ่มเติมตามความจำเป็น ซึ่งจะจัดวางแผนภูมิเหล่านั้นโดยอัตโนมัติ ต่อไปนี้คือรหัสที่สมบูรณ์สำหรับแผนภูมิด้านบน

<html>
<body>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>

<script type="text/javascript">
  google.charts.load("current", {packages:["sankey"]});
  google.charts.setOnLoadCallback(drawChart);
   function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Weight');
    data.addRows([
       [ 'Brazil', 'Portugal', 5 ],
       [ 'Brazil', 'France', 1 ],
       [ 'Brazil', 'Spain', 1 ],
       [ 'Brazil', 'England', 1 ],
       [ 'Canada', 'Portugal', 1 ],
       [ 'Canada', 'France', 5 ],
       [ 'Canada', 'England', 1 ],
       [ 'Mexico', 'Portugal', 1 ],
       [ 'Mexico', 'France', 1 ],
       [ 'Mexico', 'Spain', 5 ],
       [ 'Mexico', 'England', 1 ],
       [ 'USA', 'Portugal', 1 ],
       [ 'USA', 'France', 1 ],
       [ 'USA', 'Spain', 1 ],
       [ 'USA', 'England', 5 ],
       [ 'Portugal', 'Angola', 2 ],
       [ 'Portugal', 'Senegal', 1 ],
       [ 'Portugal', 'Morocco', 1 ],
       [ 'Portugal', 'South Africa', 3 ],
       [ 'France', 'Angola', 1 ],
       [ 'France', 'Senegal', 3 ],
       [ 'France', 'Mali', 3 ],
       [ 'France', 'Morocco', 3 ],
       [ 'France', 'South Africa', 1 ],
       [ 'Spain', 'Senegal', 1 ],
       [ 'Spain', 'Morocco', 3 ],
       [ 'Spain', 'South Africa', 1 ],
       [ 'England', 'Angola', 1 ],
       [ 'England', 'Senegal', 1 ],
       [ 'England', 'Morocco', 2 ],
       [ 'England', 'South Africa', 7 ],
       [ 'South Africa', 'China', 5 ],
       [ 'South Africa', 'India', 1 ],
       [ 'South Africa', 'Japan', 3 ],
       [ 'Angola', 'China', 5 ],
       [ 'Angola', 'India', 1 ],
       [ 'Angola', 'Japan', 3 ],
       [ 'Senegal', 'China', 5 ],
       [ 'Senegal', 'India', 1 ],
       [ 'Senegal', 'Japan', 3 ],
       [ 'Mali', 'China', 5 ],
       [ 'Mali', 'India', 1 ],
       [ 'Mali', 'Japan', 3 ],
       [ 'Morocco', 'China', 5 ],
       [ 'Morocco', 'India', 1 ],
       [ 'Morocco', 'Japan', 3 ]
    ]);

    // Set chart options
    var options = {
      width: 600,
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
    chart.draw(data, options);
   }
</script>
</body>
</html>

การควบคุมสี

แผนภูมิ Sankey มีความสามารถในการกำหนดสีที่กำหนดเองสำหรับโหนดและลิงก์ คุณจะกำหนดชุดสีที่กำหนดเองให้กับทั้งโหนดและลิงก์ได้โดยใช้ตัวเลือก colors (sankey.node.colors และ sankey.link.colors ตามลำดับ) และยังกำหนดโหมดสีต่างๆ ได้โดยใช้ตัวเลือก colorMode

หากไม่มีการปรับแต่งสี ระบบจะใช้ชุดสีดังกล่าวเป็นค่าเริ่มต้น จากชุดสีมาตรฐาน

    var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
                  '#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];

    var options = {
      height: 400,
      sankey: {
        node: {
          colors: colors
        },
        link: {
          colorMode: 'gradient',
          colors: colors
        }
      }
    };

คุณควบคุมสีของลิงก์ โหนด และป้ายกำกับได้ด้วยตัวเลือกการกำหนดค่า ในส่วนนี้เราจะเลือก 3 รายการที่มีโทนสีเดียวกัน แต่มีความสว่างต่างกัน

ตัวเลือกเหล่านั้นจะมีลักษณะดังนี้

    var options = {
      width: 600,
      sankey: {
        link: { color: { fill: '#d799ae' } },
        node: { colors: [ '#a61d4c' ],
                label: { color: '#871b47' } },
      }
    };

คุณยังควบคุมความโปร่งใสของลิงก์ได้ด้วยตัวเลือก sankey.link.color.fillOpacity ดังนี้

    var options = {
      width: 600,
      sankey: {
        link: { color: { fill: '#d799ae', fillOpacity: 0.8 } },
        node: { colors: [ '#a61d4c' ],
                label: { color: '#871b47' } },
      }
    };

หากต้องการสร้างเส้นขอบรอบลิงก์ ให้ใช้ตัวเลือก sankey.link.color.stroke และ sankey.link.color.strokeWidth ดังนี้

ระบุสีของเส้นโครงร่างได้ในรูปแบบ RGB หรือตามชื่อภาษาอังกฤษ

    var options = {
      width: 750,
      height: 400,
      sankey: {
        node: { colors: [ '#a61d4c' ] },
        link: { color: { stroke: 'black', strokeWidth: 1 } },
      }
    };

การปรับแต่งป้ายกำกับ

คุณปรับแต่งข้อความในแผนภูมิ Sankey ได้โดยใช้ sankey.node.label.fontName และเพื่อน ดังนี้

ข้อความตัวเลือกสำหรับแผนภูมิด้านบนมีดังนี้

    var options = {
      width: 600,
      sankey: {
        node: { label: { fontName: 'Times-Roman',
                         fontSize: 14,
                         color: '#871b47',
                         bold: true,
                         italic: true } } },
    };

คุณปรับตำแหน่งของป้ายกำกับที่สัมพันธ์กับโหนดได้ด้วยตัวเลือก sankey.node.labelPadding ดังนี้

ในแผนภูมิด้านบน เราได้เพิ่มระยะห่างจากขอบ 30 พิกเซลระหว่างป้ายกำกับและโหนด

    var options = {
      width: 600,
      sankey: { node: { labelPadding: 30 } },
    };

การปรับโหนด

คุณควบคุมความกว้างของโหนดได้ด้วย sankey.node.width ดังนี้

ด้านบน เราตั้งค่าความกว้างของโหนดเป็น 2

    var options = {
      width: 600,
      sankey: { node: { width: 2 } },
    };

คุณปรับระยะห่างระหว่างโหนดต่างๆ ได้ด้วย sankey.node.nodePadding ดังนี้

ในแผนภูมิด้านบน เราตั้งค่า sankey.node.nodePadding เป็น 80

    var options = {
      width: 900,
      sankey: { node: { nodePadding: 80 } },
    };

กำลังโหลด

ชื่อแพ็กเกจ google.charts.load คือ "sankey": 

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

ชื่อคลาสของการแสดงภาพคือ google.visualization.Sankey 

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

รูปแบบข้อมูล

แถว: แต่ละแถวในตารางแสดงการเชื่อมต่อระหว่างป้ายกำกับ 2 ป้าย คอลัมน์ที่ 3 บ่งชี้ความแรงของการเชื่อมต่อนั้น และจะแสดงในความกว้างของเส้นทางระหว่างป้ายกำกับ

คอลัมน์:

  คอลัมน์ 0 คอลัมน์ที่ 1 คอลัมน์ที่ 2 ... คอลัมน์ N (ไม่บังคับ)
จุดประสงค์ในการใช้: แหล่งที่มา ปลายทาง ค่า ... บทบาทที่ไม่บังคับ
ประเภทข้อมูล: string string ตัวเลข ...
บทบาท: โดเมน โดเมน ข้อมูล ...
บทบาทของคอลัมน์ที่ไม่บังคับมีดังนี้

ไม่มี

ไม่มี

ไม่มี

 ...

 

ตัวเลือกการกำหนดค่า

ชื่อ
forceIFrame

วาดแผนภูมิภายในเฟรมแบบอินไลน์ (โปรดทราบว่าใน IE8 ตัวเลือกนี้จะถูกละเว้น และแผนภูมิ IE8 ทั้งหมดวาดใน i-frame)

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
ส่วนสูง

ความสูงของแผนภูมิเป็นพิกเซล

ประเภท: ตัวเลข
ค่าเริ่มต้น: ความสูงขององค์ประกอบที่มีอยู่
sankey.iterations

เมื่อใช้ sankey แบบหลายระดับ ในบางครั้งคุณอาจดูไม่ชัดเจนว่าควรวางโหนดอย่างไรเพื่อให้อ่านได้ดีที่สุด เครื่องมือเลย์เอาต์ D3 จะทำการทดลองกับเลย์เอาต์โหนดต่างๆ โดยจะหยุดลงเมื่อมีการพยายาม sankey.iterations ครั้ง ยิ่งตัวเลขนี้สูงเท่าใด เลย์เอาต์ของ Sankey ที่ซับซ้อนก็ยิ่งน่าสนใจมากขึ้นเท่านั้น แต่ก็มีค่าใช้จ่ายด้วย เนื่องจาก Sankey จะใช้เวลาในการแสดงผลนานกว่า ในทางตรงกันข้าม ยิ่งตัวเลขนี้สั้น แผนภูมิก็จะแสดงผลเร็วขึ้น

ประเภท: จำนวนเต็ม
ค่าเริ่มต้น: 32
sankey.link

ควบคุมแอตทริบิวต์ของการเชื่อมต่อระหว่างโหนด ปัจจุบันแอตทริบิวต์ทั้งหมดเกี่ยวข้องกับสี 

sankey: {
  link: {
    color: {
      fill: '#efd',     // Color of the link.
      fillOpacity: 0.8, // Transparency of the link.
      stroke: 'black',  // Color of the link border.
      strokeWidth: 1    // Thickness of the link border (default 0).
    },
    colors: [
      '#a6cee3',        // Custom color palette for sankey links.
      '#1f78b4',        // Nodes will cycle through this palette
      '#b2df8a',        // giving the links for that node the color.
      '#33a02c'
    ]
  }
}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
sankey.link.colorMode

ตั้งค่าโหมดสีสำหรับลิงก์ระหว่างโหนด ค่าที่เป็นไปได้มีดังนี้

  • 'source' - สีของโหนดแหล่งที่มาจะใช้สำหรับการลิงก์ไปยังโหนดเป้าหมายทั้งหมด
  • 'target' - สีของโหนดเป้าหมายจะใช้สำหรับการลิงก์ไปยังโหนดต้นทาง
  • 'gradient' - ลิงก์ระหว่างโหนดแหล่งที่มาและโหนดเป้าหมายจะเป็นสีตามการไล่ระดับสีจากสีของโหนดต้นทางไปยังสีของโหนดเป้าหมาย
  • 'none' - ตัวเลือกเริ่มต้น โดยจะมีการตั้งค่าสีลิงก์เป็นค่าเริ่มต้น (หรือสีตามที่ระบุโดยตัวเลือก sankey.link.color.fill และ sankey.link.color.fillOpacity)

ตัวเลือกนี้จะลบล้าง sankey.link.color

ประเภท: สตริง
ค่าเริ่มต้น: "none"
sankey.node

ควบคุมแอตทริบิวต์ของโหนด (แท่งแนวตั้งระหว่างลิงก์) ดังนี้

sankey: {
  node: {
    label: {
      fontName: 'Times-Roman',
      fontSize: 12,
      color: '#000',
      bold: true,
      italic: false
    },
    interactivity: true, // Allows you to select nodes.
    labelPadding: 6,     // Horizontal distance between the label and the node.
    nodePadding: 10,     // Vertical distance between nodes.
    width: 5,            // Thickness of the node.
    colors: [
      '#a6cee3',         // Custom color palette for sankey nodes.
      '#1f78b4',         // Nodes will cycle through this palette
      '#b2df8a',         // giving each node its own color.
      '#33a02c'
    ]
  }
}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
sankey.node.colorMode

ตั้งค่าโหมดการระบายสีสำหรับโหนด Sankey ค่าที่เป็นไปได้มีดังนี้

  • 'unique' - แต่ละโหนดจะมีสีไม่ซ้ำกัน
ประเภท: สตริง
ค่าเริ่มต้น: "ไม่ซ้ำกัน"
เคล็ดลับเครื่องมือ

ออบเจ็กต์ที่มีสมาชิกเพื่อกำหนดค่าองค์ประกอบเคล็ดลับเครื่องมือที่หลากหลาย หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบลิเทอรัลของออบเจ็กต์ได้ดังที่แสดงที่นี่ 

{textStyle: {color: '#FF0000'}, showColorCode: true}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
tooltip.isHtml

หากตั้งค่าเป็น "จริง" ให้ใช้เคล็ดลับเครื่องมือที่แสดงผล HTML (แทนการแสดงผล SVG) ดูรายละเอียดเพิ่มเติมได้ที่การปรับแต่งเนื้อหาเคล็ดลับเครื่องมือ

หมายเหตุ: การแสดงข้อมูลผ่านภาพแผนภูมิลูกโป่งไม่รองรับการปรับแต่งเนื้อหาเคล็ดลับเครื่องมือ HTML ผ่านบทบาทข้อมูลในคอลัมน์เคล็ดลับเครื่องมือ

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
tooltip.textStyle

ออบเจ็กต์ที่ระบุรูปแบบข้อความของเคล็ดลับเครื่องมือ ออบเจ็กต์มีรูปแบบดังนี้

{ 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)

วาดแผนภูมิ แผนภูมิยอมรับการเรียกใช้เมธอดเพิ่มเติมหลังจากที่เหตุการณ์ ready เริ่มทํางานแล้วเท่านั้น Extended description.

ประเภทการคืนสินค้า: ไม่มี
getBoundingBox(id)

แสดงผลออบเจ็กต์ที่มีด้านซ้าย ด้านบน ความกว้าง และความสูงขององค์ประกอบแผนภูมิ id ยังไม่มีการบันทึกรูปแบบสำหรับ id (เป็นค่าที่แสดงผลของเครื่องจัดการเหตุการณ์) แต่มีตัวอย่างบางส่วนดังนี้

var cli = chart.getChartLayoutInterface();

ความสูงของพื้นที่แผนภูมิ
cli.getBoundingBox('chartarea').height
ความกว้างของแท่งที่ 3 ในแผนภูมิแท่งหรือแผนภูมิคอลัมน์ชุดแรก
cli.getBoundingBox('bar#0#2').width
กล่องล้อมรอบของลิ่มที่ 5 ของแผนภูมิวงกลม
cli.getBoundingBox('slice#4')
ช่องขอบเขตของข้อมูลแผนภูมิของแผนภูมิแนวตั้ง (เช่น คอลัมน์)
cli.getBoundingBox('vAxis#0#gridline')
กล่องขอบเขตของข้อมูลแผนภูมิของแผนภูมิแนวนอน (เช่น แท่ง)
cli.getBoundingBox('hAxis#0#gridline')

ค่าจะสัมพันธ์กับคอนเทนเนอร์ของแผนภูมิ เรียกใช้หลังจากที่มีการวาดแผนภูมิ

ประเภทผลลัพธ์: ออบเจ็กต์
getSelection()

แสดงผลอาร์เรย์ของเอนทิตีแผนภูมิที่เลือก เอนทิตีที่เลือกได้คือแท่ง รายการคำอธิบาย และหมวดหมู่ สำหรับแผนภูมินี้ คุณสามารถเลือกเอนทิตีได้เพียง 1 รายการในช่วงเวลาหนึ่งๆ Extended description

ประเภทผลลัพธ์: อาร์เรย์ขององค์ประกอบการเลือก
setSelection()

เลือกเอนทิตีแผนภูมิที่ระบุ ยกเลิกรายการที่เลือกก่อนหน้า เอนทิตีที่เลือกได้คือแท่ง รายการคำอธิบาย และหมวดหมู่ สำหรับแผนภูมินี้ คุณสามารถเลือกเอนทิตีได้ครั้งละ 1 รายการเท่านั้น Extended description

ประเภทการคืนสินค้า: ไม่มี
clearChart()

ล้างแผนภูมิ และปล่อยทรัพยากรที่จัดสรรทั้งหมด

ประเภทการคืนสินค้า: ไม่มี

กิจกรรม

ชื่อ
error

เริ่มทำงานเมื่อเกิดข้อผิดพลาดขณะพยายามแสดงผลแผนภูมิ

พร็อพเพอร์ตี้: รหัส ข้อความ
onmouseover

เริ่มทำงานเมื่อผู้ใช้วางเมาส์เหนือเอนทิตีที่มีภาพ ส่งกลับดัชนีแถวและคอลัมน์ขององค์ประกอบตารางข้อมูลที่เกี่ยวข้อง แท่งกราฟสัมพันธ์กับเซลล์ในตารางข้อมูล รายการคำอธิบายในคอลัมน์ (ดัชนีแถวเป็นค่าว่าง) และหมวดหมู่ของแถว (ดัชนีคอลัมน์เป็นค่าว่าง)

พร็อพเพอร์ตี้: แถว คอลัมน์
onmouseout

เริ่มทำงานเมื่อผู้ใช้เลื่อนเมาส์ออกห่างจากองค์ประกอบภาพ ส่งกลับดัชนีแถวและคอลัมน์ขององค์ประกอบตารางข้อมูลที่เกี่ยวข้อง แท่งกราฟสัมพันธ์กับเซลล์ในตารางข้อมูล รายการคำอธิบายในคอลัมน์ (ดัชนีแถวเป็นค่าว่าง) และหมวดหมู่ของแถว (ดัชนีคอลัมน์เป็นค่าว่าง)

พร็อพเพอร์ตี้: แถว คอลัมน์
ready

แผนภูมิพร้อมสำหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีเรียกใช้หลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สำหรับเหตุการณ์นี้ก่อนเรียกใช้เมธอด draw และเรียกใช้หลังจากที่เหตุการณ์เริ่มทำงานแล้วเท่านั้น

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

เริ่มทำงานเมื่อผู้ใช้คลิกเอนทิตีภาพ หากต้องการดูสิ่งที่เลือก โปรดโทรหา getSelection()

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

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

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