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

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

  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 คอลัมน์ ค่าในแถวแนวนอนจะแสดงเป็นแถบซ้อนกัน

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

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

วิธีการ

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

กิจกรรม

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

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

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