ภาพรวม
แผนภูมิกระจายพล็อตจุดบนกราฟ เมื่อผู้ใช้วางเมาส์เหนือจุดต่างๆ เคล็ดลับเครื่องมือจะแสดงพร้อมข้อมูลเพิ่มเติม
แผนภูมิกระจายของ Google จะแสดงผลภายในเบราว์เซอร์โดยใช้ 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([ ['Age', 'Weight'], [ 8, 12], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7] ]); var options = { title: 'Age vs. Weight comparison', hAxis: {title: 'Age', minValue: 0, maxValue: 15}, vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, legend: 'none' }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
การเปลี่ยนและสร้างภาพเคลื่อนไหว
โดยค่าเริ่มต้น แผนภูมิกระจายจะแสดงองค์ประกอบของชุดข้อมูลด้วยวงกลม คุณระบุรูปร่างอื่นๆ ได้ด้วยตัวเลือก pointShape
ซึ่งระบุไว้ในเอกสารการปรับแต่งจุด
เช่นเดียวกับ Google Charts อื่นๆ คุณสามารถสร้างภาพเคลื่อนไหวโดยใช้เหตุการณ์ได้ คุณสามารถเพิ่ม Listener เหตุการณ์สําหรับเหตุการณ์ ready
แรก และวาดแผนภูมิใหม่หลังจากทําการแก้ไขที่ต้องการ หลังจากเหตุการณ์ ready
แรก คุณจะฟังเหตุการณ์ animationfinish
เพื่อทําขั้นตอนนี้ซ้ําได้ ซึ่งจะทําให้เกิดภาพเคลื่อนไหวต่อเนื่อง ตัวเลือก animation
จะควบคุมวิธีที่การถอนตัวใหม่เกิดขึ้น ได้แก่ ทันที (ไม่มีภาพเคลื่อนไหว) หรืออย่างราบรื่น และถ้าทํางานได้อย่างราบรื่นและอย่างรวดเร็ว
var options = { legend: 'none', colors: ['#087037'], pointShape: 'star', pointSize: 18, animation: { duration: 200, easing: 'inAndOut', } }; // Start the animation by listening to the first 'ready' event. google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk); // Control all other animations by listening to the 'animationfinish' event. google.visualization.events.addListener(chart, 'animationfinish', randomWalk); ... function randomWalk() { ... }
<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 = new google.visualization.DataTable(); data.addColumn('number'); data.addColumn('number'); var radius = 100; for (var i = 0; i < 6.28; i += 0.1) { data.addRow([radius * Math.cos(i), radius * Math.sin(i)]); } // Our central point, which will jiggle. data.addRow([0, 0]); var options = { legend: 'none', colors: ['#087037'], pointShape: 'star', pointSize: 18, animation: { duration: 200, easing: 'inAndOut', } }; var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div')); // Start the animation by listening to the first 'ready' event. google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk); // Control all other animations by listening to the 'animationfinish' event. google.visualization.events.addListener(chart, 'animationfinish', randomWalk); chart.draw(data, options); function randomWalk() { var x = data.getValue(data.getNumberOfRows() - 1, 0); var y = data.getValue(data.getNumberOfRows() - 1, 1); x += 5 * (Math.random() - 0.5); y += 5 * (Math.random() - 0.5); if (x * x + y * y > radius * radius) { // Out of bounds. Bump toward center. x += Math.random() * ((x < 0) ? 5 : -5); y += Math.random() * ((y < 0) ? 5 : -5); } data.setValue(data.getNumberOfRows() - 1, 0, x); data.setValue(data.getNumberOfRows() - 1, 1, y); chart.draw(data, options); } } </script> </head> <body> <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div> </body> </html>
การสร้างแผนภูมิกระจายวัสดุ
ในปี 2014 Google ได้ประกาศหลักเกณฑ์ที่มีเจตนาที่จะสนับสนุนรูปลักษณ์ทั่วไปในพร็อพเพอร์ตี้และแอป (เช่น แอป Android) ที่ทํางานบนแพลตฟอร์มของ Google เราเรียกการดําเนินการนี้ว่า Material Design เราจะให้บริการแผนภูมิ "หลัก" ของแผนภูมิหลักทั้งหมดของเรา คุณสามารถใช้รูปแบบต่างๆ ได้หากต้องการ
การสร้างแผนภูมิกระจาย Material คล้ายกับการสร้างแผนภูมิที่เราเรียกว่า "แผนภูมิกระจาย" "คลาสสิก" คุณโหลด GoogleVisual API (แม้ว่าจะมีแพ็กเกจ 'scatter'
แทนแพ็กเกจ 'corechart'
) แต่ให้กําหนดตารางข้อมูลแล้วสร้างออบเจ็กต์ (แต่คลาส google.charts.Scatter
แทนที่จะเป็น google.visualization.ScatterChart
)
หมายเหตุ: แผนภูมิเนื้อหาจะใช้งานไม่ได้ใน Internet Explorer เวอร์ชันเก่า (IE8 และเวอร์ชันก่อนหน้าไม่รองรับ SVG ซึ่งแผนภูมิเนื้อหาต้องใช้)
แผนภูมิกระจาย: มีการปรับปรุงเล็กๆ น้อยๆ มากมายในแผนภูมิกระจายแบบคลาสสิก เช่น ความทึบแสงของตัวแปรที่อ่านง่าย ชุดสีที่ปรับปรุงใหม่ การจัดรูปแบบป้ายกํากับที่ชัดเจนยิ่งขึ้น การเว้นวรรคเริ่มต้นที่เข้มงวดขึ้น เส้นตารางที่นุ่มนวล และชื่อเรื่อง (และการเพิ่มคําบรรยาย)
google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82],[0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, hAxis: {title: 'Hours Studied'}, vAxis: {title: 'Grade'} }; var chart = new google.charts.Scatter(document.getElementById('scatterchart_material')); chart.draw(data, google.charts.Scatter.convertOptions(options)); }
แผนภูมิ Material อยู่ในเบต้า ลักษณะที่ปรากฏและการโต้ตอบส่วนใหญ่ถือเป็นที่สิ้นสุด แต่ตัวเลือกต่างๆ ที่มีในแผนภูมิแบบคลาสสิกยังไม่มีให้บริการ คุณดูรายการตัวเลือกที่ระบบยังไม่รองรับในปัญหานี้ได้
วิธีประกาศตัวเลือกยังไม่เป็นที่สิ้นสุด ดังนั้นหากใช้ตัวเลือกคลาสสิก คุณจะต้องแปลงตัวเลือกดังกล่าวให้เป็นตัวเลือกสื่อการเรียนการสอนของชั้นเรียนโดยแทนที่บรรทัดนี้
chart.draw(data, options);
...ด้วยรูปแบบต่อไปนี้
chart.draw(data, google.charts.Scatter.convertOptions(options));
แผนภูมิ Y แบบ Y
บางครั้งคุณอาจต้องการแสดง 2 ชุดในแผนภูมิกระจาย โดยมีแกน Y 2 แกนแยกกัน ได้แก่ แกนด้านซ้ายสําหรับชุดหนึ่ง และแกนที่เหมาะสมสําหรับอีกชุด ได้แก่
โปรดทราบว่าไม่เพียงแต่แกน Y ทั้ง 2 แกนซึ่งติดป้ายกํากับต่างกัน ("คะแนนสอบขั้นสุดท้าย" กับ "ชั่วโมงที่ศึกษา") แต่ยังมีระดับและตารางกริดแยกกัน หากต้องการปรับแต่งลักษณะการทํางานนี้ ให้ใช้ตัวเลือก vAxis.gridlines
ในโค้ดด้านล่าง ตัวเลือก axes
และ series
ร่วมกันจะระบุลักษณะของคู่ Y ของแผนภูมิ ตัวเลือก series
จะระบุแกนที่จะใช้สําหรับแต่ละคอลัมน์ ('final grade'
และ 'hours studied'
โดยไม่จําเป็นต้องเกี่ยวข้องกับชื่อคอลัมน์ในตารางข้อมูล) ตัวเลือก axes
จะทําให้แผนภูมินี้เป็นแผนภูมิคู่ Y ที่วางแกน 'Final Exam Grade'
ทางด้านซ้าย และแกน 'Hours Studied'
ทางด้านขวา
google.charts.load('current', {'packages':['corechart', 'scatter']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = new google.visualization.DataTable(); data.addColumn('number', 'Student ID'); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 0, 67], [1, 1, 88], [2, 2, 77], [3, 3, 93], [4, 4, 85], [5, 5, 91], [6, 6, 71], [7, 7, 78], [8, 8, 93], [9, 9, 80], [10, 10, 82], [11, 0, 75], [12, 5, 80], [13, 3, 90], [14, 1, 72], [15, 5, 75], [16, 6, 68], [17, 7, 98], [18, 3, 82], [19, 9, 94], [20, 2, 79], [21, 2, 95], [22, 2, 86], [23, 3, 67], [24, 4, 60], [25, 2, 80], [26, 6, 92], [27, 2, 81], [28, 8, 79], [29, 9, 83] ]); var materialOptions = { chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, width: 800, height: 500, series: { 0: {axis: 'hours studied'}, 1: {axis: 'final grade'} }, axes: { y: { 'hours studied': {label: 'Hours Studied'}, 'final grade': {label: 'Final Exam Grade'} } } }; var classicOptions = { width: 800, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, title: 'Students\' Final Grades - based on hours studied', vAxes: { // Adds titles to each axis. 0: {title: 'Hours Studied'}, 1: {title: 'Final Exam Grade'} } }; function drawMaterialChart() { var materialChart = new google.charts.Scatter(chartDiv); materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.ScatterChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; } drawMaterialChart(); };
แผนภูมิ X ยอดนิยม
หมายเหตุ: แกน X ยอดนิยมใช้ได้เฉพาะกับแผนภูมิเนื้อหา (เช่น ที่มีแพ็กเกจ scatter
)
หากต้องการเพิ่มป้ายกํากับและชื่อในแกน X ไว้ที่ด้านบนสุดของแผนภูมิ ไม่ใช่ด้านล่างสุด คุณก็ทําใน "แผนภูมิเนื้อหา" ได้ด้วยตัวเลือก axes.x
google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82], [0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, axes: { x: { 0: {side: 'top'} } } }; var chart = new google.charts.Scatter(document.getElementById('scatter_top_x')); chart.draw(data, google.charts.Scatter.convertOptions(options)); }
กําลังโหลด
ชื่อแพ็กเกจ google.charts.load
คือ "corechart"
และชื่อแพ็กเกจของการแสดงภาพคือ google.visualization.ScatterChart
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.ScatterChart(container);
สําหรับแผนภูมิกระจาย ชื่อแพ็กเกจของ google.charts.load
คือ "scatter"
และชื่อของคลาสการแสดงภาพคือ google.charts.Scatter
google.charts.load("current", {packages: ["scatter"]});
var visualization = new google.charts.Scatter(container);
รูปแบบข้อมูล
แถว: แต่ละแถวในตารางแสดงชุดจุดข้อมูลที่มีค่าแกน X เหมือนกัน
คอลัมน์
คอลัมน์ 0 | คอลัมน์ที่ 1 | ... | คอลัมน์ N | |
---|---|---|---|---|
จุดประสงค์ในการใช้: | ค่าจุดข้อมูล X | ค่าชุด 1 Y | ... | ค่า Y ของชุดหนังสือ |
ประเภทข้อมูล: | สตริง ตัวเลข หรือวันที่/วันที่และเวลา/เวลาของวัน | สตริง ตัวเลข หรือวันที่/วันที่และเวลา/เวลาของวัน | ... | สตริง ตัวเลข หรือวันที่/วันที่และเวลา/เวลาของวัน |
บทบาท: | ข้อมูล | ข้อมูล | ... | ข้อมูล |
บทบาทของคอลัมน์ที่ไม่บังคับ: | ไม่มี |
... |
หากต้องการระบุหลายชุด ให้ระบุคอลัมน์ Y แกนอย่างน้อย 2 คอลัมน์ และระบุค่า Y ในคอลัมน์ Y เพียงคอลัมน์เดียว
ค่า X | ค่าชุด 1 Y | ค่าชุด 2 Y |
---|---|---|
10 | null | 75 |
20 | null | 18 |
33 | null | 22 |
55 | 16 | null |
14 | 61 | null |
48 | 3 | null |
ตัวเลือกการกําหนดค่า
ชื่อ | |
---|---|
เป้าหมายการรวม |
วิธีการรวมข้อมูลประเภทต่างๆ ลงในเคล็ดลับเครื่องมือ
โดยปกติแล้วจะใช้
aggregationTarget ร่วมกับ selectionMode และ tooltip.trigger เช่น
var options = { // Allow multiple // simultaneous selections. selectionMode: 'multiple', // Trigger tooltips // on selections. tooltip: {trigger: 'selection'}, // Group selections // by x-value. aggregationTarget: 'category', }; ประเภท: สตริง
ค่าเริ่มต้น: "อัตโนมัติ"
|
ภาพเคลื่อนไหว.ระยะเวลา |
ระยะเวลาของภาพเคลื่อนไหวเป็นมิลลิวินาที ดูรายละเอียดได้ที่เอกสารประกอบเกี่ยวกับภาพเคลื่อนไหว ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
|
การปรับขนาดภาพเคลื่อนไหว |
ฟังก์ชันการค่อยๆ เปลี่ยนที่ใช้กับภาพเคลื่อนไหว โดยมีตัวเลือกดังต่อไปนี้
ประเภท: สตริง
ค่าเริ่มต้น: "เชิงเส้น"
|
ภาพเคลื่อนไหว.startup |
กําหนดว่าแผนภูมิจะแสดงภาพเคลื่อนไหวของการวาดครั้งแรกหรือไม่ หาก ประเภท: บูลีน
ค่าเริ่มต้น เท็จ
|
ข้อมูลรูปแบบคําอธิบายประกอบ |
สําหรับแผนภูมิที่รองรับหมายเหตุ ออบเจ็กต์ var options = { annotations: { boxStyle: { // Color of the box outline. stroke: '#888', // Thickness of the box outline. strokeWidth: 1, // x-radius of the corner curvature. rx: 10, // y-radius of the corner curvature. ry: 10, // Attributes for linear gradient fill. gradient: { // Start color for gradient. color1: '#fbf6a7', // Finish color for gradient. color2: '#33b679', // Where on the boundary to start and // end the color1/color2 gradient, // relative to the upper left corner // of the boundary. x1: '0%', y1: '0%', x2: '100%', y2: '100%', // If true, the boundary for x1, // y1, x2, and y2 is the box. If // false, it's the entire chart. useObjectBoundingBoxUnits: true } } } }; ปัจจุบันตัวเลือกนี้รองรับแผนภูมิพื้นที่ แผนภูมิแท่ง คอลัมน์ คอมโบ บรรทัด และแผนภูมิกระจาย แผนภูมิหมายเหตุไม่รองรับ ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
คําอธิบายประกอบ datum |
สําหรับแผนภูมิที่รองรับหมายเหตุ ออบเจ็กต์
annotations.datum ช่วยให้คุณลบล้างตัวเลือกของ Google Charts สําหรับคําอธิบายประกอบที่ให้ไว้สําหรับองค์ประกอบข้อมูลแต่ละรายการได้ (เช่น ค่าที่แสดงกับแท่งแต่ละแท่งในแผนภูมิแท่ง) คุณสามารถควบคุมสีด้วย annotations.datum.stem.color ความยาวก้านจับที่มี annotations.datum.stem.length และรูปแบบด้วย annotations.datum.style
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: สีคือ "สีดํา" ความยาวคือ 12 รูปแบบคือ "จุด"
|
คําอธิบายประกอบ.โดเมน |
สําหรับแผนภูมิที่รองรับหมายเหตุ ออบเจ็กต์
annotations.domain จะช่วยให้คุณลบล้างตัวเลือกของ Google Charts สําหรับคําอธิบายประกอบที่ระบุให้โดเมนได้ (แกนหลักของแผนภูมิ เช่น แกน X ในแผนภูมิเส้นทั่วไป) คุณสามารถควบคุมสีด้วย annotations.domain.stem.color ความยาวก้านจับที่มี annotations.domain.stem.length และรูปแบบด้วย annotations.domain.style
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: สีคือ "สีดํา" ความยาวคือ 5 รูปแบบคือ "จุด"
|
คําอธิบายประกอบ.contrast |
สําหรับแผนภูมิที่รองรับคําอธิบายประกอบ บูลีน
annotations.highContrast จะช่วยให้คุณลบล้างสีของคําอธิบายประกอบที่ Google แผนภูมิเลือกได้ โดยค่าเริ่มต้น annotations.highContrast จะเป็นจริง ซึ่งทําให้แผนภูมิเลือกสีคําอธิบายประกอบที่มีคอนทราสต์ที่ดี ได้แก่ สีอ่อนบนพื้นหลังสีเข้มและสีเข้มบนแสง หากตั้งค่า annotations.highContrast เป็น "เท็จ" และไม่ระบุสีของคําอธิบายประกอบของคุณเอง Google Charts จะใช้สีชุดเริ่มต้นของคําอธิบายประกอบ
ประเภท: บูลีน
ค่าเริ่มต้น: จริง
|
คําอธิบายประกอบ.stem |
สําหรับแผนภูมิที่รองรับคําอธิบายประกอบ ออบเจ็กต์
annotations.stem ช่วยให้คุณลบล้างตัวเลือกของ Google Charts สําหรับรูปแบบก้านย่อยได้ คุณสามารถควบคุมสีด้วย annotations.stem.color และความยาวก้ามปูด้วย annotations.stem.length โปรดทราบว่าตัวเลือกความยาวของต้นทางไม่มีผลต่อคําอธิบายประกอบที่มีรูปแบบ 'line' : สําหรับคําอธิบายประกอบdtum
ของ 'line' ความยาวต้นทางจะเท่ากันกับข้อความเสมอ และสําหรับคําอธิบายประกอบโดเมน 'line' ก้านของส่วนขยายจะขยาย
ทั่วทั้งแผนภูมิ
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: สีเป็น "สีดํา" ความยาวคือ 5 รายการสําหรับคําอธิบายประกอบโดเมน และ 12 สําหรับคําอธิบายประกอบข้อมูล
|
คําอธิบายประกอบ |
สําหรับแผนภูมิที่รองรับหมายเหตุ ตัวเลือก
annotations.style จะช่วยให้คุณลบล้างตัวเลือกประเภทคําอธิบายประกอบใน Google Charts ได้ ซึ่งอาจเป็น 'line' หรือ 'point' ก็ได้
ประเภท: สตริง
ค่าเริ่มต้น: 'point'
|
คําอธิบายประกอบข้อความรูปแบบ |
สําหรับแผนภูมิที่รองรับหมายเหตุ ออบเจ็กต์
annotations.textStyle จะควบคุมลักษณะที่ปรากฏของคําอธิบายประกอบ
var options = { annotations: { textStyle: { fontName: 'Times-Roman', fontSize: 18, bold: true, italic: true, // The color of the text. color: '#871b47', // The color of the text outline. auraColor: '#d799ae', // The transparency of the text. opacity: 0.8 } } }; ปัจจุบันตัวเลือกนี้รองรับแผนภูมิพื้นที่ แผนภูมิแท่ง คอลัมน์ คอมโบ บรรทัด และแผนภูมิกระจาย แผนภูมิหมายเหตุไม่รองรับ ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
แกนชื่อตําแหน่ง |
ตําแหน่งการวางชื่อแกน เทียบกับพื้นที่แผนภูมิ ค่าที่รองรับมีดังต่อไปนี้
ประเภท: สตริง
ค่าเริ่มต้น: "ออก"
|
สีพื้นหลัง |
สีพื้นหลังของพื้นที่หลักของแผนภูมิ อาจเป็นสตริงสี HTML ที่เรียบง่าย เช่น ประเภท: สตริงหรือออบเจ็กต์
ค่าเริ่มต้น: "สีขาว"
|
พื้นหลังสีขีด |
สีของเส้นขอบแผนภูมิเป็นสตริงสี HTML ประเภท: สตริง
ค่าเริ่มต้น: "#666"
|
พื้นหลังของสี.ความกว้างความกว้าง |
ความกว้างเส้นขอบเป็นพิกเซล ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
|
พื้นหลังสีเติม |
สีเติมของแผนภูมิเป็นสตริงสี HTML ประเภท: สตริง
ค่าเริ่มต้น: "สีขาว"
|
ชื่อแผนภูมิ |
สําหรับแผนภูมิวัสดุ ตัวเลือกนี้จะระบุชื่อ ประเภท: สตริง
ค่าเริ่มต้น: Null
|
แผนภูมิชื่อรอง |
สําหรับแผนภูมิสื่อ ตัวเลือกนี้จะระบุคําบรรยาย เฉพาะแผนภูมิเนื้อหาเท่านั้นที่รองรับคําบรรยาย ประเภท: สตริง
ค่าเริ่มต้น: Null
|
แผนภูมิพื้นที่ |
ออบเจ็กต์ที่มีสมาชิกในการกําหนดค่าตําแหน่งและขนาดของพื้นที่แผนภูมิ (ที่มีการวาดแผนภูมิเอง ยกเว้นแกนและคําอธิบาย) รองรับ 2 รูปแบบ ได้แก่ ตัวเลขหรือตัวเลขตามด้วย % ตัวเลขง่ายๆ คือค่าพิกเซล ตัวเลขตามด้วย % คือเปอร์เซ็นต์ เช่น ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
แผนภูมิพื้นที่พื้นหลังพื้นหลัง |
สีพื้นหลังของแผนภูมิ เมื่อใช้สตริง อาจเป็นสตริงเลขฐานสิบหก
(เช่น "#fdc") หรือชื่อสีภาษาอังกฤษ เมื่อใช้ออบเจ็กต์ คุณจะระบุพร็อพเพอร์ตี้ต่อไปนี้ได้
ประเภท: สตริงหรือออบเจ็กต์
ค่าเริ่มต้น: "สีขาว"
|
แผนภูมิพื้นที่ซ้าย |
วิธีการวาดแผนภูมิจากเส้นขอบด้านซ้าย ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
แผนภูมิพื้นที่ |
วิธีการวาดแผนภูมิจากเส้นขอบด้านบน ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
พื้นที่แผนภูมิ |
ความกว้างของพื้นที่แผนภูมิ ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
พื้นที่แผนภูมิ |
ความสูงของพื้นที่แผนภูมิ ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
สี |
สีที่ใช้สําหรับองค์ประกอบของแผนภูมิ อาร์เรย์ของสตริง ซึ่งเอลิเมนต์แต่ละรายการเป็นสตริงสี HTML เช่น ประเภท: อาร์เรย์ของสตริง
ค่าเริ่มต้น: สีเริ่มต้น
|
Crosshair |
ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ hhairair สําหรับแผนภูมิ ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
ครอสแฮร์สี |
สีของเครื่องหมายกากบาท แสดงเป็นชื่อสี (เช่น "สีน้ําเงิน") หรือค่า RGB (เช่น "#adf") ประเภท: สตริง
ประเภท: ค่าเริ่มต้น
|
Crosshair.highlight |
ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ครอสเฮิร์ตเมื่อโฟกัส ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: ค่าเริ่มต้น
|
Crosshair.opacity |
ความทึบแสงของ Crosshair โดย ประเภท: ตัวเลข
ค่าเริ่มต้น: 1.0
|
Crosshair.orientation |
การวางแนวผมแบบแนวนอน สามารถเป็น "แนวตั้ง" สําหรับผมตรงเท่านั้น "แนวนอน" สําหรับผมแนวนอนเท่านั้น หรือ "ทั้ง 2 แบบ" สําหรับผมกากบาทแบบดั้งเดิม ประเภท: สตริง
ค่าเริ่มต้น: 'ทั้ง'
|
Crosshair.selected |
ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ Crosshair ที่เลือก ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: ค่าเริ่มต้น
|
ทริกเกอร์ข้าม |
เวลาที่ควรจะแสดงเครื่องหมายกากบาท: ใน ประเภท: สตริง
ค่าเริ่มต้น: 'ทั้ง'
|
เส้นโค้ง |
ควบคุมเส้นโค้งของเส้นเมื่อความกว้างของเส้นไม่ใช่ 0 อาจมีสถานะใดสถานะหนึ่งต่อไปนี้
ประเภท:สตริง
ค่าเริ่มต้น: "ไม่มี"
|
ความทึบข้อมูล |
ความโปร่งใสของจุดข้อมูล โดยค่า 1.0 คือทึบแสงและ 0.0 โปร่งใสทั้งหมด ในแผนภูมิกระจาย ฮิสโตแกรม บาร์ และแผนภูมิคอลัมน์ หมายถึงข้อมูลที่มองเห็นได้ นั่นคือ จุดในแผนภูมิกระจายและสี่เหลี่ยมผืนผ้าอื่นๆ ในแผนภูมิที่การเลือกข้อมูลจะสร้างจุด เช่น แผนภูมิเส้นและแผนภูมิพื้นที่ ซึ่งหมายถึงวงกลมที่ปรากฏเมื่อวางเมาส์เหนือรายการหรือรายการที่เลือก แผนภูมิผสมจะแสดงทั้ง 2 ลักษณะการทํางานและตัวเลือกนี้ไม่มีผลต่อแผนภูมิอื่นๆ (หากต้องการเปลี่ยนความทึบแสงของเส้นแนวโน้ม โปรดดูความทึบแสงของเส้นแนวโน้ม) ประเภท: ตัวเลข
ค่าเริ่มต้น: 1.0
|
เปิดใช้การโต้ตอบ |
แผนภูมินี้ทําให้เกิดเหตุการณ์ของผู้ใช้หรือตอบสนองต่อการโต้ตอบของผู้ใช้ หากเป็นเท็จ แผนภูมิจะไม่ส่ง "เลือก" หรือเหตุการณ์อื่นๆ ที่อิงตามการโต้ตอบ (แต่จะส่งเหตุการณ์ที่พร้อมแสดงหรือมีข้อผิดพลาด) และจะไม่แสดงข้อความที่แสดงเมื่อเลื่อนเมาส์ผ่าน หรือมีการเปลี่ยนแปลงโดยขึ้นอยู่กับอินพุตของผู้ใช้ ประเภท: บูลีน
ค่าเริ่มต้น: จริง
|
explorer |
ตัวเลือก ฟีเจอร์นี้เป็นแบบทดลองและอาจมีการเปลี่ยนแปลงในรุ่นในอนาคต หมายเหตุ: เครื่องมือสํารวจจะใช้งานได้กับแกนอย่างต่อเนื่อง (เช่น ตัวเลขหรือวันที่) ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
เครื่องมือสํารวจ |
เครื่องมือสํารวจ Google Charts รองรับการดําเนินการ 3 รายการต่อไปนี้
ประเภท: อาร์เรย์ของสตริง
ค่าเริ่มต้น: ['dragToPan', 'rightClickToReset']
|
เครื่องมือสํารวจ |
โดยค่าเริ่มต้น ผู้ใช้จะเลื่อนได้ทั้งในแนวนอนและแนวตั้งเมื่อใช้ตัวเลือก ประเภท: สตริง
ค่าเริ่มต้น: การแพนทั้งในแนวนอนและแนวตั้ง
|
explorer.keepInBounds |
โดยค่าเริ่มต้น ผู้ใช้จะเลื่อนไปยังส่วนต่างๆ ได้โดยไม่คํานึงถึงข้อมูล ไม่ว่าจะอยู่ที่ใด ระบบจะไม่ใช้ ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
explorer.maxZoomIn |
ความยาวสูงสุดที่นักสํารวจสามารถซูมเข้าได้ โดยค่าเริ่มต้น ผู้ใช้จะซูมเข้าได้มากพอที่จะเห็นมุมมองต้นฉบับเพียง 25% การตั้งค่า
ประเภท: ตัวเลข
ค่าเริ่มต้น: 0.25
|
explorer.maxZoomOut |
ค่าสูงสุดที่นักสํารวจสามารถซูมออก โดยค่าเริ่มต้นแล้ว ผู้ใช้จะสามารถซูมออกจนเพียงพอที่แผนภูมิจะใช้เฉพาะพื้นที่ 1/4 ของพื้นที่ว่าง การตั้งค่า
ประเภท: ตัวเลข
ค่าเริ่มต้น: 4
|
explorer.zoomDelta |
เมื่อผู้ใช้ซูมเข้าหรือออก ประเภท: ตัวเลข
ค่าเริ่มต้น: 1.5
|
ขนาดแบบอักษร |
ขนาดแบบอักษรเริ่มต้น (หน่วยเป็นพิกเซล) ของข้อความทั้งหมดในแผนภูมิ คุณลบล้างค่านี้ได้โดยใช้พร็อพเพอร์ตี้สําหรับองค์ประกอบแผนภูมิบางรายการ ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
ชื่อแบบอักษร |
แบบอักษรเริ่มต้นของข้อความทั้งหมดในแผนภูมิ คุณลบล้างค่านี้ได้โดยใช้พร็อพเพอร์ตี้สําหรับองค์ประกอบแผนภูมิบางรายการ ประเภท: สตริง
ค่าเริ่มต้น: "eCPM"
|
ForceIFrame |
วาดแผนภูมิภายในเฟรมแบบอินไลน์ (โปรดทราบว่าใน IE8 ระบบจะละเว้นตัวเลือกนี้ แผนภูมิ IE8 ทั้งหมดจะวาดใน i-frame) ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
HAXIS |
ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าองค์ประกอบแกนนอนต่างๆ หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบตัวอักษรของออบเจ็กต์ได้ ดังที่แสดงด้านล่างนี้ { title: 'Hello', titleTextStyle: { color: '#FF0000' } } ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
hAxis.baseline |
เส้นฐานสําหรับแกนนอน ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
สีฐาน hAxis.baseline |
สีของเส้นฐานสําหรับแกนแนวนอน อาจเป็นสตริงสี HTML ใดก็ได้ เช่น ประเภท: ตัวเลข
ค่าเริ่มต้น: "ดํา"
|
hAxis.direction |
ทิศทางที่ค่าในแกนนอนเติบโตขึ้น ระบุ ประเภท: 1 หรือ -1
ค่าเริ่มต้น: 1
|
รูปแบบ hAxis |
สตริงรูปแบบสําหรับป้ายกํากับของแกนตัวเลข นี่เป็นชุดย่อยของชุดรูปแบบ ICU เช่น
การจัดรูปแบบจริงที่ใช้กับป้ายกํากับมาจากภาษาที่โหลด API ดูรายละเอียดเพิ่มเติมได้ที่การโหลดแผนภูมิที่มีภาษาเฉพาะ
ในการคํานวณค่าเครื่องหมายถูกและตารางกริด ตัวเลือกชุดค่าผสมหลายรายการของตัวเลือกตารางกริดที่เกี่ยวข้องทั้งหมดจะได้รับการพิจารณา และจะแสดงค่าสํารองหากป้ายกํากับเครื่องหมายถูกที่ซ้ําจะซ้ํากันหรือทับซ้อนกัน
ดังนั้น คุณสามารถระบุ ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ
|
hAxis.gridlines |
ออบเจ็กต์ที่มีพร็อพเพอร์ตี้เพื่อกําหนดค่าเส้นตารางในแกนแนวนอน โปรดทราบว่าเส้นตารางกริดของแกนแนวนอนจะถูกวาดในแนวตั้ง หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบตัวอักษรของออบเจ็กต์ได้ดังที่แสดงด้านล่างนี้ {color: '#333', minSpacing: 20} ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
hAxis.gridlines.color |
สีของเส้นตารางแนวนอนภายในพื้นที่แผนภูมิ ระบุสตริงสี HTML ที่ถูกต้อง ประเภท: สตริง
ค่าเริ่มต้น: "#CCC"
|
hAxis.gridlines.count |
จํานวนเส้นตารางแนวนอนโดยประมาณในพื้นที่แผนภูมิ
หากคุณระบุจํานวนบวกสําหรับ ประเภท: ตัวเลข
ค่าเริ่มต้น: -1
|
hAxis.gridlines.units |
ลบล้างรูปแบบเริ่มต้นสําหรับแง่มุมต่างๆ ของข้อมูลประเภทวันที่/วันที่และเวลา/ช่วงเวลาของวัน เมื่อใช้ร่วมกับตารางกริดที่คํานวณโดยแผนภูมิ อนุญาตการจัดรูปแบบปี เดือน วัน ชั่วโมง นาที วินาที และมิลลิวินาที รูปแบบทั่วไปคือ gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } ดูข้อมูลเพิ่มเติมได้ในวันที่และเวลา ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
hAxis.minorGridlines |
ออบเจ็กต์ที่มีสมาชิกในการกําหนดค่าตารางกริดย่อยบนแกนแนวนอน ซึ่งคล้ายกับตัวเลือก hAxis.gridlines ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
hAxis.minorGridlines.color |
สีของตารางกริดย่อยแนวนอนภายในพื้นที่แผนภูมิ ระบุสตริงสี HTML ที่ถูกต้อง ประเภท: สตริง
ค่าเริ่มต้น: ชุดค่าผสมของเส้นตารางและสีพื้นหลัง
|
hAxis.minorGridlines.count |
ตัวเลือก ประเภท: ตัวเลข
ค่าเริ่มต้น:1
|
hAxis.minorGridlines.units |
ลบล้างรูปแบบเริ่มต้นสําหรับแง่มุมต่างๆ ของข้อมูลประเภทวันที่/วันที่/เวลาของวัน เมื่อใช้ร่วมกับแผนภูมิที่คํานวณเล็กน้อยในตารางกริด อนุญาตการจัดรูปแบบปี เดือน วัน ชั่วโมง นาที วินาที และมิลลิวินาที รูปแบบทั่วไปคือ gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } ดูข้อมูลเพิ่มเติมได้ในวันที่และเวลา ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
สเกล hAxis.logScale |
พร็อพเพอร์ตี้ ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
ประเภท hAxis.scaleType |
พร็อพเพอร์ตี้
ประเภท: สตริง
ค่าเริ่มต้น: Null
|
ตําแหน่งข้อความ hAxis.textPosition |
ตําแหน่งของข้อความแกนแนวนอนโดยสัมพันธ์กับพื้นที่แผนภูมิ ค่าที่รองรับ: "out", "in", "none" ประเภท: สตริง
ค่าเริ่มต้น: "ออก"
|
รูปแบบข้อความ hAxis.text |
ออบเจ็กต์ที่ระบุรูปแบบข้อความของแกนนอน ออบเจ็กต์มีรูปแบบต่อไปนี้ { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
HAxis.ticks |
แทนที่เครื่องหมายถูกบนแกน X ที่สร้างขึ้นโดยอัตโนมัติด้วยอาร์เรย์ที่ระบุ องค์ประกอบแต่ละรายการของอาร์เรย์ควรเป็นค่าเครื่องหมายถูกที่ถูกต้อง (เช่น จํานวน วันที่ วันที่ หรือช่วงเวลาของวัน) หรือออบเจ็กต์ หากเป็นออบเจ็กต์ ควรมีพร็อพเพอร์ตี้
ระบบจะขยาย viewWindow โดยอัตโนมัติเพื่อรวมเครื่องหมายต่ําสุดและต่ําสุด เว้นแต่คุณจะระบุ ตัวอย่าง:
ประเภท: อาร์เรย์ขององค์ประกอบ
ค่าเริ่มต้น: อัตโนมัติ
|
ชื่อ hAxis.title |
พร็อพเพอร์ตี้ ประเภท: สตริง
ค่าเริ่มต้น: Null
|
รูปแบบข้อความ hAxis.titleText |
ออบเจ็กต์ที่ระบุรูปแบบข้อความชื่อแกนนอน ออบเจ็กต์มีรูปแบบต่อไปนี้ { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.maxValue |
ย้ายค่าสูงสุดของแกนนอนไปยังค่าที่ระบุโดยให้อยู่ทางด้านขวาในแผนภูมิส่วนใหญ่ จะไม่มีผลหากตั้งค่าเป็นค่าที่น้อยกว่าค่าสูงสุด x ของข้อมูล
ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
haxis.minValue |
ย้ายค่าขั้นต่ําของแกนนอนไปยังค่าที่ระบุ ซึ่งจะอยู่ทางซ้ายในแผนภูมิส่วนใหญ่ จะไม่มีผลหากตั้งค่าเป็นค่าที่มากกว่าค่า x ขั้นต่ําของข้อมูล
ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
hAxis.viewWindowMode |
ระบุวิธีปรับขนาดแกนแนวนอนเพื่อแสดงผลค่าภายในแผนภูมิ ระบบรองรับค่าสตริงต่อไปนี้
ประเภท: สตริง
ค่าเริ่มต้น:
เทียบเท่ากับ "pretty" แต่
haxis.viewWindow.min และ haxis.viewWindow.max จะมีความสําคัญเหนือกว่าหากใช้
|
haxis.viewWindow |
ระบุช่วงการครอบตัดของแกนแนวนอน ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
hAxis.viewWindow.max |
ค่าข้อมูลแนวนอนสูงสุดที่จะแสดง ไม่สนใจเมื่อ ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
hAxis.viewWindow.min |
ค่าข้อมูลแนวนอนขั้นต่ําที่จะแสดง ไม่สนใจเมื่อ ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
ความสูง |
ความสูงของแผนภูมิเป็นพิกเซล ประเภท: ตัวเลข
ค่าเริ่มต้น: ความสูงขององค์ประกอบที่มี
|
คําอธิบาย |
ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าแง่มุมต่างๆ ของคําอธิบาย หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบสัญพจน์ของออบเจ็กต์ได้ ดังที่แสดงด้านล่างนี้ {position: 'top', textStyle: {color: 'blue', fontSize: 16}} ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
Legend.alignment |
การจัดเรียงคําอธิบาย อาจมีสถานะใดสถานะหนึ่งต่อไปนี้
จุดเริ่มต้น กึ่งกลาง และจุดสิ้นสุดจะสัมพันธ์กับรูปแบบ เช่น แนวตั้งหรือแนวนอนของคําอธิบาย เช่น ในตํานาน "เริ่มต้น" "เริ่มต้น" และ "สิ้นสุด" อยู่ที่ด้านบนและด้านล่างตามลําดับ สําหรับคําอธิบาย "ด้านบน" "เริ่มต้น" และ "สิ้นสุด" อยู่ทางด้านซ้ายและขวาของพื้นที่นั้นตามลําดับ ค่าเริ่มต้นจะขึ้นอยู่กับตําแหน่งของคําอธิบาย สําหรับคําอธิบาย "ด้านล่าง" ค่าเริ่มต้นจะเป็น "ตรงกลาง" แต่คําอธิบายอื่นๆ จะมีค่าเริ่มต้นเป็น "เริ่มต้น" ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ
|
vibe.maxLines |
จํานวนบรรทัดสูงสุดในคําอธิบาย ตั้งค่านี้เป็นตัวเลขที่มากกว่า 1 บรรทัดเพื่อเพิ่มบรรทัดในคําอธิบาย หมายเหตุ: ตรรกะที่ใช้พิจารณาจํานวนบรรทัดจริงที่แสดงผลยังคงเป็น Flux ปัจจุบันตัวเลือกนี้ใช้งานได้เฉพาะเมื่อตํานาน 'ตําแหน่ง' เป็น "ด้านบน" ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
|
ดัชนีหน้า |
ดัชนีหน้าที่เน้นเลข 0 ที่เลือกครั้งแรกของคําอธิบาย ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
|
ตําแหน่ง. |
ตําแหน่งของคําอธิบาย อาจมีสถานะใดสถานะหนึ่งต่อไปนี้
ประเภท: สตริง
ค่าเริ่มต้น: "ขวา"
|
คําอธิบายข้อความรูปแบบ |
ออบเจ็กต์ที่ระบุรูปแบบข้อความของคําอธิบาย ออบเจ็กต์มีรูปแบบต่อไปนี้ { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
ความกว้างของเส้น |
ความกว้างของเส้นเป็นพิกเซล ใช้ 0 เพื่อซ่อนเส้นทั้งหมดและแสดงเฉพาะจุด ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
|
การวางแนว |
การวางแนวของแผนภูมิ เมื่อตั้งค่าเป็น ประเภท: สตริง
ค่าเริ่มต้น: "แนวนอน"
|
รูปทรง |
รูปร่างขององค์ประกอบข้อมูลแต่ละรายการ ได้แก่ "วงกลม" "รูปสามเหลี่ยม" "สี่เหลี่ยมจัตุรัส" "ไดมอนด์" "ดาว" หรือ "รูปหลายเหลี่ยม" ดูตัวอย่างในเอกสารประกอบของแต้ม ประเภท: สตริง
ค่าเริ่มต้น: "วงกลม"
|
ขนาดจุด |
เส้นผ่านศูนย์กลางของจุดข้อมูลในหน่วยพิกเซล ใช้ 0 เพื่อซ่อนจุดทั้งหมด คุณลบล้างค่าของชุดหนังสือแต่ละชุดได้โดยใช้พร็อพเพอร์ตี้ ประเภท: ตัวเลข
ค่าเริ่มต้น: 7
|
คะแนนที่มองเห็นได้ |
กําหนดว่าจะให้แสดงจุดหรือไม่ ตั้งค่าเป็น
และยังลบล้างได้โดยใช้บทบาทสไตล์ในรูปแบบ ประเภท: บูลีน
ค่าเริ่มต้น: จริง
|
โหมดการเลือก |
เมื่อ ประเภท: สตริง
ค่าเริ่มต้น: 'เดี่ยว'
|
ซีรีส์ |
อาร์เรย์ของออบเจ็กต์ที่แต่ละรายการอธิบายรูปแบบของชุดหนังสือที่เกี่ยวข้องในแผนภูมิ หากต้องการใช้ค่าเริ่มต้นสําหรับชุดหนังสือ ให้ระบุออบเจ็กต์เปล่า {} หากไม่ได้ระบุชุดหรือค่า ระบบจะใช้ค่าส่วนกลาง ออบเจ็กต์แต่ละรายการรองรับพร็อพเพอร์ตี้ต่อไปนี้
คุณระบุอาร์เรย์ของออบเจ็กต์โดยแต่ละรายการจะนําไปใช้กับชุดตามลําดับที่ระบุได้ หรือจะระบุออบเจ็กต์ที่มีออบเจ็กต์คีย์ตัวเลขซึ่งระบุชุดอักขระที่ใช้ได้ ตัวอย่างเช่น การประกาศ 2 รายการต่อไปนี้เหมือนกัน และประกาศชุดแรกเป็นสีดําและหายไปจากคําอธิบาย ส่วนรายการที่ 4 เป็นสีแดงและไม่ปรากฏในคําอธิบาย series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } ประเภท: อาร์เรย์ของออบเจ็กต์หรือออบเจ็กต์ที่มีออบเจ็กต์ที่ซ้อนกัน
ค่าเริ่มต้น: {}
|
ธีม [theme] |
ธีมคือชุดค่าตัวเลือกที่กําหนดไว้ล่วงหน้าซึ่งทํางานร่วมกันเพื่อให้ทํางานตามแผนภูมิหรือเอฟเฟกต์ภาพที่ต้องการ ตอนนี้มีเพียงธีมเดียวที่ใช้ได้
ประเภท: สตริง
ค่าเริ่มต้น: Null
|
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>}
|
เคล็ดลับเครื่องมือ |
การโต้ตอบของผู้ใช้ที่ทําให้เคล็ดลับเครื่องมือแสดง
ประเภท: สตริง
ค่าเริ่มต้น: "โฟกัส"
|
เส้นแนวโน้ม |
แสดงเส้นแนวโน้มในแผนภูมิในแผนภูมิที่รองรับ โดยค่าเริ่มต้น เราจะใช้เส้นแนวโน้มเชิงเส้น แต่ปรับแต่งด้วยตัวเลือก
เราระบุเทรนด์ไว้ตามชุดรายการ ดังนั้นตัวเลือกส่วนใหญ่ของคุณจะมีลักษณะดังนี้ var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
Trendslines.n.color |
สีของเส้นแนวโน้ม แสดงเป็นชื่อสีภาษาอังกฤษหรือสตริงฐานสิบหก ประเภท: สตริง
ค่าเริ่มต้น: สีเริ่มต้นของชุด
|
Trendylines.n.องศา |
สําหรับ
เส้นแนวโน้ม
ของ ประเภท: ตัวเลข
ค่าเริ่มต้น: 3
|
Trendslines.n.labelInLegend |
หากตั้งค่า เส้นแนวโน้ม จะแสดงในคําอธิบายเป็นสตริงนี้ ประเภท: สตริง
ค่าเริ่มต้น: Null
|
เส้นแนวโน้ม.n.lineWidth |
ความกว้างของเส้นในเส้นแนวโน้มเป็นพิกเซล ประเภท: ตัวเลข
ค่าเริ่มต้น: 2
|
เส้นแนวโน้ม.p.city |
ความโปร่งใสของเส้นแนวโน้มตั้งแต่ 0.0 (โปร่งใส) ถึง 1.0 (ทึบ) ประเภท: ตัวเลข
ค่าเริ่มต้น: 1.0
|
เส้นแนวโน้ม.n.pointSize |
เส้นแนวโน้ม
ถูกจํากัดโดยการเติมจุดจํานวนมากในแผนภูมิ ตัวเลือกที่ไม่ค่อยใช้กันนี้ช่วยให้คุณปรับแต่งขนาดของจุดได้ โดยปกติแล้ว ตัวเลือก ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
|
Trendslines.n.points ที่มองเห็นได้ |
เส้นแนวโน้ม
เกิดจากการประทับจุดจํานวนมากในแผนภูมิ ตัวเลือก ประเภท: บูลีน
ค่าเริ่มต้น: จริง
|
เส้นแนวโน้ม.n.showR2 |
จะแสดงสัมประสิทธิ์การตัดสินใจในเคล็ดลับเครื่องมือคําอธิบายหรือเส้นแนวโน้มหรือไม่ ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
Trendslines.ประเภท |
ไม่ว่า
เส้นแนวโน้ม
คือ ประเภท: สตริง
ค่าเริ่มต้น: เชิงเส้น
|
เส้นแนวโน้ม.n.visibleInLegend |
สมการเส้นแนวโน้มจะปรากฏในคําอธิบายหรือไม่ (จะปรากฏในเคล็ดลับเครื่องมือเส้นแนวโน้ม) ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
VAXIS |
ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าองค์ประกอบแกนแนวตั้งต่างๆ หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบสัญพจน์ของออบเจ็กต์ได้ ดังที่แสดงด้านล่างนี้ {title: 'Hello', titleTextStyle: {color: '#FF0000'}} ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
vAxis.baseline |
พร็อพเพอร์ตี้ ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
vAxis.baselineColor |
ระบุสีของเส้นฐานสําหรับแกนแนวตั้ง อาจเป็นสตริงสี HTML ใดก็ได้ เช่น ประเภท: ตัวเลข
ค่าเริ่มต้น: "ดํา"
|
vAxis.direction |
ทิศทางที่ค่าในแกนแนวตั้งเติบโต โดยค่าเริ่มต้น ค่าต่ําจะอยู่ที่ด้านล่างของแผนภูมิ ระบุ ประเภท: 1 หรือ -1
ค่าเริ่มต้น: 1
|
vAxis.format |
สตริงรูปแบบสําหรับป้ายกํากับของแกนตัวเลข นี่เป็นชุดย่อยของชุดรูปแบบ ICU
เช่น
การจัดรูปแบบจริงที่ใช้กับป้ายกํากับมาจากภาษาที่โหลด API ดูรายละเอียดเพิ่มเติมได้ที่การโหลดแผนภูมิที่มีภาษาเฉพาะ
ในการคํานวณค่าเครื่องหมายถูกและตารางกริด ตัวเลือกชุดค่าผสมหลายรายการของตัวเลือกตารางกริดที่เกี่ยวข้องทั้งหมดจะได้รับการพิจารณา และจะแสดงค่าสํารองหากป้ายกํากับเครื่องหมายถูกที่ซ้ําจะซ้ํากันหรือทับซ้อนกัน
ดังนั้น คุณสามารถระบุ ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ
|
vAxis.gridlines |
ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าเส้นตารางในแกนแนวตั้ง โปรดทราบว่าเส้นตารางของแกนแนวตั้งจะถูกวาดในแนวนอน หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบตัวอักษรของออบเจ็กต์ได้ ดังที่แสดงด้านล่างนี้ {color: '#333', minSpacing: 20} ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
vAxis.gridlines.color |
สีของเส้นตารางแนวตั้งภายในพื้นที่ของแผนภูมิ ระบุสตริงสี HTML ที่ถูกต้อง ประเภท: สตริง
ค่าเริ่มต้น: "#CCC"
|
vAxis.gridlines.count |
จํานวนเส้นตารางแนวนอนโดยประมาณในพื้นที่แผนภูมิ
หากคุณระบุจํานวนบวกสําหรับ ประเภท: ตัวเลข
ค่าเริ่มต้น: -1
|
vAxis.gridlines.units |
ลบล้างรูปแบบเริ่มต้นสําหรับแง่มุมต่างๆ ของข้อมูลประเภทวันที่/วันที่และเวลา/ช่วงเวลาของวัน เมื่อใช้ร่วมกับตารางกริดที่คํานวณโดยแผนภูมิ อนุญาตการจัดรูปแบบปี เดือน วัน ชั่วโมง นาที วินาที และมิลลิวินาที รูปแบบทั่วไปคือ gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]}, hours: {format: [/*format strings here*/]}, minutes: {format: [/*format strings here*/]}, seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]} } } ดูข้อมูลเพิ่มเติมได้ในวันที่และเวลา ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
vAxis.minorGridlines |
ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าตารางกริดย่อยในแกนแนวตั้ง ซึ่งคล้ายกับตัวเลือก vAxis.gridlines ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
vAxis.minorGridlines.color |
สีของตารางกริดย่อยแนวตั้งภายในพื้นที่แผนภูมิ ระบุสตริงสี HTML ที่ถูกต้อง ประเภท: สตริง
ค่าเริ่มต้น: ชุดค่าผสมของเส้นตารางและสีพื้นหลัง
|
vAxis.minorGridlines.count |
ตัวเลือก BigQueryGridlines.count ส่วนใหญ่เลิกใช้งานแล้ว ยกเว้นการปิดใช้ตารางกริดย่อยโดยตั้งค่าจํานวนเป็น 0 จํานวนเส้นตารางย่อยจะขึ้นอยู่กับช่วงเวลาระหว่างเส้นตารางหลัก (ดู vAxis.gridlines.interval) และพื้นที่ขั้นต่ําที่ต้องระบุ (ดู vAxis.minorGridlines.minSpacing) ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
|
vAxis.minorGridlines.units |
ลบล้างรูปแบบเริ่มต้นสําหรับแง่มุมต่างๆ ของข้อมูลประเภทวันที่/วันที่/เวลาของวัน เมื่อใช้ร่วมกับแผนภูมิที่คํานวณเล็กน้อยในตารางกริด อนุญาตการจัดรูปแบบปี เดือน วัน ชั่วโมง นาที วินาที และมิลลิวินาที รูปแบบทั่วไปคือ gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } ดูข้อมูลเพิ่มเติมได้ในวันที่และเวลา ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
vAxis.logScale |
หากเป็นจริง ให้แกนแนวตั้งเป็นสเกลลอการิทึม หมายเหตุ: ค่าทั้งหมดต้องเป็นบวก ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
ประเภท vAxis.scaleType |
พร็อพเพอร์ตี้
ประเภท: สตริง
ค่าเริ่มต้น: Null
|
vAxis.textPosition |
ตําแหน่งของข้อความแกนแนวตั้งเมื่อเทียบกับพื้นที่แผนภูมิ ค่าที่รองรับ: "out", "in", "none" ประเภท: สตริง
ค่าเริ่มต้น: "ออก"
|
vAxis.textStyle |
ออบเจ็กต์ที่ระบุรูปแบบข้อความของแกนแนวตั้ง ออบเจ็กต์มีรูปแบบต่อไปนี้ { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.ticks |
แทนที่จุดทําเครื่องหมายแกน Y ที่สร้างขึ้นโดยอัตโนมัติด้วยอาร์เรย์ที่ระบุ องค์ประกอบแต่ละรายการของอาร์เรย์ควรเป็นค่าเครื่องหมายถูกที่ถูกต้อง (เช่น จํานวน วันที่ วันที่ หรือช่วงเวลาของวัน) หรือออบเจ็กต์ หากเป็นออบเจ็กต์ ควรมีพร็อพเพอร์ตี้
ระบบจะขยาย viewWindow โดยอัตโนมัติเพื่อรวมเครื่องหมายต่ําสุดและต่ําสุด เว้นแต่คุณจะระบุ ตัวอย่าง:
ประเภท: อาร์เรย์ขององค์ประกอบ
ค่าเริ่มต้น: อัตโนมัติ
|
vAxis.title |
พร็อพเพอร์ตี้ ประเภท: สตริง
ค่าเริ่มต้น: ไม่มีชื่อ
|
vAxis.titleTextStyle |
ออบเจ็กต์ที่ระบุรูปแบบข้อความชื่อแกนแนวตั้ง ออบเจ็กต์มีรูปแบบต่อไปนี้ { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.maxValue |
ย้ายค่าสูงสุดของแกนแนวตั้งไปยังค่าที่ระบุ ซึ่งจะเลื่อนขึ้นในแผนภูมิส่วนใหญ่ ระบบจะไม่สนใจหากตั้งค่าเป็นค่าที่น้อยกว่าค่าสูงสุดของ y ของข้อมูล
ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
vAxis.minValue |
ย้ายค่าขั้นต่ําของแกนแนวตั้งไปยังค่าที่ระบุ ซึ่งจะลดลงในแผนภูมิส่วนใหญ่ จะไม่มีผลหากตั้งค่าเป็นค่าที่มากกว่าค่า y ต่ําสุดของข้อมูล
ประเภท: ตัวเลข
ค่าเริ่มต้น: Null
|
vAxis.viewWindowMode |
ระบุวิธีปรับขนาดแกนแนวตั้งเพื่อแสดงค่าภายในพื้นที่แผนภูมิ ระบบรองรับค่าสตริงต่อไปนี้
ประเภท: สตริง
ค่าเริ่มต้น:
เทียบเท่ากับ "pretty" แต่
vaxis.viewWindow.min และ vaxis.viewWindow.max จะมีความสําคัญเหนือกว่าหากใช้
|
vAxis.viewWindow |
ระบุช่วงการครอบตัดของแกนแนวตั้ง ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
vAxis.viewWindow.max |
ค่าของข้อมูลแนวตั้งสูงสุดที่จะแสดงผล ไม่สนใจเมื่อ ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
vAxis.viewWindow.min |
ค่าข้อมูลแนวตั้งขั้นต่ําที่จะแสดง ไม่สนใจเมื่อ ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
ความกว้าง |
ความกว้างของแผนภูมิเป็นพิกเซล ประเภท: ตัวเลข
ค่าเริ่มต้น: ความกว้างขององค์ประกอบที่มี
|
เมธอด
วิธีการ | |
---|---|
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() |
ล้างแผนภูมิและปล่อยทรัพยากรที่จัดสรรไว้ทั้งหมด ประเภทการคืนสินค้า: ไม่มี
|
เหตุการณ์
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้เหตุการณ์เหล่านี้ได้ที่การโต้ตอบพื้นฐาน การจัดการเหตุการณ์ และเหตุการณ์เริ่มทํางาน
ชื่อ | |
---|---|
animationfinish |
เริ่มทํางานเมื่อภาพเคลื่อนไหวการเปลี่ยนเสร็จสมบูรณ์ พร็อพเพอร์ตี้: ไม่มี
|
click |
เริ่มทํางานเมื่อผู้ใช้คลิกภายในแผนภูมิ ใช้เพื่อระบุได้เมื่อมีการคลิกชื่อ องค์ประกอบข้อมูล รายการคําอธิบาย แกน ตารางกริด หรือป้ายกํากับ พร็อพเพอร์ตี้: targetID
|
error |
เริ่มทํางานเมื่อเกิดข้อผิดพลาดเมื่อพยายามแสดงผลแผนภูมิ พร็อพเพอร์ตี้: รหัส ข้อความ
|
legendpagination |
เริ่มทํางานเมื่อผู้ใช้คลิกลูกศรใส่เลขหน้าคําอธิบาย ส่งคืนดัชนีหน้าเว็บตาม 0 ในตํานานปัจจุบันและจํานวนหน้าทั้งหมด พร็อพเพอร์ตี้: currentPageIndex, totalpages
|
onmouseover |
เริ่มทํางานเมื่อผู้ใช้วางเมาส์เหนือเอนทิตีภาพ ส่งคืนดัชนีแถวและคอลัมน์ขององค์ประกอบตารางข้อมูลที่เกี่ยวข้อง พร็อพเพอร์ตี้: แถว, คอลัมน์
|
onmouseout |
เริ่มทํางานเมื่อผู้ใช้เลื่อนเมาส์ออกจากเอนทิตีภาพ ส่งคืนดัชนีแถวและคอลัมน์ขององค์ประกอบตารางข้อมูลที่เกี่ยวข้อง พร็อพเพอร์ตี้: แถว, คอลัมน์
|
ready |
แผนภูมินี้พร้อมสําหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีการโทรหลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สําหรับเหตุการณ์นี้ก่อนที่เรียกใช้เมธอด พร็อพเพอร์ตี้: ไม่มี
|
select |
เริ่มทํางานเมื่อผู้ใช้คลิกเอนทิตีภาพ หากต้องการดูข้อมูลที่ได้รับเลือก โปรดโทรหา พร็อพเพอร์ตี้: ไม่มี
|
นโยบายข้อมูล
โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ ระบบจะไม่ส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ