หน้านี้ได้รับการแปลโดย Cloud Translation API

แผนภาพ Sankey

ภาพรวม
ตัวอย่างง่ายๆ
Sankey แบบหลายระดับ
การควบคุมสี
การปรับแต่งแบบอักษร
การปรับแต่งโหนด
กำลังโหลด
รูปแบบข้อมูล
ตัวเลือกการกำหนดค่า
เมธอด
เหตุการณ์
นโยบายข้อมูล

ภาพรวม

แผนภาพ 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	ตัวเลข	...
บทบาท:	โดเมน	โดเมน	ข้อมูล	...
บทบาทของคอลัมน์ที่ไม่บังคับมีดังนี้	ไม่มี	ไม่มี	ไม่มี	...	เคล็ดลับเครื่องมือ สไตล์ [style]

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

ชื่อ
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()` พร็อพเพอร์ตี้: ไม่มี

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

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