แผนภูมิรูปภาพแท่งเทียน

สำคัญ: ส่วนแผนภูมิรูปภาพของเครื่องมือ Google แผนภูมิได้เลิกใช้งานอย่างเป็นทางการเมื่อวันที่ 20 เมษายน 2012 และจะยังใช้งานต่อตามนโยบายการเลิกใช้งาน

  1. ภาพรวม
  2. ตัวอย่าง
  3. กำลังโหลด
  4. รูปแบบข้อมูล
  5. ตัวเลือกการกำหนดค่า
  6. เมธอด
  7. เหตุการณ์
  8. นโยบายข้อมูล

ภาพรวม

แผนภูมิแท่งเทียนที่แสดงผลเป็นรูปภาพโดยใช้ 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) ไม่มี วาดแผนภูมิ

กิจกรรม

คุณสามารถลงทะเบียนเพื่อฟังเหตุการณ์ที่อธิบายไว้ในหน้าแผนภูมิรูปภาพทั่วไป

นโยบายข้อมูล

โปรดดูนโยบายการบันทึก Chart API