ภาพรวม
แผนภูมิแท่งเทียนแบบอินเทอร์แอกทีฟ
แผนภูมิแท่งเทียนใช้แสดงค่าเปิดและปิดที่ซ้อนอยู่ที่ด้านบนของความแปรปรวนทั้งหมด แผนภูมิแท่งเทียนมักใช้เพื่อแสดงมูลค่าหุ้น ในแผนภูมินี้ รายการที่มูลค่าเปิดน้อยกว่าค่าปิด (กําไร) จะวาดเป็นช่องที่เติมสินค้าและรายการที่มีมูลค่าเปิดมากกว่าค่าปิด (การสูญเสีย) จะวาดเป็นช่องโปร่ง
ตัวอย่าง
<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([ ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] // Treat first row as data as well. ], true); var options = { legend:'none' }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
แผนภูมิ Waterfall
คุณสามารถใช้ชุดตัวเลือกที่เหมาะสมเพื่อสร้างแผนภูมิเทียนให้ดูเหมือนแผนภูมิ Waterfall แบบง่าย
ในโค้ดด้านล่าง เราจะลบ Wiwi ยอดนิยมโดยให้ค่าเดียวกันในคอลัมน์ที่ 1 และ 2 ส่วน Wicks ด้านล่างมีค่าเดียวกันในคอลัมน์ที่ 3 และ 4 เราตั้งค่า bar.groupWidth
เป็น '100%'
เพื่อนําการเว้นวรรคระหว่างแท่งออก
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Mon', 28, 28, 38, 38], ['Tue', 38, 38, 55, 55], ['Wed', 55, 55, 77, 77], ['Thu', 77, 77, 66, 66], ['Fri', 66, 66, 22, 22] // Treat the first row as data. ], true); var options = { legend: 'none', bar: { groupWidth: '100%' }, // Remove space between bars. candlestick: { fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green } }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
ปัจจุบันยังไม่มีวิธีติดป้ายกํากับได้ง่ายๆ ตัวเลือกที่ดีที่สุดคือการใช้การวางซ้อน
กําลังโหลด
ชื่อแพ็กเกจ google.charts.load
รายการคือ "corechart"
google.charts.load('current', {packages: ['corechart']});
ชื่อคลาสของการแสดงภาพคือ google.visualization.CandlestickChart.
var visualization = new google.visualization.CandlestickChart(container);
รูปแบบข้อมูล
คอลัมน์อย่างน้อย 5 คอลัมน์ โดยคอลัมน์แรกกําหนดค่าแกน X หรือป้ายกํากับกลุ่ม และคอลัมน์ข้อมูลแต่ละคอลัมน์จากทั้ง 4 คอลัมน์หลังจากนั้นจะกําหนดชุดที่ต่างกัน
- Col 0: สตริง (cretete) ใช้เป็นป้ายกํากับกลุ่มบนแกน X หรือตัวเลข วันที่ วันที่ หรือช่วงเวลาของวัน (ต่อเนื่อง) เป็นค่าบนแกน X
- ข้อ 1: ตัวเลขที่ระบุค่าต่ํา/ต่ําสุดของเครื่องหมายนี้ นี่คือส่วนล่างสุดของเส้นกึ่งกลางแท่งเทียน ป้ายกํากับคอลัมน์จะใช้เป็นป้ายกํากับชุดหนังสือในคําอธิบาย (แต่ระบบจะไม่สนใจป้ายกํากับของคอลัมน์อื่นๆ)
- ข้อ 2: ตัวเลขที่ระบุค่าเปิด/เริ่มต้นของเครื่องหมายนี้ นี่คือขอบแนวตั้งที่ 1 ของแท่งเทียน หากน้อยกว่าค่าคอลัมน์ 3 ระบบจะเติมเทียน มิฉะนั้นจะกลวง
- ข้อ 3: ตัวเลขที่ระบุค่าปิด/เครื่องหมายสุดท้ายของเครื่องหมายนี้ นี่คือเส้นขอบแนวตั้งที่ 2 ของเทียน หากน้อยกว่าค่าคอลัมน์ 2 เทียนจะเป็นโพรง ไม่เช่นนั้นจะเติมเทียน
- ข้อ 4: ตัวเลขที่ระบุค่าสูงสุด/ค่าสูงสุดของเครื่องหมายนี้ นี่คือส่วนบนสุดของเส้นกึ่งกลางแท่งเทียน
- Col 5 [ไม่บังคับ]: คอลัมน์เคล็ดลับเครื่องมือหรือรูปแบบสําหรับเทียน
ตัวเลือกการกําหนดค่า
ชื่อ | |
---|---|
เป้าหมายการรวม |
วิธีการรวมข้อมูลประเภทต่างๆ ลงในเคล็ดลับเครื่องมือ
โดยปกติแล้วจะใช้
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 |
กําหนดว่าแผนภูมิจะแสดงภาพเคลื่อนไหวของการวาดครั้งแรกหรือไม่ หาก ประเภท: บูลีน
ค่าเริ่มต้น เท็จ
|
แกนชื่อตําแหน่ง |
ตําแหน่งการวางชื่อแกน เทียบกับพื้นที่แผนภูมิ ค่าที่รองรับมีดังต่อไปนี้
ประเภท: สตริง
ค่าเริ่มต้น: "ออก"
|
สีพื้นหลัง |
สีพื้นหลังของพื้นที่หลักของแผนภูมิ อาจเป็นสตริงสี HTML ที่เรียบง่าย เช่น ประเภท: สตริงหรือออบเจ็กต์
ค่าเริ่มต้น: "สีขาว"
|
พื้นหลังสีขีด |
สีของเส้นขอบแผนภูมิเป็นสตริงสี HTML ประเภท: สตริง
ค่าเริ่มต้น: "#666"
|
พื้นหลังของสี.ความกว้างความกว้าง |
ความกว้างเส้นขอบเป็นพิกเซล ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
|
พื้นหลังสีเติม |
สีเติมของแผนภูมิเป็นสตริงสี HTML ประเภท: สตริง
ค่าเริ่มต้น: "สีขาว"
|
ความกว้างของกลุ่ม |
ความกว้างของกลุ่มเทียน ซึ่งอยู่ในรูปแบบใดรูปแบบหนึ่งต่อไปนี้
ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น:
อัตราส่วนทองคํา ประมาณ '61.8%'
|
candle Stick.hollowIsRising |
หากเป็น "จริง" เทียนที่พุ่งสูงขึ้นจะดูเป็นโพรงและเทียนที่ตกลงจะปรากฏเป็นสีทึบไม่เป็นเช่นนั้น ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ (จะเปลี่ยนเป็นจริงในภายหลัง)
|
candlestick.fallingColor.fill |
สีเติมของเทียนซึ่งเป็นสตริงสี HTML ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ (ขึ้นอยู่กับสีของชุดหนังสือและชุดโปร่ง)
|
ท่าแคนเดิลสติก |
สีเส้นชัยของเทียนที่ตกหล่นเป็นสตริงสี HTML ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ (สีชุด)
|
candlestick.fallingColor.scoreWidth |
ความกว้างของเส้นชัยของเทียนที่ลอยอยู่ เป็นสตริงสี HTML ประเภท: 2
ค่าเริ่มต้น: ตัวเลข
|
candlestick.risingColor.fill |
สีเติมของเทียนที่กําลังเพิ่มขึ้นเป็นสตริงสี HTML ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ (สีขาวหรือสีของชุดหนังสือ ขึ้นอยู่กับ HollowIsRising)
|
candle Stick.risingColor.Stack |
สีเส้นขีดของเทียนที่เพิ่มขึ้นเป็นสตริงสี HTML ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ (สีชุดหรือสีขาว ขึ้นอยู่กับ hollowIsRising)
|
candle Stick.risingColor.strWidth |
ความกว้างของเส้นของเทียนที่กําลังเพิ่มขึ้นเป็นสตริงสี HTML ประเภท: ตัวเลข
ค่าเริ่มต้น: 2
|
แผนภูมิพื้นที่ |
ออบเจ็กต์ที่มีสมาชิกในการกําหนดค่าตําแหน่งและขนาดของพื้นที่แผนภูมิ (ที่มีการวาดแผนภูมิเอง ยกเว้นแกนและคําอธิบาย) รองรับ 2 รูปแบบ ได้แก่ ตัวเลขหรือตัวเลขตามด้วย % ตัวเลขง่ายๆ คือค่าพิกเซล ตัวเลขตามด้วย % คือเปอร์เซ็นต์ เช่น ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
แผนภูมิพื้นที่พื้นหลังพื้นหลัง |
สีพื้นหลังของแผนภูมิ เมื่อใช้สตริง อาจเป็นสตริงเลขฐานสิบหก
(เช่น "#fdc") หรือชื่อสีภาษาอังกฤษ เมื่อใช้ออบเจ็กต์ คุณจะระบุพร็อพเพอร์ตี้ต่อไปนี้ได้
ประเภท: สตริงหรือออบเจ็กต์
ค่าเริ่มต้น: "สีขาว"
|
แผนภูมิพื้นที่ซ้าย |
วิธีการวาดแผนภูมิจากเส้นขอบด้านซ้าย ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
แผนภูมิพื้นที่ |
วิธีการวาดแผนภูมิจากเส้นขอบด้านบน ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
พื้นที่แผนภูมิ |
ความกว้างของพื้นที่แผนภูมิ ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
พื้นที่แผนภูมิ |
ความสูงของพื้นที่แผนภูมิ ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
|
สี |
สีที่ใช้สําหรับองค์ประกอบของแผนภูมิ อาร์เรย์ของสตริง ซึ่งเอลิเมนต์แต่ละรายการเป็นสตริงสี HTML เช่น ประเภท: อาร์เรย์ของสตริง
ค่าเริ่มต้น: สีเริ่มต้น
|
เปิดใช้การโต้ตอบ |
แผนภูมินี้ทําให้เกิดเหตุการณ์ของผู้ใช้หรือตอบสนองต่อการโต้ตอบของผู้ใช้ หากเป็นเท็จ แผนภูมิจะไม่ส่ง "เลือก" หรือเหตุการณ์อื่นๆ ที่อิงตามการโต้ตอบ (แต่จะส่งเหตุการณ์ที่พร้อมแสดงหรือมีข้อผิดพลาด) และจะไม่แสดงข้อความที่แสดงเมื่อเลื่อนเมาส์ผ่าน หรือมีการเปลี่ยนแปลงโดยขึ้นอยู่กับอินพุตของผู้ใช้ ประเภท: บูลีน
ค่าเริ่มต้น: จริง
|
โฟกัสเป้าหมาย |
ประเภทของเอนทิตีที่ได้รับโฟกัสเมื่อวางเมาส์เหนือเมาส์ และส่งผลต่อเอนทิตีที่เลือกด้วยการคลิกเมาส์ และองค์ประกอบตารางข้อมูลที่เชื่อมโยงกับเหตุการณ์ อาจมีสถานะใดสถานะหนึ่งต่อไปนี้
ในโฟกัสเป้าหมาย "หมวดหมู่" เคล็ดลับเครื่องมือจะแสดงค่าหมวดหมู่ทั้งหมด ซึ่งจะมีประโยชน์ในการเปรียบเทียบค่าของชุดหนังสือต่างๆ ประเภท: สตริง
ค่าเริ่มต้น: '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.interval |
ตัวเลือก BigQueryGridlines.interval เหมือนกับตัวเลือกช่วงตารางกริดหลัก แต่ช่วงที่เลือกจะเป็นตัวหารคู่ของช่วงตารางกริดหลักเสมอ
ช่วงเวลาเริ่มต้นสําหรับสเกลเชิงเส้นคือ ประเภท: ตัวเลข
ค่าเริ่มต้น:1
|
hAxis.minorGridlines.minSpacing |
พื้นที่ว่างขั้นต่ําเป็นพิกเซลระหว่างตารางกริดย่อยที่อยู่ติดกันและระหว่างตารางกริดย่อยกับตารางกริดหลัก ค่าเริ่มต้นคือ 1/2 นาที minSpacing ของตารางกริดหลักสําหรับสเกลเชิงเส้น และ 1/5 minSpacing สําหรับสเกลบันทึก ประเภท: ตัวเลข
ค่าเริ่มต้น: ประมวลผลแล้ว
|
hAxis.minorGridlines.multi |
เช่นเดียวกับ ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
|
hAxis.minorGridlines.count |
ตัวเลือก ประเภท: ตัวเลข
ค่าเริ่มต้น:1
|
hAxis.minorGridlines.units |
ลบล้างรูปแบบเริ่มต้นสําหรับแง่มุมต่างๆ ของข้อมูลประเภทวันที่/วันที่/เวลาของวัน เมื่อใช้ร่วมกับแผนภูมิที่คํานวณเล็กน้อยในตารางกริด อนุญาตการจัดรูปแบบปี เดือน วัน ชั่วโมง นาที วินาที และมิลลิวินาที รูปแบบทั่วไปคือ gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } ดูข้อมูลเพิ่มเติมได้ในวันที่และเวลา ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
|
สเกล hAxis.logScale |
พร็อพเพอร์ตี้ ตัวเลือกนี้รองรับเฉพาะแกน ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
ประเภท hAxis.scaleType |
พร็อพเพอร์ตี้
ตัวเลือกนี้รองรับเฉพาะแกน ประเภท: สตริง
ค่าเริ่มต้น: Null
|
ตําแหน่งข้อความ hAxis.textPosition |
ตําแหน่งของข้อความแกนแนวนอนโดยสัมพันธ์กับพื้นที่แผนภูมิ ค่าที่รองรับ: "out", "in", "none" ประเภท: สตริง
ค่าเริ่มต้น: "ออก"
|
รูปแบบข้อความ hAxis.text |
ออบเจ็กต์ที่ระบุรูปแบบข้อความของแกนนอน ออบเจ็กต์มีรูปแบบต่อไปนี้ { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
HAxis.ticks |
แทนที่เครื่องหมายถูกบนแกน X ที่สร้างขึ้นโดยอัตโนมัติด้วยอาร์เรย์ที่ระบุ องค์ประกอบแต่ละรายการของอาร์เรย์ควรเป็นค่าเครื่องหมายถูกที่ถูกต้อง (เช่น จํานวน วันที่ วันที่ หรือช่วงเวลาของวัน) หรือออบเจ็กต์ หากเป็นออบเจ็กต์ ควรมีพร็อพเพอร์ตี้
ระบบจะขยาย viewWindow โดยอัตโนมัติเพื่อรวมเครื่องหมายต่ําสุดและต่ําสุด เว้นแต่คุณจะระบุ ตัวอย่าง:
ตัวเลือกนี้ใช้ได้กับแกน ประเภท: อาร์เรย์ขององค์ประกอบ
ค่าเริ่มต้น: อัตโนมัติ
|
ชื่อ hAxis.title |
พร็อพเพอร์ตี้ ประเภท: สตริง
ค่าเริ่มต้น: Null
|
รูปแบบข้อความ hAxis.titleText |
ออบเจ็กต์ที่ระบุรูปแบบข้อความชื่อแกนนอน ออบเจ็กต์มีรูปแบบต่อไปนี้ { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.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 |
ไม่สนใจเมื่อ ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
|
ความสูง |
ความสูงของแผนภูมิเป็นพิกเซล ประเภท: ตัวเลข
ค่าเริ่มต้น: ความสูงขององค์ประกอบที่มี
|
คําอธิบาย |
ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าแง่มุมต่างๆ ของคําอธิบาย หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบสัญพจน์ของออบเจ็กต์ได้ ดังที่แสดงด้านล่างนี้ {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>}
|
การวางแนว |
การวางแนวของแผนภูมิ เมื่อตั้งค่าเป็น ประเภท: สตริง
ค่าเริ่มต้น: "แนวนอน"
|
หมวดหมู่ย้อนกลับ |
หากตั้งค่าเป็น "จริง" จะวาดชุดจากขวาไปซ้าย ค่าเริ่มต้นคือวาดจากซ้ายไปขวา
ตัวเลือกนี้รองรับเฉพาะแกน ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
|
โหมดการเลือก |
เมื่อ ประเภท: สตริง
ค่าเริ่มต้น: 'เดี่ยว'
|
ซีรีส์ |
อาร์เรย์ของออบเจ็กต์ที่แต่ละรายการอธิบายรูปแบบของชุดหนังสือที่เกี่ยวข้องในแผนภูมิ หากต้องการใช้ค่าเริ่มต้นสําหรับชุดหนังสือ ให้ระบุออบเจ็กต์เปล่า {} หากไม่ได้ระบุชุดหรือค่า ระบบจะใช้ค่าส่วนกลาง ออบเจ็กต์แต่ละรายการรองรับพร็อพเพอร์ตี้ต่อไปนี้
คุณระบุอาร์เรย์ของออบเจ็กต์โดยแต่ละรายการจะนําไปใช้กับชุดตามลําดับที่ระบุได้ หรือจะระบุออบเจ็กต์ที่มีออบเจ็กต์คีย์ตัวเลขซึ่งระบุชุดอักขระที่ใช้ได้ ตัวอย่างเช่น การประกาศ 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>}
|
เคล็ดลับเครื่องมือ |
การโต้ตอบของผู้ใช้ที่ทําให้เคล็ดลับเครื่องมือแสดง
ประเภท: สตริง
ค่าเริ่มต้น: "โฟกัส"
|
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 |
เริ่มทํางานเมื่อผู้ใช้คลิกเอนทิตีภาพ หากต้องการดูข้อมูลที่ได้รับเลือก โปรดโทรหา พร็อพเพอร์ตี้: ไม่มี
|
นโยบายข้อมูล
โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ ทั้งนี้จะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ