ภาพรวม
แผนภูมิเส้นที่แสดงผลภายในเบราว์เซอร์โดยใช้ SVG หรือ VML แสดงเคล็ดลับเครื่องมือเมื่อวางเมาส์เหนือจุด
ตัวอย่าง
การต่อแถว
คุณสามารถสร้างความต่อเนื่องให้กับเส้นได้โดยตั้งค่าตัวเลือก curveType
เป็น function
โค้ดสําหรับสร้างแผนภูมินี้แสดงอยู่ด้านล่าง ข้อควรทราบในการใช้ตัวเลือก curveType: function
<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([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var options = { title: 'Company Performance', curveType: 'function', legend: { position: 'bottom' } }; var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options); } </script> </head> <body> <div id="curve_chart" style="width: 900px; height: 500px"></div> </body> </html>
การสร้างแผนภูมิเส้น Material
ในปี 2014 Google ได้ประกาศหลักเกณฑ์ที่มีเจตนาที่จะสนับสนุนรูปลักษณ์ทั่วไปในพร็อพเพอร์ตี้และแอป (เช่น แอป Android) ที่ทํางานบนแพลตฟอร์มของ Google เราเรียกการดําเนินการนี้ว่า Material Design เราจะให้บริการแผนภูมิ "หลัก" ของแผนภูมิหลักทั้งหมดของเรา คุณสามารถใช้รูปแบบต่างๆ ได้หากต้องการ
การสร้างแผนภูมิเส้น Material คล้ายกับการสร้างสิ่งที่เราเรียกว่า แผนภูมิเส้น "คลาสสิก"
คุณโหลด GoogleVisual API (แต่มีแพ็กเกจ 'line'
แทนแพ็กเกจ 'corechart'
) กําหนดตารางข้อมูล แล้วสร้างออบเจ็กต์ (แต่คลาส google.charts.Line
แทนที่จะเป็น google.visualization.LineChart
)
หมายเหตุ: แผนภูมิเนื้อหาจะใช้งานไม่ได้ใน Internet Explorer เวอร์ชันเก่า (IE8 และเวอร์ชันก่อนหน้าไม่รองรับ SVG ซึ่งแผนภูมิเนื้อหาต้องใช้)
แผนภูมิเส้น Material มีการปรับปรุงเล็กๆ น้อยๆ มากมายจากแผนภูมิเส้นคลาสสิก ได้แก่ ชุดสีที่มีประสิทธิภาพดีขึ้น มุมโค้งมน การจัดรูปแบบป้ายกํากับที่ชัดเจนยิ่งขึ้น ระยะห่างเริ่มต้นระหว่างชุดเนื้อหาที่ชัดเจนขึ้น เส้นตารางที่อ่อนลง และชื่อ (และการเพิ่มคําบรรยาย)
google.charts.load('current', {'packages':['line']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'Day'); data.addColumn('number', 'Guardians of the Galaxy'); data.addColumn('number', 'The Avengers'); data.addColumn('number', 'Transformers: Age of Extinction'); data.addRows([ [1, 37.8, 80.8, 41.8], [2, 30.9, 69.5, 32.4], [3, 25.4, 57, 25.7], [4, 11.7, 18.8, 10.5], [5, 11.9, 17.6, 10.4], [6, 8.8, 13.6, 7.7], [7, 7.6, 12.3, 9.6], [8, 12.3, 29.2, 10.6], [9, 16.9, 42.9, 14.8], [10, 12.8, 30.9, 11.6], [11, 5.3, 7.9, 4.7], [12, 6.6, 8.4, 5.2], [13, 4.8, 6.3, 3.6], [14, 4.2, 6.2, 3.4] ]); var options = { chart: { title: 'Box Office Earnings in First Two Weeks of Opening', subtitle: 'in millions of dollars (USD)' }, width: 900, height: 500 }; var chart = new google.charts.Line(document.getElementById('linechart_material')); chart.draw(data, google.charts.Line.convertOptions(options)); }
แผนภูมิ Material อยู่ในเบต้า ลักษณะที่ปรากฏและการโต้ตอบส่วนใหญ่ถือเป็นที่สิ้นสุด แต่ตัวเลือกต่างๆ ที่มีในแผนภูมิแบบคลาสสิกยังไม่มีให้บริการ คุณดูรายการตัวเลือกที่ระบบยังไม่รองรับในปัญหานี้ได้
วิธีประกาศตัวเลือกยังไม่เป็นที่สิ้นสุด ดังนั้นหากใช้ตัวเลือกคลาสสิก คุณจะต้องแปลงตัวเลือกดังกล่าวให้เป็นตัวเลือกสื่อการเรียนการสอนของชั้นเรียนโดยแทนที่บรรทัดนี้
chart.draw(data, options);
...ด้วยรูปแบบต่อไปนี้
chart.draw(data, google.charts.Line.convertOptions(options));
แผนภูมิ Y แบบ Y
บางครั้งคุณอาจต้องการแสดง 2 ชุดในแผนภูมิเส้นซึ่งมีแกน Y อิสระ 2 แกน ได้แก่ แกนซ้ายสําหรับชุดหนึ่ง และแกนที่เหมาะสมสําหรับอีกชุด ได้แก่
โปรดทราบว่าไม่เพียงแต่แกน Y 2 แกนของเราซึ่งติดป้ายกํากับต่างกัน ("อุณหภูมิ" กับ "แสงแดด") แต่แต่ละขนาดมีสเกลและเส้นตารางอิสระของตัวเอง หากต้องการปรับแต่งลักษณะการทํางานนี้ ให้ใช้ตัวเลือก vAxis.gridlines
และ vAxis.viewWindow
ในโค้ด Material ด้านล่าง ตัวเลือก axes
และ series
ร่วมกันจะระบุลักษณะที่ปรากฏของรูป Y ของแผนภูมิ ตัวเลือก series
จะระบุแกนที่จะใช้สําหรับแต่ละ ('Temps'
และ 'Daylight'
โดยไม่จําเป็นต้องเกี่ยวข้องกับชื่อคอลัมน์ในตารางข้อมูล) ตัวเลือก axes
จะทําให้แผนภูมินี้เป็นแผนภูมิคู่ Y ที่วางแกน 'Temps'
ทางด้านซ้าย และแกน 'Daylight'
ทางด้านขวา
ในโค้ดคลาสสิก โค้ดนี้จะแตกต่างกันเล็กน้อย คุณจะใช้ตัวเลือก vAxes
(หรือ hAxes
ในแผนภูมิแนวนอน) แทนตัวเลือก axes
นอกจากนี้ คุณยังใช้หมายเลขดัชนีเพื่อประสานงานชุดกับแกนโดยใช้ตัวเลือก targetAxisIndex
แทนการใช้ชื่อ
var materialOptions = { chart: { title: 'Average Temperatures and Daylight in Iceland Throughout the Year' }, width: 900, height: 500, series: { // Gives each series an axis name that matches the Y-axis below. 0: {axis: 'Temps'}, 1: {axis: 'Daylight'} }, axes: { // Adds labels to each axis; they don't have to match the axis names. y: { Temps: {label: 'Temps (Celsius)'}, Daylight: {label: 'Daylight'} } } };
var classicOptions = { title: 'Average Temperatures and Daylight in Iceland Throughout the Year', width: 900, height: 500, // Gives each series an axis that matches the vAxes number below. series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, vAxes: { // Adds titles to each axis. 0: {title: 'Temps (Celsius)'}, 1: {title: 'Daylight'} }, hAxis: { ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3), new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7), new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11) ] }, vAxis: { viewWindow: { max: 30 } } };
อันดับสูงสุด X
หมายเหตุ: แกน X ยอดนิยมใช้ได้เฉพาะกับแผนภูมิเนื้อหา (เช่น ที่มีแพ็กเกจ line
)
หากต้องการเพิ่มป้ายกํากับและชื่อในแกน X ไว้ที่ด้านบนสุดของแผนภูมิ ไม่ใช่ด้านล่างสุด คุณก็ทําใน "แผนภูมิเนื้อหา" ได้ด้วยตัวเลือก axes.x
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['line']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'Day'); data.addColumn('number', 'Guardians of the Galaxy'); data.addColumn('number', 'The Avengers'); data.addColumn('number', 'Transformers: Age of Extinction'); data.addRows([ [1, 37.8, 80.8, 41.8], [2, 30.9, 69.5, 32.4], [3, 25.4, 57, 25.7], [4, 11.7, 18.8, 10.5], [5, 11.9, 17.6, 10.4], [6, 8.8, 13.6, 7.7], [7, 7.6, 12.3, 9.6], [8, 12.3, 29.2, 10.6], [9, 16.9, 42.9, 14.8], [10, 12.8, 30.9, 11.6], [11, 5.3, 7.9, 4.7], [12, 6.6, 8.4, 5.2], [13, 4.8, 6.3, 3.6], [14, 4.2, 6.2, 3.4] ]); var options = { chart: { title: 'Box Office Earnings in First Two Weeks of Opening', subtitle: 'in millions of dollars (USD)' }, width: 900, height: 500, axes: { x: { 0: {side: 'top'} } } }; var chart = new google.charts.Line(document.getElementById('line_top_x')); chart.draw(data, google.charts.Line.convertOptions(options)); } </script> </head> <body> <div id="line_top_x"></div> </body> </html>
กําลังโหลด
ชื่อแพ็กเกจ google.charts.load
คือ "corechart"
และชื่อแพ็กเกจของการแสดงภาพคือ google.visualization.LineChart
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.LineChart(container);
สําหรับแผนภูมิเส้น Material ชื่อแพ็กเกจของ google.charts.load
คือ "line"
และชื่อของคลาสการแสดงภาพคือ google.charts.Line
google.charts.load("current", {packages: ["line"]});
var visualization = new google.charts.Line(container);
รูปแบบข้อมูล
แถว: แต่ละแถวในตารางแสดงชุดจุดข้อมูลที่มีตําแหน่งแกน X เดียวกัน
คอลัมน์
คอลัมน์ 0 | คอลัมน์ที่ 1 | ... | คอลัมน์ N | |
---|---|---|---|---|
จุดประสงค์ในการใช้: |
|
ค่าบรรทัดที่ 1 | ... | ค่าบรรทัด N |
ประเภทข้อมูล: |
|
number | ... | number |
บทบาท: | โดเมน | ข้อมูล | ... | ข้อมูล |
บทบาทของคอลัมน์ที่ไม่บังคับ: | ... |
ตัวเลือกการกําหนดค่า
ชื่อ | |
---|---|
เป้าหมายการรวม |
วิธีการรวมข้อมูลประเภทต่างๆ ลงในเคล็ดลับเครื่องมือ
โดยปกติแล้วจะใช้
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 ประเภท: สตริง
ค่าเริ่มต้น: "สีขาว"
|
แผนภูมิพื้นที่ |
ออบเจ็กต์ที่มีสมาชิกในการกําหนดค่าตําแหน่งและขนาดของพื้นที่แผนภูมิ (ที่มีการวาดแผนภูมิเอง ยกเว้นแกนและคําอธิบาย) รองรับ 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
|
โฟกัสเป้าหมาย |
ประเภทของเอนทิตีที่ได้รับโฟกัสเมื่อวางเมาส์เหนือเมาส์ และส่งผลต่อเอนทิตีที่เลือกด้วยการคลิกเมาส์ และองค์ประกอบตารางข้อมูลที่เชื่อมโยงกับเหตุการณ์ อาจมีสถานะใดสถานะหนึ่งต่อไปนี้
ในโฟกัสเป้าหมาย "หมวดหมู่" เคล็ดลับเครื่องมือจะแสดงค่าหมวดหมู่ทั้งหมด ซึ่งจะมีประโยชน์ในการเปรียบเทียบค่าของชุดหนังสือต่างๆ ประเภท: สตริง
ค่าเริ่มต้น: 'datum'
|
ขนาดแบบอักษร |
ขนาดแบบอักษรเริ่มต้น (หน่วยเป็นพิกเซล) ของข้อความทั้งหมดในแผนภูมิ คุณลบล้างค่านี้ได้โดยใช้พร็อพเพอร์ตี้สําหรับองค์ประกอบแผนภูมิบางรายการ ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
ชื่อแบบอักษร |
แบบอักษรเริ่มต้นของข้อความทั้งหมดในแผนภูมิ คุณลบล้างค่านี้ได้โดยใช้พร็อพเพอร์ตี้สําหรับองค์ประกอบแผนภูมิบางรายการ ประเภท: สตริง
ค่าเริ่มต้น: "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 ที่ตั้งค่า เช่น
สําหรับป้ายกํากับแกนวันที่ ข้อมูลนี้เป็นกลุ่มย่อยของการจัดรูปแบบวันที่
ชุดรูปแบบ ICU
เช่น การจัดรูปแบบจริงที่ใช้กับป้ายกํากับมาจากภาษาที่โหลด API ดูรายละเอียดเพิ่มเติมได้ที่การโหลดแผนภูมิที่มีภาษาเฉพาะ
ในการคํานวณค่าเครื่องหมายถูกและตารางกริด ตัวเลือกชุดค่าผสมหลายรายการของตัวเลือกตารางกริดที่เกี่ยวข้องทั้งหมดจะได้รับการพิจารณา และจะแสดงค่าสํารองหากป้ายกํากับเครื่องหมายถูกที่ซ้ําจะซ้ํากันหรือทับซ้อนกัน
ดังนั้น คุณสามารถระบุ
ตัวเลือกนี้ใช้ได้กับแกน ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ
|
hAxis.gridlines |
ออบเจ็กต์ที่มีพร็อพเพอร์ตี้เพื่อกําหนดค่าเส้นตารางในแกนแนวนอน โปรดทราบว่าเส้นตารางกริดของแกนแนวนอนจะถูกวาดในแนวตั้ง หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบตัวอักษรของออบเจ็กต์ได้ดังที่แสดงด้านล่างนี้ {color: '#333', minSpacing: 20}
ตัวเลือกนี้ใช้ได้กับแกน ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
hAxis.gridlines.color |
สีของเส้นตารางแนวนอนภายในพื้นที่แผนภูมิ ระบุสตริงสี HTML ที่ถูกต้อง ประเภท: สตริง
ค่าเริ่มต้น: "#CCC"
|
hAxis.gridlines.count |
จํานวนเส้นตารางแนวนอนโดยประมาณในพื้นที่แผนภูมิ
หากคุณระบุจํานวนบวกสําหรับ ประเภท: ตัวเลข
ค่าเริ่มต้น: -1
|
hAxis.gridlines.interval |
อาร์เรย์ของขนาด (เป็นค่าข้อมูล ไม่ใช่พิกเซล) ระหว่างเส้นตารางกริดที่อยู่ติดกัน ตัวเลือกนี้มีไว้สําหรับแกนตัวเลขเท่านั้นในขณะนี้ แต่เทียบเท่ากับตัวเลือก ประเภท: จํานวนระหว่าง 1 ถึง 10 แต่ไม่รวม 10
ค่าเริ่มต้น: ประมวลผลแล้ว
|
hAxis.gridlines.minSpacing |
พื้นที่หน้าจอขั้นต่ําเป็นพิกเซลระหว่างตารางกริดหลัก hAxis
ค่าเริ่มต้นสําหรับเส้นตารางหลักคือ ประเภท: ตัวเลข
ค่าเริ่มต้น: ประมวลผลแล้ว
|
hAxis.gridlines.multi |
ค่าตารางกริดและเครื่องหมายถูกทั้งหมดต้องเป็นหลายค่าของตัวเลือกนี้ โปรดทราบว่าจะไม่นับ 10 คูณกับกําลังของค่าหลายครั้ง ซึ่งต่างจากช่วงเวลา
คุณสามารถบังคับให้เห็บเป็นจํานวนเต็มได้โดยระบุ ประเภท: ตัวเลข
ค่าเริ่มต้น: 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.interval |
ตัวเลือก BigQueryGridlines.interval เหมือนกับตัวเลือกช่วงตารางกริดหลัก แต่ช่วงที่เลือกจะเป็นตัวหารคู่ของช่วงตารางกริดหลักเสมอ
ช่วงเวลาเริ่มต้นสําหรับสเกลเชิงเส้นคือ ประเภท: ตัวเลข
ค่าเริ่มต้น:1
|
hAxis.minorGridlines.minSpacing |
พื้นที่ว่างขั้นต่ําเป็นพิกเซลระหว่างตารางกริดย่อยที่อยู่ติดกันและระหว่างตารางกริดย่อยกับตารางกริดหลัก ค่าเริ่มต้นคือ 1/2 นาที minSpacing ของตารางกริดหลักสําหรับสเกลเชิงเส้น และ 1/5 minSpacing สําหรับสเกลบันทึก ประเภท: ตัวเลข
ค่าเริ่มต้น: ประมวลผลแล้ว
|
hAxis.minorGridlines.multi |
เช่นเดียวกับ ประเภท: ตัวเลข
ค่าเริ่มต้น: 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.allowContainerBoundaryTextCutoff |
หากเป็น "เท็จ" จะซ่อนป้ายกํากับด้านนอกสุดแทนที่จะครอบตัดด้วยคอนเทนเนอร์ของแผนภูมิ หากเป็น "จริง" อนุญาตให้มีการครอบตัดป้ายกํากับ ตัวเลือกนี้รองรับเฉพาะแกน ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
ข้อความ hAxis.slantedText |
หากเป็น "จริง" ให้วาดข้อความของแกนแนวนอนในมุมเพื่อช่วยให้ข้อความสมบูรณ์ยิ่งขึ้นตามแกน หากเป็น "เท็จ" ให้วาดข้อความแกนแนวนอนขึ้นตรง ลักษณะการทํางานเริ่มต้นคือข้อความที่ไม่เอียงหากพอดีทั้งหมดเมื่อวาดขึ้นด้านบน โปรดทราบว่าตัวเลือกนี้จะใช้ได้ก็ต่อเมื่อตั้งค่า ประเภท: บูลีน
ค่าเริ่มต้น: อัตโนมัติ
|
haxis.slantedTextAngle |
มุมของข้อความแกนแนวนอน หากวาดไว้ ไม่ต้องสนใจหาก ประเภท: หมายเลข, -90-90
ค่าเริ่มต้น: 30
|
hAxis.maxAlternation |
จํานวนระดับสูงสุดของข้อความแกนนอน หากป้ายกํากับของแกนข้อความหนาแน่นเกินไป เซิร์ฟเวอร์อาจเลื่อนป้ายกํากับใกล้เคียงขึ้นหรือลงเพื่อปรับป้ายกํากับให้อยู่ใกล้กันมากขึ้น ค่านี้ระบุจํานวนระดับที่จะใช้มากที่สุด เซิร์ฟเวอร์จะใช้ระดับน้อยลงได้หากป้ายกํากับพอดีโดยไม่ต้องซ้อนทับ วันที่และเวลาเริ่มต้นคือ 1 ประเภท: ตัวเลข
ค่าเริ่มต้น: 2
|
hAxis.maxTextLines |
จํานวนบรรทัดสูงสุดที่อนุญาตสําหรับป้ายกํากับข้อความ ป้ายกํากับอาจขยายไปหลายบรรทัดหากยาวเกินไป และจํานวนบรรทัดจะถูกจํากัดตามความสูงของพื้นที่ว่างโดยค่าเริ่มต้น ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
hAxis.minTextSpacing |
อนุญาตให้มีระยะห่างแนวนอนในแนวนอนเป็นพิกเซลขั้นต่ําระหว่างป้ายกํากับข้อความ 2 ป้ายที่อยู่ติดกัน ในกรณีที่มีการเว้นระยะห่างของป้ายกํากับมากเกินไปหรือยาวเกินไป การเว้นระยะห่างอาจลดลงตามเกณฑ์นี้ และในกรณีนี้ จะมีการใช้มาตรการลดป้ายกํากับ (เช่น การตัดป้ายกํากับหรือตัดป้ายกํากับบางส่วน) ออก ประเภท: ตัวเลข
ค่าเริ่มต้น: ค่าของ
hAxis.textStyle.fontSize |
hAxis.showTextAll |
จํานวนป้ายกํากับแกนแนวนอนที่จะแสดง โดย 1 หมายถึงแสดงป้ายกํากับทั้งหมด, 2 หมายถึงแสดงป้ายกํากับอื่นๆ ทั้งหมด และอื่นๆ ค่าเริ่มต้นคือพยายามแสดงป้ายกํากับให้ได้มากที่สุดโดยไม่ซ้อนทับกัน ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
hAxis.maxValue |
ย้ายค่าสูงสุดของแกนนอนไปยังค่าที่ระบุโดยให้อยู่ทางด้านขวาในแผนภูมิส่วนใหญ่ จะไม่มีผลหากตั้งค่าเป็นค่าที่น้อยกว่าค่าสูงสุด x ของข้อมูล
ตัวเลือกนี้ใช้ได้กับแกน ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
haxis.minValue |
ย้ายค่าขั้นต่ําของแกนนอนไปยังค่าที่ระบุ ซึ่งจะอยู่ทางซ้ายในแผนภูมิส่วนใหญ่ จะไม่มีผลหากตั้งค่าเป็นค่าที่มากกว่าค่า x ขั้นต่ําของข้อมูล
ตัวเลือกนี้ใช้ได้กับแกน ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
hAxis.viewWindowMode |
ระบุวิธีปรับขนาดแกนแนวนอนเพื่อแสดงผลค่าภายในแผนภูมิ ระบบรองรับค่าสตริงต่อไปนี้
ตัวเลือกนี้ใช้ได้กับแกน ประเภท: สตริง
ค่าเริ่มต้น:
เทียบเท่ากับ "pretty" แต่
haxis.viewWindow.min และ haxis.viewWindow.max จะมีความสําคัญเหนือกว่าหากใช้
|
haxis.viewWindow |
ระบุช่วงการครอบตัดของแกนแนวนอน ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
hAxis.viewWindow.max |
ไม่สนใจเมื่อ ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
hAxis.viewWindow.min |
ไม่สนใจเมื่อ ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
ความสูง |
ความสูงของแผนภูมิเป็นพิกเซล ประเภท: ตัวเลข
ค่าเริ่มต้น: ความสูงขององค์ประกอบที่มี
|
InterpolateNulls |
เดาว่าค่าของแต้มขาดหายไปหรือไม่ หากเป็นจริง ระบบจะเดาค่าของข้อมูลที่ขาดหายไปโดยอิงตามจุดใกล้เคียง หากเป็น "เท็จ" จะเป็นการออกจากบรรทัดในจุดที่ไม่รู้จัก
ระบบไม่รองรับแผนภูมินี้พื้นที่ที่มีตัวเลือก ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
คําอธิบาย |
ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าแง่มุมต่างๆ ของคําอธิบาย หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบสัญพจน์ของออบเจ็กต์ได้ ดังที่แสดงด้านล่างนี้ {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>}
|
เส้นไข่ปลา |
รูปแบบเปิดและปิดสําหรับเส้นประ เช่น ประเภท: อาร์เรย์ของตัวเลข
ค่าเริ่มต้น: Null
|
ความกว้างของเส้น |
ความกว้างของเส้นข้อมูลในพิกเซล ใช้ 0 เพื่อซ่อนเส้นทั้งหมดและแสดงเฉพาะจุด คุณลบล้างค่าของชุดหนังสือแต่ละชุดได้โดยใช้พร็อพเพอร์ตี้ ประเภท: ตัวเลข
ค่าเริ่มต้น: 2
|
การวางแนว |
การวางแนวของแผนภูมิ เมื่อตั้งค่าเป็น ประเภท: สตริง
ค่าเริ่มต้น: "แนวนอน"
|
รูปทรง |
รูปร่างขององค์ประกอบข้อมูลแต่ละรายการ ได้แก่ "วงกลม" "รูปสามเหลี่ยม" "สี่เหลี่ยมจัตุรัส" "ไดมอนด์" "ดาว" หรือ "รูปหลายเหลี่ยม" ดูตัวอย่างในเอกสารประกอบของแต้ม ประเภท: สตริง
ค่าเริ่มต้น: "วงกลม"
|
ขนาดจุด |
เส้นผ่านศูนย์กลางของจุดที่แสดงเป็นพิกเซล ใช้ 0 เพื่อซ่อนจุดทั้งหมด คุณลบล้างค่าของชุดหนังสือแต่ละชุดได้โดยใช้พร็อพเพอร์ตี้ ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
|
คะแนนที่มองเห็นได้ |
กําหนดว่าจะให้แสดงจุดหรือไม่ ตั้งค่าเป็น
และยังลบล้างได้โดยใช้บทบาทสไตล์ในรูปแบบ ประเภท: บูลีน
ค่าเริ่มต้น: จริง
|
หมวดหมู่ย้อนกลับ |
หากตั้งค่าเป็น "จริง" จะวาดชุดจากขวาไปซ้าย ค่าเริ่มต้นคือวาดจากซ้ายไปขวา
ตัวเลือกนี้รองรับเฉพาะแกน ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
โหมดการเลือก |
เมื่อ ประเภท: สตริง
ค่าเริ่มต้น: 'เดี่ยว'
|
ซีรีส์ |
อาร์เรย์ของออบเจ็กต์ที่แต่ละรายการอธิบายรูปแบบของชุดหนังสือที่เกี่ยวข้องในแผนภูมิ หากต้องการใช้ค่าเริ่มต้นสําหรับชุดหนังสือ ให้ระบุออบเจ็กต์เปล่า {} หากไม่ได้ระบุชุดหรือค่า ระบบจะใช้ค่าส่วนกลาง ออบเจ็กต์แต่ละรายการรองรับพร็อพเพอร์ตี้ต่อไปนี้
คุณระบุอาร์เรย์ของออบเจ็กต์โดยแต่ละรายการจะนําไปใช้กับชุดตามลําดับที่ระบุได้ หรือจะระบุออบเจ็กต์ที่มีออบเจ็กต์คีย์ตัวเลขซึ่งระบุชุดอักขระที่ใช้ได้ ตัวอย่างเช่น การประกาศ 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 |
สมการเส้นแนวโน้มจะปรากฏในคําอธิบายหรือไม่ (จะปรากฏในเคล็ดลับเครื่องมือเส้นแนวโน้ม) ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
VAX |
ระบุพร็อพเพอร์ตี้สําหรับแกนแนวตั้งแต่ละตัว หากแผนภูมิมีแกนแนวตั้งหลายแกน
ออบเจ็กต์ย่อยแต่ละรายการเป็นออบเจ็กต์
หากต้องการระบุแผนภูมิที่มีแกนแนวตั้งหลายแกน ให้กําหนดแกนใหม่โดยใช้ { series: { 2: { targetAxisIndex:1 } }, vAxes: { 1: { title:'Losses', textStyle: {color: 'red'} } } }
พร็อพเพอร์ตี้นี้อาจเป็นออบเจ็กต์หรืออาร์เรย์ ออบเจ็กต์คือคอลเล็กชันออบเจ็กต์ โดยแต่ละรายการจะมีป้ายกํากับตัวเลขที่ระบุแกนที่ระบุ ซึ่งก็คือรูปแบบที่แสดงข้างต้น อาร์เรย์เป็นอาร์เรย์ของออบเจ็กต์ 1 รายการต่ออาร์เรย์ ตัวอย่างเช่น รูปแบบอาร์เรย์ต่อไปนี้เหมือนกับออบเจ็กต์ vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] ประเภท: อาร์เรย์ของออบเจ็กต์หรือออบเจ็กต์ที่มีออบเจ็กต์ย่อย
ค่าเริ่มต้น: Null
|
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.interval |
อาร์เรย์ของขนาด (เป็นค่าข้อมูล ไม่ใช่พิกเซล) ระหว่างเส้นตารางกริดที่อยู่ติดกัน ตัวเลือกนี้มีไว้สําหรับแกนตัวเลขเท่านั้นในขณะนี้ แต่เทียบเท่ากับตัวเลือก ประเภท: จํานวนระหว่าง 1 ถึง 10 แต่ไม่รวม 10
ค่าเริ่มต้น: ประมวลผลแล้ว
|
vAxis.gridlines.minSpacing |
พื้นที่หน้าจอขั้นต่ําเป็นพิกเซลระหว่างตารางกริดหลัก hAxis
ค่าเริ่มต้นสําหรับเส้นตารางหลักคือ ประเภท: ตัวเลข
ค่าเริ่มต้น: ประมวลผลแล้ว
|
vAxis.gridlines.multi |
ค่าตารางกริดและเครื่องหมายถูกทั้งหมดต้องเป็นหลายค่าของตัวเลือกนี้ โปรดทราบว่าจะไม่นับ 10 คูณกับกําลังของค่าหลายครั้ง ซึ่งต่างจากช่วงเวลา
คุณสามารถบังคับให้เห็บเป็นจํานวนเต็มได้โดยระบุ ประเภท: ตัวเลข
ค่าเริ่มต้น: 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.interval |
ตัวเลือก BigQueryGridlines.interval เหมือนกับตัวเลือกช่วงตารางกริดหลัก แต่ช่วงที่เลือกจะเป็นตัวหารคู่ของช่วงตารางกริดหลักเสมอ
ช่วงเวลาเริ่มต้นสําหรับสเกลเชิงเส้นคือ ประเภท: ตัวเลข
ค่าเริ่มต้น:1
|
vAxis.minorGridlines.minSpacing |
พื้นที่ว่างขั้นต่ําเป็นพิกเซลระหว่างตารางกริดย่อยที่อยู่ติดกันและระหว่างตารางกริดย่อยกับตารางกริดหลัก ค่าเริ่มต้นคือ 1/2 นาที minSpacing ของตารางกริดหลักสําหรับสเกลเชิงเส้น และ 1/5 minSpacing สําหรับสเกลบันทึก ประเภท: ตัวเลข
ค่าเริ่มต้น: ประมวลผลแล้ว
|
vAxis.minorGridlines.multi |
เช่นเดียวกับ ประเภท: ตัวเลข
ค่าเริ่มต้น: 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 |
เริ่มทํางานเมื่อผู้ใช้คลิกเอนทิตีภาพ หากต้องการดูข้อมูลที่ได้รับเลือก โปรดโทรหา พร็อพเพอร์ตี้: ไม่มี
|
นโยบายข้อมูล
โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ ทั้งนี้จะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ