แผนภูมิคำอธิบายประกอบ

ภาพรวม

แผนภูมิคําอธิบายประกอบเป็นแผนภูมิเส้นแบบอนุกรมเวลาแบบอินเทอร์แอกทีฟที่รองรับคําอธิบายประกอบ โปรดทราบว่าตอนนี้ไทม์ไลน์ที่มีคําอธิบายประกอบจะใช้แผนภูมิคําอธิบายประกอบโดยอัตโนมัติ

การแจ้งเตือนความสับสน: ปัจจุบัน Google Annotation Chart แตกต่างจากคําอธิบายประกอบที่แผนภูมิอื่นๆ ของ Google (รวมถึงพื้นที่ บาร์ คอลัมน์ คอมโบ บรรทัด และแผนภูมิกระจาย) รองรับ ในแผนภูมิเหล่านี้ คําอธิบายประกอบจะได้รับการระบุไว้ในคอลัมน์ที่แยกข้อมูลได้ และจะแสดงเป็นข้อความสั้นๆ ซึ่งผู้ใช้วางเมาส์เหนือเพื่อดูข้อความคําอธิบายประกอบแบบเต็มได้ ในทางตรงกันข้าม แผนภูมิหมายเหตุจะแสดงคําอธิบายประกอบทั้งหมดทางด้านขวามือ ดังที่แสดงด้านล่าง

ตัวอย่าง

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

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Kepler-22b mission');
        data.addColumn('string', 'Kepler title');
        data.addColumn('string', 'Kepler text');
        data.addColumn('number', 'Gliese 163 mission');
        data.addColumn('string', 'Gliese title');
        data.addColumn('string', 'Gliese text');
        data.addRows([
          [new Date(2314, 2, 15), 12400, undefined, undefined,
                                  10645, undefined, undefined],
          [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
                                  12374, undefined, undefined],
          [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
                                  15766, 'Gallantors', 'First Encounter'],
          [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
                                  34334, 'Gallantors', 'Statement of shared principles'],
          [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
                                  66467, 'Gallantors', 'Mysteries revealed'],
          [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
                                  79463, 'Gallantors', 'Omniscience achieved']
        ]);

        var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

        var options = {
          displayAnnotations: true
        };

        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id='chart_div' style='width: 900px; height: 600px;'></div>
  </body>
</html>

กําลังโหลด

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

  google.charts.load("current", {packages: ['annotationchart']});

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

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

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

คุณแสดงเส้นในแผนภูมิได้อย่างน้อย 1 เส้น แต่ละแถวแสดงแทนตําแหน่ง X ในแผนภูมิ กล่าวคือ เวลาที่ระบุ แต่ละบรรทัดอธิบายด้วยชุดคอลัมน์ 1-3 คอลัมน์

  • คอลัมน์แรกเป็นประเภท date หรือ datetime และระบุค่า X ของจุดในแผนภูมิ หากคอลัมน์นี้เป็นประเภท date (ไม่ใช่ datetime) ความละเอียดที่เล็กที่สุดในแกน X จะเป็น 1 วัน
  • จากนั้นแต่ละแถวของข้อมูลจะอธิบายโดยชุดคอลัมน์เพิ่มเติม 1-3 คอลัมน์ตามที่อธิบายไว้ที่นี่
    • ค่า Y - [จําเป็น ตัวเลข] คอลัมน์แรกในแต่ละชุดจะอธิบายค่าของบรรทัด ณ เวลาที่เกี่ยวข้องจากคอลัมน์แรก ป้ายกํากับคอลัมน์จะแสดงอยู่ในแผนภูมิเป็นชื่อของบรรทัดนั้น
    • ชื่อหมายเหตุ - [ไม่บังคับ, สตริง] หากคอลัมน์สตริงอยู่หลังคอลัมน์ค่าและตัวเลือก displayAnnotations เป็นจริง คอลัมน์นี้จะมีชื่อย่อที่อธิบายจุดนี้ ตัวอย่างเช่น หากเส้นนี้แสดงถึงอุณหภูมิในบราซิลและตัวเลขนี้เป็นตัวเลขที่สูงมาก ชื่ออาจเป็น "วันที่ร้อนที่สุดในระเบียน"
    • ข้อความหมายเหตุ - [สตริงที่ไม่บังคับ] หากมีคอลัมน์สตริงที่ 2 สําหรับชุดนี้ ระบบจะใช้ค่าเซลล์เป็นข้อความอธิบายเพิ่มเติมสําหรับจุดนี้ คุณต้องตั้งตัวเลือก displayAnnotations เป็น "จริง" จึงจะใช้คอลัมน์นี้ได้ คุณใช้แท็ก HTML ได้ หากตั้งค่า allowHtml เป็น true ซึ่งหมายความว่าไม่มีขีดจํากัดขนาด โปรดทราบว่ารายการที่ยาวเกินไปอาจล้นส่วนการแสดงผล คุณไม่จําเป็นต้องใช้คอลัมน์นี้แม้ว่าจะมีคอลัมน์ชื่อคําอธิบายประกอบสําหรับจุดนี้ก็ตาม แผนภูมิไม่ใช้ป้ายกํากับคอลัมน์ เช่น หากนี่เป็นวันที่อากาศร้อนที่สุดในจุดบันทึกเสียง ให้พูดประมาณว่า "วันถัดไปที่ใกล้ที่สุดอากาศเย็นกว่า 10 องศา"

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

ชื่อ
AllowHtml

หากตั้งค่าเป็น "จริง" ข้อความคําอธิบายประกอบที่มีแท็ก HTML จะแสดงผลเป็น HTML

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

คําต่อท้ายที่จะเพิ่มให้กับค่าทั้งหมดในคําอธิบาย ทําเครื่องหมายในแกนแนวตั้ง

ประเภท: สตริง
ค่าเริ่มต้น: ไม่มี
ความกว้างคําอธิบายประกอบ

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: 25
สี

สีที่จะใช้สําหรับเส้นแผนภูมิและป้ายกํากับ อาร์เรย์ของสตริง องค์ประกอบแต่ละรายการเป็นสตริงในรูปแบบสี HTML ที่ถูกต้อง เช่น "red" หรือ "#00cc00"

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

รูปแบบที่ใช้แสดงข้อมูลวันที่ที่มุมขวาบน รูปแบบของช่องนี้ตามที่ระบุโดยคลาส java SimpleDateFormat

ประเภท: สตริง
ค่าเริ่มต้น: วว ดด วว ปปปป หรือ HH:mm วว ปปปป ปปปป โดยขึ้นอยู่กับประเภทของคอลัมน์แรก (วันที่ หรือวันที่และเวลา ตามลําดับ)
คําอธิบายประกอบดิสเพลย์

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

ประเภท: บูลีน
ค่าเริ่มต้น: จริง
ตัวกรองคําอธิบายประกอบในเครือข่ายดิสเพลย์

หากตั้งค่าเป็น "จริง" แผนภูมิจะแสดงตัวควบคุมตัวกรองเพื่อกรองคําอธิบายประกอบ ใช้ตัวเลือกนี้เมื่อมีคําอธิบายประกอบหลายรายการ

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

จะแสดงตัวคั่นบาร์ขนาดเล็ก ( | ) ระหว่างค่าชุดกับวันที่ในคําอธิบายหรือไม่ โดยค่า "จริง" แปลว่าใช่

ประเภท: บูลีน
ค่าเริ่มต้น: จริง
ค่าที่แน่นอนแบบดิสเพลย์

ไม่ว่าจะแสดงค่าขนาดที่สั้นและปัดเศษที่ด้านบนของกราฟเพื่อประหยัดพื้นที่หรือไม่ ค่า "เท็จ" บ่งบอกว่าอาจเป็นไปได้ เช่น หากตั้งค่าเป็นเท็จ 56123.45 อาจแสดงเป็น 56.12k

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
โฆษณาแบบดิสเพลย์ LegendDots

เลือกว่าจะแสดงจุดถัดจากค่าในข้อความคําอธิบายหรือไม่ โดยที่เครื่องหมาย "ใช่" แปลว่าใช่

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

ระบุว่าจะแสดงค่าที่ไฮไลต์ในคําอธิบายหรือไม่ โดยที่ค่า "จริง" แปลว่าใช่

ประเภท: บูลีน
ค่าเริ่มต้น: จริง
ตัวเลือกการแสดงผลช่วง

แสดงพื้นที่สําหรับเลือกช่วงการซูม (พื้นที่ที่ด้านล่างของแผนภูมิ) หรือไม่ และเท็จหรือไม่แสดงพื้นที่ที่เลือกสําหรับช่วงการซูม

โครงร่างในตัวเลือกการซูมคือเวอร์ชันการปรับขนาดบันทึกของชุดแรกในแผนภูมิ โดยปรับขนาดให้พอดีกับความสูงของตัวเลือกการซูม

ประเภท: บูลีน
ค่าเริ่มต้น: จริง
แสดงปุ่มซูม

แสดงปุ่มซูม ("1 วัน 5 วัน 1 นาที" หรือไม่) โดย "เท็จ" หมายถึงไม่

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

ตัวเลขตั้งแต่ 0-100 (รวม) ที่ระบุอัลฟ่าของการเติมด้านล่างของทุกกราฟในกราฟ 100 หมายถึงความทึบแสง 100% และ 0 หมายถึงไม่มีการเติมเลย สีเติมเป็นสีเดียวกับเส้นด้านบน

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
ตําแหน่งในตํานาน

จะใส่คําอธิบายสีในแถวเดียวกันด้วยปุ่มซูมและวันที่ ("sameRow") หรือในแถวใหม่ ("newRow")

ประเภท: สตริง
ค่าเริ่มต้น: "sameRow"
สูงสุด

ค่าสูงสุดที่จะแสดงในแกน Y หากจุดข้อมูลสูงสุดมีค่านี้ ระบบจะไม่สนใจการตั้งค่านี้และจะปรับแผนภูมิให้แสดงเครื่องหมายถูกหลักถัดไปเหนือจุดข้อมูลสูงสุด การดําเนินการนี้จะมีความสําคัญสูงกว่าแกน Y สูงสุดที่ scaleType กําหนด

ซึ่งคล้ายกับ maxValue ในแผนภูมิหลัก

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
นาที

ค่าต่ําสุดที่จะแสดงในแกน Y หากจุดข้อมูลขั้นต่ําน้อยกว่าค่านี้ ระบบจะไม่สนใจการตั้งค่านี้ และจะมีการปรับแผนภูมิเพื่อแสดงเครื่องหมายเครื่องหมายถูกถัดไปด้านล่างจุดข้อมูลขั้นต่ํา ซึ่งจะมีความสําคัญเหนือกว่าแกนต่ําสุด Y ที่ scaleType กําหนด

ซึ่งคล้ายกับ minValue ในแผนภูมิหลัก

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
รูปแบบตัวเลข

ระบุรูปแบบตัวเลขที่จะใช้เพื่อจัดรูปแบบค่าที่ด้านบนของกราฟ

รูปแบบควรอยู่ในรูปแบบที่ระบุโดยคลาส java DecimalFormat

  • หากไม่ได้ระบุไว้ ระบบจะใช้รูปแบบเริ่มต้น
  • หากระบุรูปแบบสตริงเดียว ระบบจะใช้สําหรับค่าทั้งหมด
  • หากระบุแผนที่แล้ว คีย์จะเป็นดัชนีชุด (เป็น 0) ของค่า และค่าคือรูปแบบที่จะใช้ในการจัดรูปแบบชุดหนังสือที่ระบุ

    คุณไม่จําเป็นต้องใส่รูปแบบสําหรับทุกๆ ชุดในแผนภูมิ ชุดข้อมูลที่ไม่ระบุจะใช้รูปแบบเริ่มต้น

หากระบุตัวเลือกนี้ ระบบจะไม่สนใจตัวเลือก displayExactValues

ประเภท: สตริงหรือแผนที่ของจํานวน:สตริงคู่
ค่าเริ่มต้น: อัตโนมัติ
คอลัมน์การปรับขนาด

ระบุค่าที่จะแสดงบนเครื่องหมายถูกที่แกน Y ในกราฟ ค่าเริ่มต้นคือมีสเกลเดี่ยวทางด้านขวาซึ่งใช้กับทั้ง 2 ชุด แต่คุณมีแต่ละด้านของกราฟที่ปรับขนาดเป็นค่าชุดที่ต่างกันได้

ตัวเลือกนี้จะใช้ค่าอาร์เรย์ 0 ถึง 3 หลักที่ระบุดัชนี (ตามเลข 0) ของชุดหนังสือเพื่อใช้เป็นค่าสเกล ตําแหน่งที่แสดงค่าเหล่านี้จะขึ้นอยู่กับจํานวนค่าที่รวมอยู่ในอาร์เรย์ของคุณ ดังนี้

  • หากระบุอาร์เรย์ที่ว่างเปล่า แผนภูมิจะไม่แสดงค่า Y ข้างๆ เครื่องหมายถูก
  • หากคุณระบุ 1 ค่า สเกลของชุดข้อมูลที่ระบุจะแสดงทางด้านขวาของแผนภูมิเท่านั้น
  • หากระบุค่า 2 ค่า ระบบจะเพิ่มสเกลของชุดที่สองไว้ทางด้านขวาของแผนภูมิ
  • หากคุณระบุค่า 3 ค่า ระบบจะเพิ่มสเกลของชุดที่ 3 ไว้ตรงกลางแผนภูมิ
  • และจะไม่สนใจค่าใดก็ได้หลังส่วนที่ 3 ในอาร์เรย์

เมื่อแสดงสเกลมากกว่า 1 ขนาด เราขอแนะนําให้ตั้งค่าตัวเลือก scaleType เป็น "ทั้งหมด" หรือ "ขยายใหญ่สุด"

ประเภท: อาร์เรย์ของตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
จัดรูปแบบขนาด

รูปแบบตัวเลขที่ใช้สําหรับป้ายกํากับเครื่องหมายถูก ค่าเริ่มต้นของ '#' จะแสดงเป็นจํานวนเต็ม

ประเภท: สตริง
ค่าเริ่มต้น: "#"
ประเภทการปรับขนาด

กําหนดค่าสูงสุดและต่ําสุดที่แสดงในแกน Y โดยมีตัวเลือกดังต่อไปนี้

  • "maximized" - แกน Y จะครอบคลุมค่าต่ําสุดไปยังค่าสูงสุดของชุดหนังสือ หากคุณมีชุดหนังสือมากกว่า 1 ชุด ให้ใช้แบบเพิ่มจํานวนคลิกสูงสุด
  • "คงที่" [ค่าเริ่มต้น] - แกน Y จะแตกต่างกันไป โดยขึ้นอยู่กับค่าของข้อมูล:
    • หากค่าทั้งหมดเป็น >=0 แกน Y จะอยู่ระหว่าง 0 ถึงค่าข้อมูลสูงสุด
    • หากค่าทั้งหมดเท่ากับ <=0 แกน Y ตั้งแต่ 0 ถึงค่าข้อมูลขั้นต่ํา
    • หากค่าเป็นบวกและลบ แกน Y จะมีช่วงจากค่าสูงสุดในชุดไปจนถึงค่าต่ําสุดของชุด
      สําหรับหนังสือหลายชุด ให้ใช้ "allfixed"
  • "allmaximize" - เหมือนกับ "ขยายใหญ่สุด" แต่ใช้เมื่อแสดงหลายขนาด ระบบจะขยายแผนภูมิทั้ง 2 รายการมากที่สุดภายในสเกลเดียวกัน ซึ่งหมายความว่าระบบจะตีความแผนภูมิหนึ่งผิดไปจากแกน Y แต่การวางเมาส์เหนือแผนภูมิแต่ละชุดจะแสดงค่าที่แท้จริง
  • "allfixed" - "เหมือนกับ" คงที่" แต่ใช้เมื่อแสดงหลายขนาด การตั้งค่านี้จะปรับแต่ละขนาดให้กับชุดหนังสือที่จะใช้ (ใช้ร่วมกับ scaleColumns)

หากคุณระบุตัวเลือกขั้นต่ําและ/หรือสูงสุด ตัวเลือกเหล่านั้นจะมีความสําคัญเหนือกว่าค่าต่ําสุดและสูงสุดที่กําหนดโดยประเภทสเกลของคุณ

ประเภท: สตริง
ค่าเริ่มต้น: "คงที่"
ตาราง

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

var options: {
  table: {
    sortAscending: true,
    sortColumn: 1
  }
};
      
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
window.sortAscending

หากตั้งค่าเป็น true จะเปลี่ยนลําดับตารางคําอธิบายประกอบและแสดงตามลําดับจากน้อยไปมาก

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

ดัชนีคอลัมน์ของตารางคําอธิบายประกอบที่จะจัดเรียงคําอธิบายประกอบ ดัชนีต้องเป็น 0 สําหรับคอลัมน์ป้ายกํากับคําอธิบายประกอบ หรือ 1 สําหรับคอลัมน์ข้อความคําอธิบายประกอบ

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
ความหนา

ตัวเลขตั้งแต่ 0-10 (รวม) ที่ระบุความหนาของเส้น โดยที่ 0 คือด้านที่บางที่สุด

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
ซูมเวลาสิ้นสุด

กําหนดวันที่สิ้นสุด/เวลาของช่วงการซูมที่เลือก

ประเภท: วันที่
ค่าเริ่มต้น: ไม่มี
ซูมเวลาเริ่มต้น

กําหนดวันที่เริ่มต้น/เวลาของช่วงการซูมที่เลือก

ประเภท: วันที่
ค่าเริ่มต้น: ไม่มี

เมธอด

วิธีการ
clearChart()

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

ประเภทการคืนสินค้า: ไม่มี
draw(data, options, state)

วาดแผนภูมิ

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

เรียกแฮนเดิลไปยังองค์ประกอบคอนเทนเนอร์ที่มีแผนภูมิคําอธิบายประกอบ

ประเภทการแสดงผล: จัดการสําหรับองค์ประกอบ DOM
getSelection()

การใช้งาน getSelection() มาตรฐาน องค์ประกอบที่เลือกคือองค์ประกอบของเซลล์ เลือกผู้ใช้ได้เพียง 1 เซลล์ต่อครั้งเท่านั้น

ประเภทการแสดงผล: อาร์เรย์ขององค์ประกอบการเลือก
getVisibleChartRange()

แสดงผลออบเจ็กต์ที่มีพร็อพเพอร์ตี้ start และ end ซึ่งแต่ละรายการเป็นออบเจ็กต์ Date ที่แสดงการเลือกเวลาปัจจุบัน

ประเภทการแสดงผล: ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ start และ end
hideDataColumns(columnIndexes)

ซ่อนชุดข้อมูลที่ระบุจากแผนภูมิ ยอมรับพารามิเตอร์ 1 รายการซึ่งอาจเป็นตัวเลขหรืออาร์เรย์ของตัวเลข ซึ่ง 0 หมายถึงชุดข้อมูลแรก และอื่นๆ

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

ตั้งค่าช่วงที่มองเห็นได้ (ซูม) เป็นช่วงที่ระบุ ยอมรับพารามิเตอร์ 2 รายการของประเภท Date ที่แสดงถึงครั้งแรกและครั้งสุดท้ายของช่วงที่มองเห็นได้ที่ต้องการ ตั้งค่า start เป็น null เพื่อรวมทุกอย่างตั้งแต่วันที่แรกสุดไปจนถึง end ตั้งค่า end เป็น Null เพื่อรวมทุกอย่างตั้งแต่ start ไปจนถึงวันสุดท้าย

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

แสดงชุดข้อมูลที่ระบุจากแผนภูมิหลังจากที่ซ่อนโดยใช้เมธอด hideDataColumns ยอมรับพารามิเตอร์ 1 รายการซึ่งอาจเป็นตัวเลขหรืออาร์เรย์ของตัวเลขก็ได้ โดย 0 จะหมายถึงชุดข้อมูลแรก และอื่นๆ

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

เหตุการณ์

ชื่อ
rangechange

เริ่มทํางานเมื่อผู้ใช้เปลี่ยนแถบเลื่อนช่วง ปลายทางของช่วงใหม่จะพร้อมใช้งานเป็น event['start'] และ event['end'] ดังนี้

google.visualization.events.addListener(chart, 'rangechange', rangechange_handler);

function rangechange_handler(e) {
  console.log('You changed the range to ', e['start'], ' and ', e['end']);
}
พร็อพเพอร์ตี้: เริ่มต้น สิ้นสุด
ready

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

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

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

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

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

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