ภาพรวม
แผนภูมิคอลัมน์คือแผนภูมิแท่งแนวตั้งในเบราว์เซอร์ที่ใช้ SVG หรือ VML แล้วแต่ว่าเบราว์เซอร์ใดเหมาะสมกับเบราว์เซอร์ของผู้ใช้ แผนภูมิคอลัมน์จะแสดงเคล็ดลับเครื่องมือเมื่อผู้ใช้วางเมาส์เหนือข้อมูล เช่นเดียวกับแผนภูมิทั้งหมดของ Google หากต้องการดูเวอร์ชันแนวนอนของแผนภูมินี้ โปรดดูแผนภูมิแท่ง
ตัวอย่าง
การเติมสีคอลัมน์
มาความหนาแน่นของโลหะมีค่า 4 ชนิดดังนี้
ที่ด้านบน ทุกสีจะเป็นสีน้ําเงินที่เป็นค่าเริ่มต้น นั่นเป็นเพราะว่าทั้งหมดเป็นส่วนหนึ่งของชุดเดียวกัน หากชุดที่สองเป็นสีแดง เราสามารถปรับแต่งสีเหล่านี้ด้วยบทบาทสไตล์ ดังนี้
การเลือกสีมี 3 วิธีที่แตกต่างกัน และตารางข้อมูลของเราจะแสดงสีเหล่านั้นทั้งหมด ได้แก่ ค่า RGB ชื่อสีภาษาอังกฤษ และการประกาศที่มีลักษณะเหมือน CSS ดังนี้
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }], ['Copper', 8.94, '#b87333'], // RGB value ['Silver', 10.49, 'silver'], // English color name ['Gold', 19.30, 'gold'], ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration ]);
รูปแบบคอลัมน์
บทบาทรูปแบบช่วยให้คุณควบคุมลักษณะต่างๆ ของคอลัมน์ได้ด้วยการประกาศที่คล้ายกับ CSS ดังนี้
color
opacity
fill-color
fill-opacity
stroke-color
stroke-opacity
stroke-width
เราไม่แนะนําให้คุณใช้สไตล์ที่ผสมผสานกันอย่างอิสระเกินไปในแผนภูมิ ให้เลือกสไตล์และคงไว้ตามนั้น แต่หากต้องการดูตัวอย่างแอตทริบิวต์ของสไตล์ทั้งหมด ให้ลองใช้ตัวอย่างต่อไปนี้
2 คอลัมน์แรกใช้ color
ที่เจาะจง (คอลัมน์แรกมีชื่อภาษาอังกฤษ คอลัมน์ที่ 2 มีค่า RGB) ไม่ได้เลือก opacity
ไว้ ระบบจึงใช้ค่าเริ่มต้น 1.0 (ทึบแสง) คอลัมน์ที่ 2 จึงบดบังตารางกริดที่ด้านหลัง ในคอลัมน์ที่ 3 มีการใช้ opacity
เท่ากับ 0.2 เพื่อแสดงเส้นตาราง ในแอตทริบิวต์ที่ 4
ระบบจะใช้รูปแบบ 3 รายการ ได้แก่ stroke-color
และ stroke-width
เพื่อวาดเส้นขอบ และ fill-color
เพื่อระบุสีของสี่เหลี่ยมผืนผ้าด้านใน คอลัมน์ด้านขวาสุดจะใช้ stroke-opacity
และ fill-opacity
เพื่อเลือกความทึบแสงของเส้นขอบและสีเติม ดังนี้
function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Visitations', { role: 'style' } ], ['2010', 10, 'color: gray'], ['2020', 14, 'color: #76A7FA'], ['2030', 16, 'opacity: 0.2'], ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'], ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2'] ]);
การติดป้ายกํากับคอลัมน์
แผนภูมิมีป้ายกํากับหลายประเภท เช่น ป้ายกํากับเครื่องหมายถูก ป้ายกํากับคําอธิบาย และป้ายกํากับในเคล็ดลับเครื่องมือ ในส่วนนี้ เราจะดูวิธีใส่ป้ายกํากับภายใน (หรือใกล้) คอลัมน์ในแผนภูมิคอลัมน์
สมมติว่าเราต้องการใส่คําอธิบายประกอบในสัญลักษณ์ของแต่ละคอลัมน์ด้วยสารเคมีที่เหมาะสม โดยใช้บทบาทหมายเหตุดังนี้
ในตารางข้อมูล เรากําหนดคอลัมน์ใหม่ด้วย { role:
'annotation' }
เพื่อระงับป้ายกํากับคอลัมน์ ดังนี้
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ], ['Copper', 8.94, '#b87333', 'Cu' ], ['Silver', 10.49, 'silver', 'Ag' ], ['Gold', 19.30, 'gold', 'Au' ], ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ] ]);
แม้ว่าผู้ใช้จะวางเมาส์เหนือคอลัมน์ต่างๆ เพื่อดูค่าข้อมูลได้ แต่คุณอาจต้องการรวมไว้ในคอลัมน์ด้วยตัวเอง
วิธีการนี้จะซับซ้อนกว่าที่ควรจะเป็นเล็กน้อยเพราะเราสร้าง DataView
เพื่อระบุคําอธิบายประกอบสําหรับแต่ละคอลัมน์
<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([ ["Element", "Density", { role: "style" } ], ["Copper", 8.94, "#b87333"], ["Silver", 10.49, "silver"], ["Gold", 19.30, "gold"], ["Platinum", 21.45, "color: #e5e4e2"] ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }, 2]); var options = { title: "Density of Precious Metals, in g/cm^3", width: 600, height: 400, bar: {groupWidth: "95%"}, legend: { position: "none" }, }; var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values")); chart.draw(view, options); } </script> <div id="columnchart_values" style="width: 900px; height: 300px;"></div>
หากต้องการจัดรูปแบบค่าให้แตกต่างกัน เราจะกําหนดการจัดรูปแบบและรวมไว้ในฟังก์ชันได้ดังต่อไปนี้
function getValueAt(column, dataTable, row) { return dataTable.getFormattedValue(row, column); }
จากนั้นเราอาจโทรคุยกับ calc: getValueAt.bind(undefined, 1)
หากป้ายกํากับมีขนาดใหญ่เกินกว่าจะอยู่ภายในคอลัมน์ แสดงว่าป้ายกํากับอยู่ด้านนอก
แผนภูมิคอลัมน์แบบซ้อน
แผนภูมิคอลัมน์แบบซ้อน คือแผนภูมิคอลัมน์ที่แสดงค่าที่เกี่ยวข้องซ้อนทับกัน หากมีค่าติดลบ ค่าเหล่านี้จะซ้อนกันแบบย้อนหลังใต้เส้นฐานของแผนภูมิ ซึ่งโดยปกติจะใช้เมื่อหมวดหมู่แบ่งออกเป็นคอมโพเนนต์ตามปกติ เช่น พิจารณายอดขายหนังสือสมมติบางรายการ หารด้วยประเภทและเปรียบเทียบกันเมื่อเวลาผ่านไป
คุณสร้างแผนภูมิคอลัมน์แบบซ้อนได้โดยตั้งค่าตัวเลือก isStacked
เป็น true
var data = google.visualization.arrayToDataTable([ ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature', { role: 'annotation' } ], ['2010', 10, 24, 20, 32, 18, 5, ''], ['2020', 16, 22, 23, 30, 16, 9, ''], ['2030', 28, 19, 29, 30, 12, 13, ''] ]); var options = { width: 600, height: 400, legend: { position: 'top', maxLines: 3 }, bar: { groupWidth: '75%' }, isStacked: true, };
แผนภูมิคอลัมน์แบบซ้อนยังรองรับการซ้อน 100% ด้วย โดยสแต็กขององค์ประกอบที่แต่ละค่าโดเมนจะมีการปรับขนาดใหม่เพื่อเพิ่มเป็น 100% ตัวเลือกสําหรับรายการนี้คือ isStacked: 'percent'
ซึ่งจัดรูปแบบแต่ละค่าเป็นเปอร์เซ็นต์ 100% และ isStacked: 'relative'
ซึ่งจัดรูปแบบแต่ละค่าเป็นเศษส่วน 1 นอกจากนี้ ยังมีตัวเลือก isStacked: 'absolute'
ซึ่งเทียบเท่ากับ isStacked: true
โปรดทราบว่าในแผนภูมิแบบซ้อน 100% ทางด้านขวา ค่าเครื่องหมายถูกจะอิงจากสเกล 0-1 สัมพัทธ์เป็นเศษส่วน 1 แต่ค่าแกนจะแสดงเป็นเปอร์เซ็นต์ เนื่องจากเครื่องหมายถูกแกนแกนเกิดจากการใช้รูปแบบ "#.##%" กับค่าสเกล 0-1 แบบสัมพัทธ์ เมื่อใช้ isStacked: 'percent'
อย่าลืมระบุค่าเห็บ/แกนโดยใช้สเกลแบบ 0-1
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, vAxis: {minValue: 0} };
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, vAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };
การสร้างแผนภูมิคอลัมน์เนื้อหา
ในปี 2014 Google ได้ประกาศหลักเกณฑ์ที่มีเจตนาที่จะสนับสนุนรูปลักษณ์ทั่วไปในพร็อพเพอร์ตี้และแอป (เช่น แอป Android) ที่ทํางานบนแพลตฟอร์มของ Google เราเรียกการดําเนินการนี้ว่า Material Design เราจะให้บริการแผนภูมิ "หลัก" ของแผนภูมิหลักทั้งหมดของเรา คุณสามารถใช้แผนภูมิได้หากต้องการ
การสร้างแผนภูมิคอลัมน์เนื้อหาคล้ายกับการสร้างสิ่งที่เรียกว่า แผนภูมิ "คลาสสิก" คุณโหลด API การแสดงภาพของ Google (แต่มีแพ็กเกจ 'bar'
แทนแพ็กเกจ 'corechart'
) กําหนดตารางข้อมูล แล้วสร้างออบเจ็กต์ (แต่คลาส google.charts.Bar
แทนที่จะเป็น google.visualization.ColumnChart
)
เนื่องจากแผนภูมิแท่งและแผนภูมิคอลัมน์จะเหมือนกันทุกประการ แต่สําหรับการวางแนว เราจะเรียกทั้งแผนภูมิ Material Bar โดยไม่คํานึงถึงแท่งแนวตั้ง (คลาสสิก, แผนภูมิคอลัมน์) หรือแนวนอน (แผนภูมิแท่ง) ใน " Material" ความแตกต่างเพียงอย่างเดียวจะอยู่ในตัวเลือก bars
เมื่อตั้งค่าเป็น 'horizontal'
การวางแนวจะมีลักษณะคล้ายกับแผนภูมิแท่งแบบคลาสสิก หรือมิฉะนั้นแท่งจะเป็นแนวตั้ง
หมายเหตุ: แผนภูมิเนื้อหาจะใช้งานไม่ได้ใน Internet Explorer เวอร์ชันเก่า (IE8 และเวอร์ชันก่อนหน้านี้ไม่รองรับ SVG ซึ่ง Material Charts ต้องใช้)
แผนภูมิคอลัมน์เนื้อหามีการปรับปรุงเล็กๆ น้อยๆ เมื่อเทียบกับแผนภูมิคอลัมน์คลาสสิก ได้แก่ ชุดสีที่ปรับปรุงใหม่ มุมโค้งมน การจัดรูปแบบป้ายกํากับที่ชัดเจนขึ้น ระยะห่างเริ่มต้นที่เหมาะสมระหว่างชุดเนื้อหา เส้นตารางที่สั้นลงและชื่อ (และการเพิ่มคําบรรยาย)
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]); var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', } }; var chart = new google.charts.Bar(document.getElementById('columnchart_material')); chart.draw(data, google.charts.Bar.convertOptions(options)); } </script> </head> <body> <div id="columnchart_material" style="width: 800px; height: 500px;"></div> </body> </html>
แผนภูมิ Material อยู่ในเบต้า ลักษณะที่ปรากฏและการโต้ตอบส่วนใหญ่ถือเป็นที่สิ้นสุด แต่ตัวเลือกต่างๆ ที่มีในแผนภูมิแบบคลาสสิกยังไม่มีให้บริการ คุณดูรายการตัวเลือกที่ระบบยังไม่รองรับในปัญหานี้ได้
วิธีประกาศตัวเลือกยังไม่เป็นที่สิ้นสุด ดังนั้นหากใช้ตัวเลือกคลาสสิก คุณจะต้องแปลงตัวเลือกเป็น Material โดยแทนที่บรรทัดนี้
chart.draw(data, options);
...ด้วยรูปแบบต่อไปนี้
chart.draw(data, google.charts.Bar.convertOptions(options));
การใช้ google.charts.Bar.convertOptions()
ช่วยให้คุณใช้ประโยชน์จากฟีเจอร์บางอย่างได้ เช่น ตัวเลือกค่าที่กําหนดล่วงหน้าของ hAxis/vAxis.format
แผนภูมิ Y แบบ Y
บางครั้งคุณอาจต้องการแสดง 2 ชุดในแผนภูมิคอลัมน์ โดยมีแกน Y อิสระ 2 แกน ได้แก่ แกนซ้ายสําหรับชุดหนึ่ง และแกนด้านขวาสําหรับอีกชุด ได้แก่
โปรดทราบว่า นอกจากแกน Y ทั้ง 2 แกนแล้วจะมีป้ายกํากับต่างกัน ("ย่อหน้า" กับ "ค่าแมกนิจูด") หากต้องการปรับแต่งลักษณะการทํางานนี้ ให้ใช้ตัวเลือก vAxis.gridlines
ในโค้ดด้านล่าง ตัวเลือก axes
และ series
ร่วมกันจะระบุลักษณะของคู่ Y ของแผนภูมิ ตัวเลือก series
จะระบุแกนที่จะใช้สําหรับแต่ละคอลัมน์ ('distance'
และ 'brightness'
โดยไม่จําเป็นต้องเกี่ยวข้องกับชื่อคอลัมน์ในตารางข้อมูล) จากนั้นตัวเลือก axes
จะทําให้แผนภูมินี้เป็นแผนภูมิคู่ Y ที่วางแกน 'distance'
ทางด้านซ้าย (ติดป้ายกํากับ "ย่อหน้า") และแกน 'brightness'
ทางด้านขวา (ติดป้ายกํากับว่า "ขนาดที่ยอมรับได้")
<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', 'bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = google.visualization.arrayToDataTable([ ['Galaxy', 'Distance', 'Brightness'], ['Canis Major Dwarf', 8000, 23.3], ['Sagittarius Dwarf', 24000, 4.5], ['Ursa Major II Dwarf', 30000, 14.3], ['Lg. Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var materialOptions = { width: 900, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { y: { distance: {label: 'parsecs'}, // Left y-axis. brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis. } } }; var classicOptions = { width: 900, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, title: 'Nearby galaxies - distance on the left, brightness on the right', vAxes: { // Adds titles to each axis. 0: {title: 'parsecs'}, 1: {title: 'apparent magnitude'} } }; function drawMaterialChart() { var materialChart = new google.charts.Bar(chartDiv); materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.ColumnChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; } drawMaterialChart(); }; </script> </head> <body> <button id="change-chart">Change to Classic</button> <br><br> <div id="chart_div" style="width: 800px; height: 500px;"></div> </body> </html>
แผนภูมิ X ยอดนิยม
หมายเหตุ: แกน X ใช้ได้เฉพาะกับแผนภูมิวัสดุ (เช่น ที่มีแพ็กเกจ bar
) เท่านั้น
หากต้องการเพิ่มป้ายกํากับและชื่อในแกน X ไว้ที่ด้านบนสุดของแผนภูมิ ไม่ใช่ด้านล่างสุด ก็ทําในแผนภูมิ Material ได้ด้วยตัวเลือก 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':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Move', 'Percentage'], ["King's pawn (e4)", 44], ["Queen's pawn (d4)", 31], ["Knight to King 3 (Nf3)", 12], ["Queen's bishop pawn (c4)", 10], ['Other', 3] ]); var options = { width: 800, legend: { position: 'none' }, chart: { title: 'Chess opening moves', subtitle: 'popularity by percentage' }, axes: { x: { 0: { side: 'top', label: 'White to move'} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); // Convert the Classic options to Material options. chart.draw(data, google.charts.Bar.convertOptions(options)); }; </script> </head> <body> <div id="top_x_div" style="width: 800px; height: 600px;"></div> </body> </html>
กําลังโหลด
ชื่อแพ็กเกจ google.charts.load
คือ "corechart"
ชื่อคลาสของการแสดงภาพคือ google.visualization.ColumnChart
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.ColumnChart(container);
สําหรับแผนภูมิคอลัมน์เนื้อหา ชื่อแพ็กเกจ google.charts.load
คือ "bar"
(การพิมพ์ผิด: แผนภูมิ Material
แสดงทั้ง 2 การวางแนว)
ชื่อคลาสของการแสดงภาพคือ google.charts.Bar
(การพิมพ์ผิด: แผนภูมิ Material แสดง
ทั้ง 2 การวางแนว)
google.charts.load("current", {packages: ["bar"]});
var chart = new google.charts.Bar(container);
รูปแบบข้อมูล
แต่ละแถวในตารางแสดงกลุ่มของแถบที่อยู่ติดกัน
แถว: แต่ละแถวในตารางแสดงกลุ่มบาร์
คอลัมน์
คอลัมน์ 0 | คอลัมน์ที่ 1 | ... | คอลัมน์ N | |
---|---|---|---|---|
จุดประสงค์ในการใช้: |
|
ค่าแท่ง 1 ในกลุ่มนี้ | ... | ค่าแท่ง N ในกลุ่มนี้ |
ประเภทข้อมูล: |
|
number | ... | number |
บทบาท: | โดเมน | ข้อมูล | ... | ข้อมูล |
บทบาทของคอลัมน์ที่ไม่บังคับ: | ... |
ตัวเลือกการกําหนดค่า
ชื่อ | |
---|---|
ภาพเคลื่อนไหว.ระยะเวลา |
ระยะเวลาของภาพเคลื่อนไหวเป็นมิลลิวินาที ดูรายละเอียดได้ที่เอกสารประกอบเกี่ยวกับภาพเคลื่อนไหว ประเภท: ตัวเลข
ค่าเริ่มต้น: 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 ประเภท: สตริง
ค่าเริ่มต้น: "สีขาว"
|
ความกว้างของกลุ่ม |
ความกว้างของกลุ่มแท่งที่ระบุไว้ในรูปแบบใดรูปแบบหนึ่งต่อไปนี้
ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น:
อัตราส่วนทองคํา ประมาณ '61.8%'
|
บาร์ |
แผนภูมิแท่งใน สื่อการสอน แผนภูมิแท่ง ในแนวตั้งหรือแนวนอน ตัวเลือกนี้ไม่มีผลต่อแผนภูมิแท่งแบบคลาสสิกหรือแผนภูมิคอลัมน์แบบคลาสสิก ประเภท: "แนวนอน" หรือ "แนวตั้ง"
ค่าเริ่มต้น: "แนวตั้ง"
|
แผนภูมิพื้นที่ |
ออบเจ็กต์ที่มีสมาชิกในการกําหนดค่าตําแหน่งและขนาดของพื้นที่แผนภูมิ (ที่มีการวาดแผนภูมิเอง ยกเว้นแกนและคําอธิบาย) รองรับ 2 รูปแบบ ได้แก่ ตัวเลขหรือตัวเลขตามด้วย % ตัวเลขง่ายๆ คือค่าพิกเซล ตัวเลขตามด้วย % คือเปอร์เซ็นต์ เช่น ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
แผนภูมิพื้นที่พื้นหลังพื้นหลัง |
สีพื้นหลังของแผนภูมิ เมื่อใช้สตริง อาจเป็นสตริงเลขฐานสิบหก
(เช่น "#fdc") หรือชื่อสีภาษาอังกฤษ เมื่อใช้ออบเจ็กต์ คุณจะระบุพร็อพเพอร์ตี้ต่อไปนี้ได้
ประเภท: สตริงหรือออบเจ็กต์
ค่าเริ่มต้น: "สีขาว"
|
แผนภูมิพื้นที่ซ้าย |
วิธีการวาดแผนภูมิจากเส้นขอบด้านซ้าย ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
แผนภูมิพื้นที่ |
วิธีการวาดแผนภูมิจากเส้นขอบด้านบน ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
พื้นที่แผนภูมิ |
ความกว้างของพื้นที่แผนภูมิ ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
พื้นที่แผนภูมิ |
ความสูงของพื้นที่แผนภูมิ ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
แผนภูมิชื่อรอง |
สําหรับแผนภูมิสื่อ ตัวเลือกนี้จะระบุคําบรรยาย เฉพาะแผนภูมิเนื้อหาเท่านั้นที่รองรับคําบรรยาย ประเภท: สตริง
ค่าเริ่มต้น: Null
|
ชื่อแผนภูมิ |
สําหรับแผนภูมิวัสดุ ตัวเลือกนี้จะระบุชื่อ ประเภท: สตริง
ค่าเริ่มต้น: Null
|
สี |
สีที่ใช้สําหรับองค์ประกอบของแผนภูมิ อาร์เรย์ของสตริง ซึ่งเอลิเมนต์แต่ละรายการเป็นสตริงสี HTML เช่น ประเภท: อาร์เรย์ของสตริง
ค่าเริ่มต้น: สีเริ่มต้น
|
ความทึบข้อมูล |
ความโปร่งใสของจุดข้อมูล โดยค่า 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 |
ไม่สนใจเมื่อ ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
ความสูง |
ความสูงของแผนภูมิเป็นพิกเซล ประเภท: ตัวเลข
ค่าเริ่มต้น: ความสูงขององค์ประกอบที่มี
|
วางซ้อนกัน |
หากตั้งค่าเป็น "จริง" ให้ซ้อนองค์ประกอบสําหรับชุดทั้งหมดตามค่าโดเมนแต่ละรายการ หมายเหตุ: ในแผนภูมิคอลัมน์ พื้นที่ และขั้นตอน ซึ่งไม่มีผลกับแผนภูมิบาร์
ตัวเลือก ตัวเลือกสําหรับ
สําหรับสแต็ก 100% ค่าที่คํานวณสําหรับแต่ละองค์ประกอบจะปรากฏในเคล็ดลับเครื่องมือหลังค่าจริง
แกนเป้าหมายจะมีค่าเริ่มต้นเป็นค่าเริ่มโดยอิงตามสเกล 0-1 สัมพัทธ์เป็นเศษส่วน 1
สําหรับ
การซ้อน 100% รองรับเฉพาะค่าของข้อมูลประเภท ประเภท: บูลีน/สตริง
ค่าเริ่มต้น: เท็จ
|
คําอธิบาย |
ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าแง่มุมต่างๆ ของคําอธิบาย หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบสัญพจน์ของออบเจ็กต์ได้ ดังที่แสดงด้านล่างนี้ {position: 'top', textStyle: {color: 'blue', fontSize: 16}} ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
ดัชนีหน้า |
ดัชนีหน้าที่เน้นเลข 0 ที่เลือกครั้งแรกของคําอธิบาย ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
|
ตําแหน่ง. |
ตําแหน่งของคําอธิบาย อาจมีสถานะใดสถานะหนึ่งต่อไปนี้
ประเภท: สตริง
ค่าเริ่มต้น: "ขวา"
|
Legend.alignment |
การจัดเรียงคําอธิบาย อาจมีสถานะใดสถานะหนึ่งต่อไปนี้
จุดเริ่มต้น กึ่งกลาง และจุดสิ้นสุดจะสัมพันธ์กับรูปแบบ เช่น แนวตั้งหรือแนวนอนของคําอธิบาย เช่น ในตํานาน "เริ่มต้น" "เริ่มต้น" และ "สิ้นสุด" อยู่ที่ด้านบนและด้านล่างตามลําดับ สําหรับคําอธิบาย "ด้านบน" "เริ่มต้น" และ "สิ้นสุด" อยู่ทางด้านซ้ายและขวาของพื้นที่นั้นตามลําดับ ค่าเริ่มต้นจะขึ้นอยู่กับตําแหน่งของคําอธิบาย สําหรับคําอธิบาย "ด้านล่าง" ค่าเริ่มต้นจะเป็น "ตรงกลาง" แต่คําอธิบายอื่นๆ จะมีค่าเริ่มต้นเป็น "เริ่มต้น" ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ
|
คําอธิบายข้อความรูปแบบ |
ออบเจ็กต์ที่ระบุรูปแบบข้อความของคําอธิบาย ออบเจ็กต์มีรูปแบบต่อไปนี้ { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
การวางแนว |
การวางแนวของแผนภูมิ เมื่อตั้งค่าเป็น ประเภท: สตริง
ค่าเริ่มต้น: "แนวนอน"
|
หมวดหมู่ย้อนกลับ |
หากตั้งค่าเป็น "จริง" จะวาดชุดจากขวาไปซ้าย ค่าเริ่มต้นคือวาดจากซ้ายไปขวา
ตัวเลือกนี้รองรับเฉพาะแกน ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
ซีรีส์ |
อาร์เรย์ของออบเจ็กต์ที่แต่ละรายการอธิบายรูปแบบของชุดหนังสือที่เกี่ยวข้องในแผนภูมิ หากต้องการใช้ค่าเริ่มต้นสําหรับชุดหนังสือ ให้ระบุออบเจ็กต์เปล่า {} หากไม่ได้ระบุชุดหรือค่า ระบบจะใช้ค่าส่วนกลาง ออบเจ็กต์แต่ละรายการรองรับพร็อพเพอร์ตี้ต่อไปนี้
คุณระบุอาร์เรย์ของออบเจ็กต์โดยแต่ละรายการจะนําไปใช้กับชุดตามลําดับที่ระบุได้ หรือจะระบุออบเจ็กต์ที่มีออบเจ็กต์คีย์ตัวเลขซึ่งระบุชุดอักขระที่ใช้ได้ ตัวอย่างเช่น การประกาศ 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 |
เริ่มทํางานเมื่อผู้ใช้คลิกเอนทิตีภาพ หากต้องการดูข้อมูลที่ได้รับเลือก โปรดโทรหา พร็อพเพอร์ตี้: ไม่มี
|
นโยบายข้อมูล
โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ ทั้งนี้จะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ