การแสดงภาพ: แผนภูมิแท่ง (รูปภาพ)

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

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

ภาพรวม

แผนภูมิแท่งที่แสดงผลเป็นรูปภาพโดยใช้ 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:["imagebarchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.ImageBarChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

กําลังโหลด

ชื่อแพ็กเกจ google.charts.load คือ "imagebarchart" 

  google.charts.load("current", {packages: [[]"imagebarchart"]});

ชื่อคลาสของการแสดงภาพคือ google.visualization.ImageBarChart 

  var visualization = new google.visualization.ImageBarChart(container);

รูปแบบข้อมูล

คอลัมน์แรกควรเป็นสตริงและจะมีป้ายกํากับหมวดหมู่ คอลัมน์กี่คอลัมน์ก็ได้ที่ติดตาม ทั้งหมดต้องเป็นตัวเลข แต่ละคอลัมน์จะแสดงเป็นชุดบาร์ เมื่อตารางข้อมูลมีคอลัมน์ตัวเลขมากกว่า 1 คอลัมน์ ค่าในแถวจะแสดงเป็นแถบแบบซ้อน

ตัวเลือกการกําหนดค่า

ชื่อ ประเภท ค่าเริ่มต้น คำอธิบาย
สีพื้นหลัง สตริง "#FFFFFF" (สีขาว) สีพื้นหลังของแผนภูมิในรูปแบบสี API ของแผนภูมิ
สี อาร์เรย์<string> อัตโนมัติ ใช้เพื่อกําหนดสีเฉพาะให้กับชุดข้อมูลแต่ละชุด สีระบุอยู่ในรูปแบบสี API ของแผนภูมิ สี i ใช้กับคอลัมน์ข้อมูล i ซึ่งล้อมรอบจุดเริ่มต้นหากมีคอลัมน์ข้อมูลมากกว่าสี หากชุดสีเดียวยอมรับได้ทุกชุด ให้ใช้ตัวเลือก color แทน
เปิดใช้เหตุการณ์ บูลีน เท็จ ทําให้แผนภูมิส่งเหตุการณ์ที่ทริกเกอร์ผู้ใช้ เช่น การคลิกหรือเมาส์ รองรับเฉพาะแผนภูมิบางประเภทเท่านั้น ดูเหตุการณ์ด้านล่าง
ความสูง number ความสูงของคอนเทนเนอร์ ความสูงของแผนภูมิเป็นพิกเซล
วางซ้อนกัน บูลีน จริง ควบคุมว่าจะแสดงคอลัมน์ข้อมูลหลายคอลัมน์เป็นแถบแบบซ้อน (แทนการจัดกลุ่ม) หรือไม่
แนวตั้ง บูลีน เท็จ ควบคุมว่าแถบจะเป็นแนวตั้งหรือไม่
คําอธิบาย สตริง "ขวา" ตําแหน่งและประเภทคําอธิบาย อาจมีสถานะใดสถานะหนึ่งดังต่อไปนี้
  • "right" - ทางด้านขวาของแผนภูมิ
  • "left" - ทางด้านซ้ายของแผนภูมิ
  • "ด้านบน" - เหนือแผนภูมิ
  • "bottom" - ที่อยู่ใต้แผนภูมิ
  • "none" - จะไม่แสดงคําอธิบาย
สูงสุด number อัตโนมัติ ค่าสูงสุดที่จะแสดงในแกน Y
นาที number อัตโนมัติ ค่าต่ําสุดที่จะแสดงในแกน Y
แสดงป้ายกํากับหมวดหมู่ บูลีน จริง หากตั้งค่าเป็น "เท็จ" ให้นําป้ายกํากับหมวดหมู่ออก
แสดงป้ายกํากับค่า บูลีน จริง หากตั้งค่าเป็น "เท็จ" ให้นําป้ายกํากับของค่าออก
title สตริง ไม่มีชื่อ ข้อความที่จะแสดงเหนือแผนภูมิ
ระยะเวลาป้ายกํากับ number อัตโนมัติ ช่วงที่จะแสดงป้ายกํากับแกนค่า เช่น หาก min เท่ากับ 0, max คือ 100 และ valueLabelsInterval เท่ากับ 20 แผนภูมิจะแสดงป้ายกํากับแกนที่ (0, 20, 40, 60, 80 100)
ความกว้าง number ความกว้างของคอนเทนเนอร์ ความกว้างของแผนภูมิเป็นพิกเซล

เมธอด

วิธีการ ประเภทการแสดงผล คำอธิบาย
draw(data, options) ไม่มี วาดแผนภูมิ

เหตุการณ์

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

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

โปรดอ่านนโยบายการบันทึก API ของแผนภูมิ