ภาพรวม
ไดอะแกรม Sankey เป็นการแสดงภาพที่ใช้เพื่อแสดงโฟลวจากชุดค่าหนึ่งไปยังอีกชุดหนึ่ง สิ่งที่เชื่อมโยงกันเรียกว่าโหนด และการเชื่อมต่อเรียกว่าลิงก์ ฟังก์ชันเหล่านี้เหมาะสําหรับเวลาที่คุณต้องการแสดงการแมประหว่างกันในโดเมน 2 โดเมน (เช่น มหาวิทยาลัยและมหาวิทยาลัย) หรือเส้นทางหลายเส้นทางผ่านชุดขั้นตอน (เช่น Google Analytics จะใช้คีย์ที่แสดงการไหลเวียนของหน้าเว็บไปยังหน้าเว็บอื่นๆ ในเว็บไซต์)
สําหรับผู้ที่สงสัย กลุ่มเหล่านี้ชื่อว่ากัปตันซานคีย์ที่สร้างแผนภาพประสิทธิภาพของเครื่องจักรไอน้ํา ซึ่งใช้ลูกศรที่มีความกว้างเป็นสัดส่วนการสูญเสียความร้อน
หมายเหตุ: แผนภูมิ Sansan อาจกําลังได้รับการแก้ไขอย่างมากใน Google Charts รุ่นต่อๆ ไป
ไดอะแกรม Sankey จะแสดงผลในเบราว์เซอร์โดยใช้ SVG หรือ VML ที่เหมาะสมสําหรับเบราว์เซอร์ของผู้ใช้ โค้ดการออกแบบ Sankey ของ Google ได้มาจากโค้ดรูปแบบ Sankey ของ D3
หมายเหตุ: แผนภูมิ Google Sansan ไม่พร้อมใช้งานใน Microsoft Internet Explorer 8 และเวอร์ชันก่อนหน้า
ตัวอย่างง่ายๆ
สมมติว่าคุณมีหมวดหมู่ 2 หมวดหมู่ ได้แก่ A และ B ซึ่งเชื่อมต่อกับหมวดหมู่อื่นๆ 3 หมวดหมู่ ได้แก่ X, Y และ Z การเชื่อมต่อบางอย่างมีความเสียหายมาก กว่าการเชื่อมต่ออื่นๆ เช่น ข. มีการเชื่อมต่อที่บางกับ X และมีการเชื่อมต่อ Y ที่หนามาก
ลองวางเมาส์เหนือลิงก์ใดลิงก์หนึ่งเพื่อไฮไลต์การเชื่อมต่อ
ในการสร้างแผนภูมิ Sankey ให้เพิ่มชุดแถวที่แสดงข้อมูลแต่ละรายการเกี่ยวกับการเชื่อมต่อเดียว ได้แก่ จาก ถึง และน้ําหนัก จากนั้นใช้เมธอด 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 จะเพิ่มระดับตามความจําเป็นโดยการจัดวางโดยอัตโนมัติ นี่คือโค้ดที่สมบูรณ์สําหรับแผนภูมิด้านบน:
<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>
การควบคุมสี
แผนภูมิคีย์มีความสามารถในการตั้งค่าสีที่กําหนดเองสําหรับโหนดและลิงก์ ทั้งโหนดและลิงก์สามารถได้รับจานสีที่กําหนดเองโดยใช้ตัวเลือก 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 } }, } };
การปรับแต่งป้ายกํากับ
คุณสามารถปรับแต่งข้อความบนแผนภูมิ Sansan โดยใช้ 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 (ไม่บังคับ) | |
---|---|---|---|---|---|
จุดประสงค์ในการใช้: | แหล่งที่มา | ปลายทาง | ค่า | ... | บทบาทที่ไม่บังคับ |
ประเภทข้อมูล: | สตริง | สตริง | หมายเลข | ... | |
บทบาท: | โดเมน | โดเมน | ข้อมูล | ... | |
บทบาทของคอลัมน์ที่เลือกระบุได้: | ไม่มี |
ไม่มี |
ไม่มี |
... |
ตัวเลือกการกําหนดค่า
ชื่อ | |
---|---|
ForceIFrame |
วาดแผนภูมิภายในเฟรมในบรรทัด (โปรดทราบว่าใน IE8 ตัวเลือกนี้จะไม่สนใจ ซึ่งระบบจะวาดแผนภูมิ IE8 ทั้งหมดใน i-frame) ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
ส่วนสูง |
ความสูงของแผนภูมิในหน่วยพิกเซล ประเภท: จํานวน
ค่าเริ่มต้น: ความสูงขององค์ประกอบที่มี
|
Sankey.iterations |
เมื่อใช้คีย์ต่างๆ หลายระดับ บางครั้งก็ไม่แน่ชัดว่าควรจะวางโหนดไว้ที่ใดเพื่อให้อ่านได้ง่าย เครื่องมือเลย์เอาต์ D3 ทดสอบกับเลย์เอาต์โหนดอื่นซึ่งจะหยุดเมื่อมีการพยายาม ประเภท: จํานวนเต็ม
ค่าเริ่มต้น: 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.โหมดสี |
ตั้งค่าโหมดระบายสีสําหรับลิงก์ระหว่างโหนดต่างๆ ค่าที่เป็นไปได้มีดังนี้
ตัวเลือกนี้จะลบล้าง sankey.link.color ประเภท: สตริง
ค่าเริ่มต้น: "ไม่มี"
|
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 ค่าที่เป็นไปได้มีดังนี้
ประเภท: สตริง
ค่าเริ่มต้น: "ไม่ซ้ํากัน"
|
เคล็ดลับเครื่องมือ |
ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าองค์ประกอบต่างๆ ของเคล็ดลับเครื่องมือ หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ ให้ใช้สัญกรณ์ออบเจ็กต์ตามที่แสดงไว้ที่นี่ {textStyle: {color: '#FF0000'}, showColorCode: true} ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
|
tooltip.isHtml |
หากตั้งค่าเป็น "จริง" ให้ใช้เคล็ดลับเครื่องมือที่แสดงผล HTML (แทนการแสดงผล SVG) ดูการปรับแต่งเนื้อหาเคล็ดลับเครื่องมือสําหรับรายละเอียดเพิ่มเติม หมายเหตุ: การปรับแต่งเนื้อหาคอลัมน์เคล็ดลับเครื่องมือจะไม่รองรับการแสดงเนื้อหาบับเบิลแผนภูมิของการปรับแต่งเคล็ดลับเครื่องมือ HTML ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
tooltip.textStyle |
ออบเจ็กต์ที่ระบุรูปแบบข้อความเคล็ดลับเครื่องมือ ออบเจ็กต์มีรูปแบบต่อไปนี้ { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
ความกว้าง |
ความกว้างของแผนภูมิในหน่วยพิกเซล ประเภท: จํานวน
ค่าเริ่มต้น: ความกว้างขององค์ประกอบภายใน
|
เมธอด
วิธีการ | |
---|---|
draw(data, options) |
วาดแผนภูมิ แผนภูมิยอมรับการเรียกใช้เมธอดเพิ่มเติมหลังจากเหตุการณ์ ประเภทการแสดงผล: ไม่มี
|
getBoundingBox(id) |
แสดงผลออบเจ็กต์ที่มีด้านซ้าย ด้านบน ความกว้าง และความสูงขององค์ประกอบแผนภูมิ
ค่าจะสัมพันธ์กับคอนเทนเนอร์ของแผนภูมิ เรียกใช้หลังจากการวาดแผนภูมิ ประเภทการแสดงผล: ออบเจ็กต์
|
getSelection() |
แสดงผลอาร์เรย์ของเอนทิตีแผนภูมิที่เลือก
เอนทิตีที่เลือกได้คือแถบ รายการคําอธิบาย และหมวดหมู่
สําหรับแผนภูมินี้ คุณจะเลือกได้เพียงเอนทิตีเดียวในช่วงเวลาหนึ่งๆ
ประเภทการแสดงผล: อาร์เรย์ขององค์ประกอบการเลือก
|
setSelection() |
เลือกเอนทิตีของแผนภูมิที่ระบุ ยกเลิกรายการที่เลือกไว้ก่อนหน้านี้
เอนทิตีที่เลือกได้คือแถบ รายการคําอธิบาย และหมวดหมู่
สําหรับแผนภูมินี้ คุณจะเลือกเอนทิตีได้ครั้งละ 1 รายการเท่านั้น
ประเภทการแสดงผล: ไม่มี
|
clearChart() |
ล้างแผนภูมิและปล่อยทรัพยากรทั้งหมดที่จัดสรร ประเภทการแสดงผล: ไม่มี
|
กิจกรรม
ชื่อ | |
---|---|
error |
เริ่มทํางานเมื่อเกิดข้อผิดพลาดขณะพยายามแสดงผลแผนภูมิ คุณสมบัติ: id, message
|
onmouseover |
เริ่มทํางานเมื่อผู้ใช้วางเมาส์เหนือเอนทิตีภาพ ส่งกลับดัชนีแถวและคอลัมน์ขององค์ประกอบตารางข้อมูลที่เกี่ยวข้อง แถบจะสัมพันธ์กับเซลล์ในตารางข้อมูล รายการสัญลักษณ์ในคอลัมน์ (ดัชนีแถวเป็นค่าว่าง) และหมวดหมู่ของแถว (ดัชนีคอลัมน์เป็นศูนย์) คุณสมบัติ: แถว คอลัมน์
|
onmouseout |
เริ่มทํางานเมื่อผู้ใช้เลื่อนเมาส์ออกจากเอนทิตีภาพ ส่งกลับดัชนีแถวและคอลัมน์ขององค์ประกอบตารางข้อมูลที่เกี่ยวข้อง แถบจะสัมพันธ์กับเซลล์ในตารางข้อมูล รายการสัญลักษณ์ในคอลัมน์ (ดัชนีแถวเป็นค่าว่าง) และหมวดหมู่ของแถว (ดัชนีคอลัมน์เป็นศูนย์) คุณสมบัติ: แถว คอลัมน์
|
ready |
แผนภูมินี้พร้อมสําหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีเรียกหลังจากวาด คุณควรตั้งค่า Listener สําหรับเหตุการณ์นี้ก่อนเรียกใช้เมธอด พร็อพเพอร์ตี้: ไม่มี
|
select |
เริ่มทํางานเมื่อผู้ใช้คลิกภาพ หากต้องการดูสิ่งที่เลือกแล้ว ให้โทรหา พร็อพเพอร์ตี้: ไม่มี
|
นโยบายข้อมูล
โค้ดและข้อมูลทั้งหมดได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ จะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใด