ภาพรวม
แผนภูมิวงกลมที่แสดงผลภายในเบราว์เซอร์โดยใช้ SVG หรือ VML แสดงเคล็ดลับเครื่องมือเมื่อวางเมาส์เหนือชิ้นส่วน
ตัวอย่าง
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities' }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
การสร้างแผนภูมิวงกลม 3 มิติ
หากคุณตั้งค่าตัวเลือก is3D
เป็น true
ระบบจะวาดแผนภูมิวงกลมเหมือนกับว่าจะมีมิติข้อมูล 3 รายการ ดังนี้
is3D
คือ false
โดยค่าเริ่มต้น เราจึงตั้งค่านี้เป็น true
อย่างชัดเจน
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart(document.getElementById('piechart_3d')); chart.draw(data, options); } </script> </head> <body> <div id="piechart_3d" style="width: 900px; height: 500px;"></div> </body> </html>
การสร้างแผนภูมิโดนัท
แผนภูมิโดนัท คือแผนภูมิวงกลมที่มีรูอยู่ตรงกลาง คุณสามารถสร้างแผนภูมิโดนัทได้ด้วยตัวเลือก pieHole
ดังนี้
ตัวเลือก pieHole
ควรตั้งค่าระหว่าง 0 ถึง 1 ตามอัตราส่วนของรัศมีระหว่างรูกับแผนภูมิ ตัวเลขระหว่าง 0.4 ถึง 0.6 จะดูดีที่สุดในแผนภูมิส่วนใหญ่
ระบบจะไม่สนใจค่าที่เท่ากับหรือมากกว่า 1 และค่า 0 จะเป็นการปิดช่องโหว่ของคุณ
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart(document.getElementById('donutchart')); chart.draw(data, options); } </script> </head> <body> <div id="donutchart" style="width: 900px; height: 500px;"></div> </body> </html>
คุณไม่สามารถรวมตัวเลือก pieHole
และ is3D
ได้
หากมี pieHole
จะถูกละเว้น
โปรดทราบว่า Google Charts จะพยายามวางป้ายกํากับให้ใกล้กับกึ่งกลางของชิ้นส่วนให้มากที่สุด หากคุณมีแผนภูมิโดนัทที่มีชิ้นส่วนเพียงชิ้นเดียว ตรงกลางของชิ้นส่วนอาจตกอยู่ในรูโดนัท ในกรณีดังกล่าว ให้เปลี่ยนสีป้ายกํากับ ดังนี้
var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' };
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Effort', 'Amount given'], ['My all', 100], ]); var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' }; var chart = new google.visualization.PieChart(document.getElementById('donut_single')); chart.draw(data, options); } </script> </head> <body> <div id="donut_single" style="width: 900px; height: 500px;"></div> </body> </html>
การหมุนเวียนแผนภูมิวงกลม
โดยค่าเริ่มต้น แผนภูมิวงกลมจะขึ้นต้นด้วยขอบด้านซ้ายของชิ้นส่วนแรกที่ชี้ตรงไป คุณเปลี่ยนค่านี้ได้ด้วยตัวเลือก pieStartAngle
ดังนี้
ในส่วนนี้ เราจะหมุนแผนภูมิตามเข็มนาฬิกา 100 องศาด้วยตัวเลือก
pieStartAngle: 100
(จึงเลือกเนื่องจากมุมดังกล่าว
ทําให้ป้ายกํากับ "อิตาลี" อยู่ในชิ้นส่วนนั้น)
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Language', 'Speakers (in millions)'], ['German', 5.85], ['French', 1.66], ['Italian', 0.316], ['Romansh', 0.0791] ]); var options = { legend: 'none', pieSliceText: 'label', title: 'Swiss Language Use (100 degree rotation)', pieStartAngle: 100, }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
การกําจัดส่วนแบ่ง
คุณแยกส่วนต่างๆ ของแผนภูมิออกจากส่วนที่เหลือของแผนภูมิได้ด้วยพร็อพเพอร์ตี้ offset
ของตัวเลือก slices
ดังนี้
หากต้องการแยกส่วน ให้สร้าง slices
และกําหนดหมายเลขชิ้นส่วนที่ถูกต้อง
offset
ระหว่าง 0 ถึง 1 ด้านล่างเราจะกําหนดออฟเซ็ตที่ใหญ่ขึ้นอย่างต่อเนื่องให้กับชิ้นส่วน 4 (คุชราต), 12 (มาราฐี), 14 (โอริยา) และ 15 (ปัญจาบ)
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Language', 'Speakers (in millions)'], ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4], ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300], ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5], ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5], ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33], ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5], ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52] ]); var options = { title: 'Indian Language Use', legend: 'none', pieSliceText: 'label', slices: { 4: {offset: 0.2}, 12: {offset: 0.3}, 14: {offset: 0.4}, 15: {offset: 0.5}, }, }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
การนําส่วนแบ่งออก
หากต้องการยกเว้นส่วนแบ่ง ให้เปลี่ยนสีเป็น 'transparent'
ดังนี้
นอกจากนี้ เรายังใช้ pieStartAngle
เพื่อหมุนเวียนแผนภูมิ 135 องศา, pieSliceText
เพื่อนําข้อความออกจากส่วนแบ่ง และ tooltip.trigger
เพื่อปิดใช้งานเคล็ดลับเครื่องมือ:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Pac Man', 'Percentage'], ['', 75], ['', 25] ]); var options = { legend: 'none', pieSliceText: 'none', pieStartAngle: 135, tooltip: { trigger: 'none' }, slices: { 0: { color: 'yellow' }, 1: { color: 'transparent' } } }; var chart = new google.visualization.PieChart(document.getElementById('pacman')); chart.draw(data, options); } </script> </head> <body> <div id="pacman" style="width: 900px; height: 500px;"></div> </body> </html>
เกณฑ์การมองเห็นส่วนแบ่ง
คุณกําหนดค่าเป็นเกณฑ์สําหรับส่วนแบ่งพายที่จะแสดงแต่ละรายการได้ ค่านี้สอดคล้องกับเศษส่วนของแผนภูมิ (โดยทั้งแผนภูมิจะมีค่าเป็น 1) หากต้องการตั้งเกณฑ์นี้เป็นเปอร์เซ็นต์ของผลรวม ให้หารเปอร์เซ็นต์ที่ต้องการด้วย 100 (สําหรับเกณฑ์ 20% ค่าจะเท่ากับ 0.2)
sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.
ระบบจะนําส่วนแบ่งที่น้อยกว่าเกณฑ์นี้มาตัดเป็น "อื่นๆ" เพียงรายการเดียว ซึ่งจะมีค่ารวมของชิ้นส่วนทั้งหมดต่ํากว่าเกณฑ์
google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Pizza'); data.addColumn('number', 'Populartiy'); data.addRows([ ['Pepperoni', 33], ['Hawaiian', 26], ['Mushroom', 22], ['Sausage', 10], // Below limit. ['Anchovies', 9] // Below limit. ]); var options = { title: 'Popularity of Types of Pizza', sliceVisibilityThreshold: .2 }; var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); }
กําลังโหลด
ชื่อแพ็กเกจ google.charts.load
คือ "corechart"
google.charts.load("current", {packages: ["corechart"]});
ชื่อคลาสของการแสดงภาพคือ google.visualization.PieChart
var visualization = new google.visualization.PieChart(container);
รูปแบบข้อมูล
แถว: แต่ละแถวในตารางแสดงส่วนแบ่ง
คอลัมน์
คอลัมน์ 0 | คอลัมน์ที่ 1 | ... | คอลัมน์ N (ไม่บังคับ) | |
---|---|---|---|---|
จุดประสงค์ในการใช้: | ป้ายกํากับส่วนแบ่ง | ค่าส่วนแบ่ง | ... | บทบาทที่ไม่บังคับ |
ประเภทข้อมูล: | สตริง | number | ... | |
บทบาท: | โดเมน | ข้อมูล | ... | |
บทบาทของคอลัมน์ที่ไม่บังคับ: | ไม่มี | ไม่มี | ... |
ตัวเลือกการกําหนดค่า
ชื่อ | |
---|---|
สีพื้นหลัง |
สีพื้นหลังของพื้นที่หลักของแผนภูมิ อาจเป็นสตริงสี HTML ที่เรียบง่าย เช่น ประเภท: สตริงหรือออบเจ็กต์
ค่าเริ่มต้น: "สีขาว"
|
พื้นหลังสีขีด |
สีของเส้นขอบแผนภูมิเป็นสตริงสี HTML ประเภท: สตริง
ค่าเริ่มต้น: "#666"
|
พื้นหลังของสี.ความกว้างความกว้าง |
ความกว้างเส้นขอบเป็นพิกเซล ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
|
พื้นหลังสีเติม |
สีเติมของแผนภูมิเป็นสตริงสี HTML ประเภท: สตริง
ค่าเริ่มต้น: "สีขาว"
|
แผนภูมิพื้นที่ |
ออบเจ็กต์ที่มีสมาชิกในการกําหนดค่าตําแหน่งและขนาดของพื้นที่แผนภูมิ (ที่มีการวาดแผนภูมิเอง ยกเว้นแกนและคําอธิบาย) รองรับ 2 รูปแบบ ได้แก่ ตัวเลขหรือตัวเลขตามด้วย % ตัวเลขง่ายๆ คือค่าพิกเซล ตัวเลขตามด้วย % คือเปอร์เซ็นต์ เช่น ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
แผนภูมิพื้นที่พื้นหลังพื้นหลัง |
สีพื้นหลังของแผนภูมิ เมื่อใช้สตริง อาจเป็นสตริงเลขฐานสิบหก
(เช่น "#fdc") หรือชื่อสีภาษาอังกฤษ เมื่อใช้ออบเจ็กต์ คุณจะระบุพร็อพเพอร์ตี้ต่อไปนี้ได้
ประเภท: สตริงหรือออบเจ็กต์
ค่าเริ่มต้น: "สีขาว"
|
แผนภูมิพื้นที่ซ้าย |
วิธีการวาดแผนภูมิจากเส้นขอบด้านซ้าย ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
แผนภูมิพื้นที่ |
วิธีการวาดแผนภูมิจากเส้นขอบด้านบน ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
พื้นที่แผนภูมิ |
ความกว้างของพื้นที่แผนภูมิ ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
พื้นที่แผนภูมิ |
ความสูงของพื้นที่แผนภูมิ ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
สี |
สีที่ใช้สําหรับองค์ประกอบของแผนภูมิ อาร์เรย์ของสตริง ซึ่งเอลิเมนต์แต่ละรายการเป็นสตริงสี HTML เช่น ประเภท: อาร์เรย์ของสตริง
ค่าเริ่มต้น: สีเริ่มต้น
|
เปิดใช้การโต้ตอบ |
แผนภูมินี้ทําให้เกิดเหตุการณ์ของผู้ใช้หรือตอบสนองต่อการโต้ตอบของผู้ใช้ หากเป็นเท็จ แผนภูมิจะไม่ส่ง "เลือก" หรือเหตุการณ์อื่นๆ ที่อิงตามการโต้ตอบ (แต่จะส่งเหตุการณ์ที่พร้อมแสดงหรือมีข้อผิดพลาด) และจะไม่แสดงข้อความที่แสดงเมื่อเลื่อนเมาส์ผ่าน หรือมีการเปลี่ยนแปลงโดยขึ้นอยู่กับอินพุตของผู้ใช้ ประเภท: บูลีน
ค่าเริ่มต้น: จริง
|
ขนาดแบบอักษร |
ขนาดแบบอักษรเริ่มต้น (หน่วยเป็นพิกเซล) ของข้อความทั้งหมดในแผนภูมิ คุณลบล้างค่านี้ได้โดยใช้พร็อพเพอร์ตี้สําหรับองค์ประกอบแผนภูมิบางรายการ ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
ชื่อแบบอักษร |
แบบอักษรเริ่มต้นของข้อความทั้งหมดในแผนภูมิ คุณลบล้างค่านี้ได้โดยใช้พร็อพเพอร์ตี้สําหรับองค์ประกอบแผนภูมิบางรายการ ประเภท: สตริง
ค่าเริ่มต้น: "eCPM"
|
ForceIFrame |
วาดแผนภูมิภายในเฟรมแบบอินไลน์ (โปรดทราบว่าใน IE8 ระบบจะละเว้นตัวเลือกนี้ แผนภูมิ IE8 ทั้งหมดจะวาดใน i-frame) ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
ความสูง |
ความสูงของแผนภูมิเป็นพิกเซล ประเภท: ตัวเลข
ค่าเริ่มต้น: ความสูงขององค์ประกอบที่มี
|
3 มิติ |
หากเป็น "จริง" จะแสดงแผนภูมิแบบ 3 มิติ ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
คําอธิบาย |
ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าแง่มุมต่างๆ ของคําอธิบาย หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบสัญพจน์ของออบเจ็กต์ได้ ดังที่แสดงด้านล่างนี้ {position: 'top', textStyle: {color: 'blue', fontSize: 16}} ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
Legend.alignment |
การจัดเรียงคําอธิบาย อาจมีสถานะใดสถานะหนึ่งต่อไปนี้
จุดเริ่มต้น กึ่งกลาง และจุดสิ้นสุดจะสัมพันธ์กับรูปแบบ เช่น แนวตั้งหรือแนวนอนของคําอธิบาย เช่น ในตํานาน "เริ่มต้น" "เริ่มต้น" และ "สิ้นสุด" อยู่ที่ด้านบนและด้านล่างตามลําดับ สําหรับคําอธิบาย "ด้านบน" "เริ่มต้น" และ "สิ้นสุด" อยู่ทางด้านซ้ายและขวาของพื้นที่นั้นตามลําดับ ค่าเริ่มต้นจะขึ้นอยู่กับตําแหน่งของคําอธิบาย สําหรับคําอธิบาย "ด้านล่าง" ค่าเริ่มต้นจะเป็น "ตรงกลาง" แต่คําอธิบายอื่นๆ จะมีค่าเริ่มต้นเป็น "เริ่มต้น" ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ
|
ตําแหน่ง. |
ตําแหน่งของคําอธิบาย อาจมีสถานะใดสถานะหนึ่งต่อไปนี้
ประเภท: สตริง
ค่าเริ่มต้น: "ขวา"
|
vibe.maxLines |
จํานวนบรรทัดสูงสุดในคําอธิบาย ตั้งค่านี้เป็นตัวเลขที่มากกว่า 1 บรรทัดเพื่อเพิ่มบรรทัดในคําอธิบาย หมายเหตุ: ตรรกะที่ใช้พิจารณาจํานวนบรรทัดจริงที่แสดงผลยังคงเป็น Flux ปัจจุบันตัวเลือกนี้ใช้งานได้เฉพาะเมื่อตํานาน 'ตําแหน่ง' เป็น "ด้านบน" ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
|
คําอธิบายข้อความรูปแบบ |
ออบเจ็กต์ที่ระบุรูปแบบข้อความของคําอธิบาย ออบเจ็กต์มีรูปแบบต่อไปนี้ { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
แผนภูมิวงกลม |
หากอยู่ระหว่าง 0 ถึง 1 จะแสดงแผนภูมิโดนัท ช่องที่มีรัศมีเท่ากับ ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
|
พายเส้นขอบสี |
สีของเส้นขอบของชิ้นส่วน ใช้ได้เฉพาะเมื่อแผนภูมิเป็นแบบ 2 มิติ ประเภท: สตริง
ค่าเริ่มต้น: "สีขาว"
|
แผนภูมิวงกลม |
เนื้อหาของข้อความที่แสดงในส่วนแบ่ง อาจมีสถานะใดสถานะหนึ่งต่อไปนี้
ประเภท: สตริง
ค่าเริ่มต้น: "เปอร์เซ็นต์"
|
รูปแบบแผนภูมิวงกลม |
ออบเจ็กต์ที่ระบุรูปแบบข้อความของสไลซ์ ออบเจ็กต์มีรูปแบบต่อไปนี้ {color: <string>, fontName: <string>, fontSize: <number>}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
แผนภูมิวงกลมเริ่ม |
มุมในหน่วยองศาเพื่อหมุนแผนภูมิ ค่าเริ่มต้นของ ประเภท: ตัวเลข
ค่าเริ่มต้น:
0 |
หมวดหมู่ย้อนกลับ |
หากเป็น "จริง" ให้วาดชิ้นส่วนทวนเข็มนาฬิกา ค่าเริ่มต้นคือวาดตามเข็มนาฬิกา ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
พายเรซิดสี |
สีสําหรับส่วนแบ่งชุดค่าผสมที่มีส่วนแบ่งทั้งหมดต่ํากว่า sliceViewableThreshold ประเภท: สตริง
ค่าเริ่มต้น: '#ccc'
|
แผนภูมิวงกลมซ้ํา |
ป้ายกํากับสําหรับส่วนชุดค่าผสมที่มีการแบ่งส่วนทั้งหมดด้านล่าง sliceViewableThreshold ประเภท: สตริง
ค่าเริ่มต้น: "อื่นๆ"
|
ส่วนแบ่ง |
อาร์เรย์ของออบเจ็กต์ แต่ละรายการอธิบายรูปแบบของชิ้นส่วนที่เกี่ยวข้องในพาย หากต้องการใช้ค่าเริ่มต้นสําหรับส่วนแบ่ง ให้ระบุออบเจ็กต์ที่ว่างเปล่า (เช่น
คุณระบุอาร์เรย์ของออบเจ็กต์โดยแต่ละรายการจะนําไปใช้กับส่วนแบ่งตามลําดับที่ระบุ หรือจะระบุออบเจ็กต์ที่ออบเจ็กต์ย่อยแต่ละรายการมีคีย์ตัวเลขที่ระบุชิ้นส่วนดังกล่าวที่ใช้ได้ เช่น การประกาศ 2 รายการต่อไปนี้เหมือนกัน และประกาศส่วนแรกเป็นสีดําและรายการที่ 4 เป็นสีแดง slices: [{color: 'black'}, {}, {}, {color: 'red'}] slices: {0: {color: 'black'}, 3: {color: 'red'}} ประเภท: อาร์เรย์ของออบเจ็กต์หรือออบเจ็กต์ที่มีออบเจ็กต์ที่ซ้อนกัน
ค่าเริ่มต้น: {}
|
เกณฑ์ระดับการมองเห็น |
ค่าเศษของพายด้านล่างที่ส่วนแบ่งไม่แสดงทีละรายการ ระบบจะนําส่วนแบ่งทั้งหมดที่ไม่ผ่านเกณฑ์นี้มารวมเป็นส่วน "อื่นๆ" ซึ่งมีขนาดเป็นผลรวมของขนาดทั้งหมด ค่าเริ่มต้นต้องไม่แสดงเดี่ยวๆ ที่มีขนาดเล็กกว่าครึ่งองศา // Slices less than 25% of the pie will be // combined into an "Other" slice. sliceVisibilityThreshold: .25 ประเภท: ตัวเลข
ค่าเริ่มต้น: ครึ่งองศา (.5/360 หรือ 1/720 หรือ .0014)
|
title |
ข้อความที่จะแสดงเหนือแผนภูมิ ประเภท: สตริง
ค่าเริ่มต้น: ไม่มีชื่อ
|
รูปแบบข้อความชื่อ |
ออบเจ็กต์ที่ระบุรูปแบบข้อความชื่อ ออบเจ็กต์มีรูปแบบต่อไปนี้ { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
เคล็ดลับเครื่องมือ |
ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าองค์ประกอบเคล็ดลับเครื่องมือต่างๆ หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้สัญพจน์ของออบเจ็กต์ได้ ดังที่แสดงด้านล่างนี้ {textStyle: {color: '#FF0000'}, showColorCode: true} ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
troubleshooter.ignoreBounds |
หากตั้งค่าเป็น หมายเหตุ: วิธีนี้ใช้ได้กับเคล็ดลับเครื่องมือ HTML เท่านั้น หากเปิดใช้ด้วยเคล็ดลับเครื่องมือ SVG ระบบจะครอบตัดรายการที่อยู่นอกขอบเขตแผนภูมิ ดูรายละเอียดเพิ่มเติมได้ในการปรับแต่งเนื้อหาเคล็ดลับเครื่องมือ ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
troubleshooter.isHtml |
หากตั้งค่าเป็น "จริง" ให้ใช้เคล็ดลับเครื่องมือ HTML ที่แสดงผล (แทนการแสดงผลที่แสดงผล SVG) ดูรายละเอียดเพิ่มเติมได้ในการปรับแต่งเนื้อหาเคล็ดลับเครื่องมือ หมายเหตุ: ฟีเจอร์ลูกโป่งลูกโป่งจะไม่รองรับการปรับแต่งเนื้อหาเคล็ดลับเครื่องมือ HTML ผ่านบทบาทข้อมูลคอลัมน์เคล็ดลับเครื่องมือ ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
troubleshooter.showColorCode |
หากเป็น "จริง" จะแสดงสี่เหลี่ยมจัตุรัสสีข้างข้อมูลชิ้นส่วนในเคล็ดลับเครื่องมือ ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
เคล็ดลับเครื่องมือ |
ข้อมูลที่จะแสดงเมื่อผู้ใช้วางเมาส์เหนือแผนภูมิวงกลม ระบบรองรับค่าต่อไปนี้
ประเภท: สตริง
ค่าเริ่มต้น: 'ทั้ง'
|
troubleshooter.textStyle |
ออบเจ็กต์ที่ระบุรูปแบบข้อความเคล็ดลับเครื่องมือ ออบเจ็กต์มีรูปแบบต่อไปนี้ { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
เคล็ดลับเครื่องมือ |
การโต้ตอบของผู้ใช้ที่ทําให้เคล็ดลับเครื่องมือแสดง
ประเภท: สตริง
ค่าเริ่มต้น: "โฟกัส"
|
ความกว้าง |
ความกว้างของแผนภูมิเป็นพิกเซล ประเภท: ตัวเลข
ค่าเริ่มต้น: ความกว้างขององค์ประกอบที่มี
|
เมธอด
วิธีการ | |
---|---|
draw(data, options) |
วาดแผนภูมิ แผนภูมินี้ยอมรับการเรียกใช้เมธอดเพิ่มเติมหลังจากที่เหตุการณ์ ประเภทการคืนสินค้า: ไม่มี
|
getAction(actionID) |
แสดงผลออบเจ็กต์การดําเนินการเคล็ดลับเครื่องมือด้วย ประเภทการแสดงผล: ออบเจ็กต์
|
getBoundingBox(id) |
แสดงผลออบเจ็กต์ที่มีด้านซ้าย ด้านบน ความกว้าง และความสูงขององค์ประกอบแผนภูมิ
ค่าจะสัมพันธ์กับคอนเทนเนอร์ของแผนภูมิ เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทการแสดงผล: ออบเจ็กต์
|
getChartAreaBoundingBox() |
แสดงออบเจ็กต์ที่มีด้านซ้าย ด้านบน ความกว้าง และความสูงของเนื้อหาแผนภูมิ (เช่น ไม่รวมป้ายกํากับและคําอธิบาย)
ค่าจะสัมพันธ์กับคอนเทนเนอร์ของแผนภูมิ เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทการแสดงผล: ออบเจ็กต์
|
getChartLayoutInterface() |
แสดงผลออบเจ็กต์ที่มีข้อมูลเกี่ยวกับตําแหน่งบนหน้าจอของแผนภูมิและองค์ประกอบ สามารถเรียกเมธอดต่อไปนี้ในออบเจ็กต์ที่แสดงผลได้
เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทการแสดงผล: ออบเจ็กต์
|
getHAxisValue(xPosition, optional_axis_index) |
แสดงผลค่าข้อมูลแนวนอนที่ ตัวอย่าง: เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทการแสดงผล: จํานวน
|
getImageURI() |
แสดงผลแผนภูมิที่เรียงลําดับเป็น URI รูปภาพ เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทการแสดงผล: สตริง
|
getSelection() |
แสดงผลอาร์เรย์ของเอนทิตีแผนภูมิที่เลือก
เอนทิตีที่เลือกได้คือส่วนย่อยและรายการในคําอธิบาย
สําหรับแผนภูมินี้ คุณจะเลือกเอนทิตีได้เพียงรายการเดียวในช่วงเวลาที่กําหนด
ประเภทการแสดงผล: อาร์เรย์ขององค์ประกอบการเลือก
|
getVAxisValue(yPosition, optional_axis_index) |
แสดงผลค่าข้อมูลแนวตั้งที่ ตัวอย่าง: เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทการแสดงผล: จํานวน
|
getXLocation(dataValue, optional_axis_index) |
แสดงผลพิกัดพิกเซล x ของ ตัวอย่าง: เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทการแสดงผล: จํานวน
|
getYLocation(dataValue, optional_axis_index) |
แสดงผลพิกัด y ของพิกเซล y ของ ตัวอย่าง: เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทการแสดงผล: จํานวน
|
removeAction(actionID) |
นําการดําเนินการเคล็ดลับเครื่องมือที่มี ประเภทการแสดงผล:
none |
setAction(action) |
ตั้งค่าการทํางานของเคล็ดลับเครื่องมือที่จะเรียกใช้เมื่อผู้ใช้คลิกข้อความการดําเนินการ
เมธอด
ควรตั้งค่าการทํางานของเคล็ดลับเครื่องมือทั้งหมดก่อนเรียกใช้เมธอด ประเภทการแสดงผล:
none |
setSelection() |
เลือกเอนทิตีของแผนภูมิที่ระบุ ยกเลิกรายการที่เลือกก่อนหน้า
เอนทิตีที่เลือกได้คือส่วนย่อยและรายการในคําอธิบาย
สําหรับแผนภูมินี้ คุณจะเลือกเอนทิตีได้ครั้งละ 1 รายการเท่านั้น
ประเภทการคืนสินค้า: ไม่มี
|
clearChart() |
ล้างแผนภูมิและปล่อยทรัพยากรที่จัดสรรไว้ทั้งหมด ประเภทการคืนสินค้า: ไม่มี
|
เหตุการณ์
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้เหตุการณ์เหล่านี้ได้ที่การโต้ตอบพื้นฐาน การจัดการเหตุการณ์ และเหตุการณ์เริ่มทํางาน
ชื่อ | |
---|---|
click |
เริ่มทํางานเมื่อผู้ใช้คลิกภายในแผนภูมิ ใช้เพื่อระบุได้เมื่อมีการคลิกชื่อ องค์ประกอบข้อมูล รายการคําอธิบาย แกน ตารางกริด หรือป้ายกํากับ พร็อพเพอร์ตี้: targetID
|
error |
เริ่มทํางานเมื่อเกิดข้อผิดพลาดเมื่อพยายามแสดงผลแผนภูมิ พร็อพเพอร์ตี้: รหัส ข้อความ
|
onmouseover |
เริ่มทํางานเมื่อผู้ใช้วางเมาส์เหนือเอนทิตีภาพ ส่งคืนดัชนีแถวและคอลัมน์ขององค์ประกอบตารางข้อมูลที่เกี่ยวข้อง รายการส่วนย่อยหรือคําอธิบายสัมพันธ์กับแถวในตารางข้อมูล (ดัชนีคอลัมน์เป็นค่าว่าง) พร็อพเพอร์ตี้: แถว, คอลัมน์
|
onmouseout |
เริ่มทํางานเมื่อผู้ใช้เลื่อนเมาส์ออกจากเอนทิตีภาพ ส่งคืนดัชนีแถวและคอลัมน์ขององค์ประกอบตารางข้อมูลที่เกี่ยวข้อง รายการส่วนย่อยหรือคําอธิบายสัมพันธ์กับแถวในตารางข้อมูล (ดัชนีคอลัมน์เป็นค่าว่าง) พร็อพเพอร์ตี้: แถว, คอลัมน์
|
ready |
แผนภูมินี้พร้อมสําหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีการโทรหลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สําหรับเหตุการณ์นี้ก่อนที่เรียกใช้เมธอด พร็อพเพอร์ตี้: ไม่มี
|
select |
เริ่มทํางานเมื่อผู้ใช้คลิกเอนทิตีภาพ หากต้องการดูข้อมูลที่ได้รับเลือก โปรดโทรหา พร็อพเพอร์ตี้: ไม่มี
|
นโยบายข้อมูล
โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ ทั้งนี้จะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ