สำคัญ: ส่วนแผนภูมิรูปภาพของเครื่องมือ Google แผนภูมิได้เลิกใช้งานอย่างเป็นทางการเมื่อวันที่ 20 เมษายน 2012 และจะยังใช้งานต่อตามนโยบายการเลิกใช้งาน
ภาพรวม
แผนภูมิแท่งเทียนที่แสดงผลเป็นรูปภาพโดยใช้ Google Charts API
ใช้แผนภูมิแท่งเทียนเพื่อแสดงค่าเปิดและค่าปิดที่ซ้อนทับอยู่เหนือค่าความแปรปรวนทั้งหมด แผนภูมิแท่งเทียนมักใช้เพื่อแสดงพฤติกรรมของมูลค่าหุ้น ในแผนภูมินี้ รายการที่ค่าเปิดน้อยกว่าค่าปิดจะแสดงเป็นสีเขียว และรายการที่ค่าเปิดมากกว่าค่าปิดจะแสดงด้วยสีแดง ดูข้อมูลเพิ่มเติมได้ที่เอกสารประกอบเกี่ยวกับแท่งเทียนใน Google Charts API
ตัวอย่าง
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["imagechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var options = {}; dataTable = google.visualization.arrayToDataTable([ ['Gainers',10,30,45,60], ['Losers',20,35,25,45], ], true); var chart = new google.visualization.ImageCandlestickChart(document.getElementById('chart_div')); chart.draw(dataTable, options); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 240px;"></div> </body> </html>
กำลังโหลด
ชื่อแพ็กเกจ google.charts.load
คือ "imagechart"
google.charts.load('current', {packages: [imagechart]});
ชื่อคลาสของการแสดงภาพคือ google.visualization.ImageCandlestickChart
var visualization = new google.visualization.ImageCandlestickChart(container);
รูปแบบข้อมูล
5 คอลัมน์ โดยแต่ละแถวอธิบายเครื่องหมายแท่งเทียน 1 แท่ง
- Col 0: สตริงที่ใช้เป็นป้ายกำกับสำหรับเครื่องหมายนี้บนแกน X
- Col 1: ตัวเลขระบุค่าต่ำ/ขั้นต่ำของเครื่องหมายนี้ นี่คือส่วนฐานของเส้นสีดำ
- Col 2: ตัวเลขที่ระบุค่าเปิด/เริ่มต้นของเครื่องหมายนี้ นี่คือขอบแนวตั้งที่ 1 ของแท่งเทียน หากน้อยกว่าค่าของคอลัมน์ 3 แท่งเทียนจะเป็นสีเขียว มิเช่นนั้นจะเป็นสีแดง
- Col 3: ตัวเลขระบุค่าปิด/ขั้นสุดท้ายของเครื่องหมายนี้ นี่คือขอบแนวตั้งที่ 2 ของแท่งเทียน หากน้อยกว่าค่าคอลัมน์ 2 แท่งเทียนจะเป็นสีแดง ไม่เช่นนั้นจะเป็นสีเขียว
- Col 4: ตัวเลขระบุค่าสูง/สูงสุดของเครื่องหมายนี้ นี่คือด้านบนของเส้นสีดำ
ตัวเลือกการกำหนดค่า
นอกเหนือจากตัวเลือกที่แผนภูมิรูปภาพทั่วไปรองรับแล้ว แผนภูมิแท่งเทียนยังรองรับตัวเลือกต่อไปนี้
ชื่อ | ประเภท | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
backgroundColor | string | "#FFFFFF" (สีขาว) | สีพื้นหลังของแผนภูมิ นี่คือสตริง #RRGGBB ซึ่งมีเครื่องหมาย # |
showAxisLines | boolean | จริง | เลือกว่าจะแสดงเส้นแกนหรือไม่ หากตั้งค่าเป็น "เท็จ" ป้ายกำกับแกนก็จะไม่แสดงเช่นกัน |
ส่วนสูง | ตัวเลข | ความสูงขององค์ประกอบที่มี | ความสูงของแผนภูมิเป็นพิกเซล หาก 30 < height หรือ height > 1,000 ค่านี้จะเป็นค่าเริ่มต้น 200 |
สูงสุด | ตัวเลข | ค่าของข้อมูลสูงสุด | ค่าแกน Y สูงสุด |
นาที | ตัวเลข | ค่าข้อมูลขั้นต่ำ | ค่าต่ำสุดของแกน Y |
showCategoryLabels | boolean | จริง | หากเป็น "เท็จ" จะซ่อนป้ายกำกับแกน X |
showValueLabels | boolean | จริง | หากเป็น "เท็จ" จะซ่อนป้ายกำกับแกน Y |
showValueLabelsInternal | ตัวเลข | อัตโนมัติ | ระยะห่างระหว่างป้ายกำกับแกน Y ในหน่วยพิกเซล |
title | string | '' | ข้อความที่จะแสดงเหนือแผนภูมิ |
ความกว้าง | ตัวเลข | ความกว้างขององค์ประกอบที่มี | ความกว้างของแผนภูมิเป็นพิกเซล หาก width น้อยกว่า 30 หรือมากกว่า 1,000 ระบบจะตั้งค่า width เป็น 300 |
วิธีการ
วิธีการ | ประเภทการแสดงผล | คำอธิบาย |
---|---|---|
draw(data, options) |
ไม่มี | วาดแผนภูมิ |
กิจกรรม
คุณสามารถลงทะเบียนเพื่อฟังเหตุการณ์ที่อธิบายไว้ในหน้าแผนภูมิรูปภาพทั่วไป