การแสดงภาพ: แผนภูมิแท่ง (เวอร์ชันเก่า)

เลิกใช้

การแสดงภาพนี้ได้แทนที่ด้วยเวอร์ชันใหม่แล้ว โปรดใช้ภาพนี้แทน โปรดดูหน้าบันทึกประจํารุ่นเพื่อให้ย้ายข้อมูลได้ง่ายๆ

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

ภาพรวม

แผนภูมิแท่งแนวนอนที่แสดงผลในเบราว์เซอร์โดยใช้ SVG หรือ VML แสดงเคล็ดลับเมื่อคลิกที่จุด ทําให้มีภาพเคลื่อนไหวเมื่อคลิกที่รายการคําอธิบาย ดูเวอร์ชันแนวตั้งของแผนภูมินี้ได้ที่แผนภูมิคอลัมน์

โดย Google

ตัวอย่าง

เขียนโค้ดด้วยตัวเองในภาพ Playground

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["barchart"]});
      google.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.BarChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

กําลังโหลด

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

  google.load("visualization", "1", {packages: ["barchart"]});

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

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

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

แต่ละแถวในตารางแสดงกลุ่มของแถบที่อยู่ติดกัน

คอลัมน์แรกในตารางควรเป็นสตริงและแสดงถึงป้ายกํากับของแถบกลุ่มนั้น คอลัมน์บางคอลัมน์สามารถติดตามได้ แต่ละตัวเลขแสดงแท่งที่มีสีเดียวกันและมีตําแหน่งสัมพัทธ์ในแต่ละกลุ่ม

ค่าในแถวและคอลัมน์ที่ระบุจะควบคุมความสูงของแถบเดียวที่แสดงด้วยแถวและคอลัมน์นี้

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

ชื่อ ประเภท ค่าเริ่มต้น คำอธิบาย
สีแกน สตริงหรือออบเจ็กต์ สีเริ่มต้น สีของแกน ค่าที่เป็นไปได้คือค่าของตัวเลือกการกําหนดค่า backgroundColor
สีพื้นหลังแกน สตริงหรือออบเจ็กต์ สีเริ่มต้น เส้นขอบรอบพื้นหลังของแกน ค่าที่เป็นไปได้คือค่าของตัวเลือกการกําหนดค่า backgroundColor
ขนาดแบบอักษรของแกน number อัตโนมัติ ขนาดแบบอักษรของข้อความแกนแผนภูมิเป็นพิกเซล
สีพื้นหลัง สตริงหรือออบเจ็กต์ สีเริ่มต้น สีพื้นหลังของพื้นที่หลักของแผนภูมิ อาจเป็นตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้
  • สตริงที่มีสีที่ HTML รองรับ เช่น "แดง" หรือ "#00cc00"
  • ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ stroke fill และ strokeSize stroke และ fill ควรเป็นสตริงที่มีสี strSize เป็นตัวเลข เช่น {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1} หากต้องการใช้แค่เติมเส้นโดยไม่เติมคํา ให้ใช้ stroke:null, strokeSize: 0
เส้นขอบสี สตริงหรือออบเจ็กต์ สีเริ่มต้น เส้นขอบรอบองค์ประกอบแผนภูมิ ค่าที่เป็นไปได้คือค่าของตัวเลือกการกําหนดค่า backgroundColor
สี อาร์เรย์ของสตริงหรือออบเจ็กต์ สีเริ่มต้น

อาร์เรย์สี ซึ่งแต่ละองค์ประกอบระบุสีของชุดเดียว คุณควรระบุองค์ประกอบอาร์เรย์ 1 รายการสําหรับแต่ละชุด

  • หาก is3D=false อาร์เรย์นี้จะเป็นสี HTML เช่น สี:['#00FF00','orange']
  • หาก is3D=true ตัวแปรนี้จะเป็นอาร์เรย์ของสี HTML หรือออบเจ็กต์ประเภทนี้ ซึ่งได้แก่ {color:face_color, darker:shade_color} โดยที่ color คือสีใบหน้าขององค์ประกอบ และ darker คือสีร่ม อย่างไรก็ตาม หากคุณระบุสี HTML สําหรับออบเจ็กต์ 3 มิติ ใบหน้าและร่มเงาจะเป็นสีเดียวกัน และเอฟเฟกต์ 3 มิติจะลดลง ตัวอย่าง: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
เปิดใช้เคล็ดลับเครื่องมือ บูลีน จริง หากตั้งค่าเป็น "จริง" เคล็ดลับเครื่องมือจะแสดงเมื่อผู้ใช้คลิกที่แถบ
สีเส้นขอบแบบโฟกัส สตริงหรือออบเจ็กต์ สีเริ่มต้น เส้นขอบรอบองค์ประกอบแผนภูมิที่โฟกัส (เมาส์ชี้) ค่าที่เป็นไปได้คือค่าของตัวเลือกการกําหนดค่า backgroundColor
ความสูง number ความสูงของคอนเทนเนอร์ ความสูงของแผนภูมิเป็นพิกเซล
3 มิติ บูลีน เท็จ หากตั้งค่าเป็น "จริง" จะแสดงการเปลี่ยนแปลง 3 มิติ
วางซ้อนกัน บูลีน เท็จ หากตั้งค่าเป็น "จริง" ค่าบรรทัดจะซ้อนกัน (สะสม)
คําอธิบาย สตริง "ขวา" ตําแหน่งและประเภทคําอธิบาย อาจมีสถานะใดสถานะหนึ่งดังต่อไปนี้
  • "right" - ทางด้านขวาของแผนภูมิ
  • "left" - ทางด้านซ้ายของแผนภูมิ
  • "ด้านบน" - เหนือแผนภูมิ
  • "bottom" - ที่อยู่ใต้แผนภูมิ
  • "none" - จะไม่แสดงคําอธิบาย
สีพื้นหลังคําอธิบาย สตริงหรือออบเจ็กต์ สีเริ่มต้น สีพื้นหลังของพื้นที่คําอธิบายแผนภูมิ ค่าที่เป็นไปได้คือค่าของตัวเลือกการกําหนดค่า backgroundColor
คําอธิบายขนาดตัวอักษร number อัตโนมัติ ขนาดแบบอักษรของคําอธิบายในหน่วยพิกเซล
สีข้อความคําอธิบาย สตริงหรือออบเจ็กต์ สีเริ่มต้น สีข้อความคําอธิบาย ค่าที่เป็นไปได้คือค่าของตัวเลือกการกําหนดค่า backgroundColor
ระดับการบันทึก บูลีน เท็จ หากเป็นจริง แกนหลักควรปรับขนาดตามลอการิทึม
สูงสุด number อัตโนมัติ ระบุเส้นตารางแกน Y สูงสุด เส้นตารางจริงจะมากกว่า 2 ค่า ได้แก่ ค่าตัวเลือกสูงสุด หรือค่าข้อมูลสูงสุด โดยให้ปัดเศษขึ้นเป็นเครื่องหมายตารางถัดไปที่สูงขึ้น
นาที number อัตโนมัติ ระบุเส้นตารางแกน Y ต่ําสุด เส้นตารางจริงจะต่ํากว่า 2 ค่า ได้แก่ ค่าตัวเลือกขั้นต่ํา หรือค่าข้อมูลที่ต่ําที่สุด โดยให้ปัดเศษเป็นเครื่องหมายตารางถัดไปที่ต่ําลง
ย้อนกลับแกน บูลีน จริง หากตั้งค่าเป็น "จริง" (ค่าเริ่มต้น) จะใช้หมวดหมู่จากด้านบนลงล่าง หากตั้งค่าเป็น "เท็จ" จะวาดแถบด้านล่างขึ้น
แสดงหมวดหมู่ บูลีน จริง หากเป็น "จริง" จะแสดงป้ายกํากับหมวดหมู่ หากเป็น "เท็จ" จะไม่เป็นเช่นนั้น
title สตริง ไม่มีชื่อ ข้อความที่จะแสดงเหนือแผนภูมิ
ชื่อ X สตริง ไม่มีชื่อ ข้อความที่จะแสดงใต้แกนแนวนอน
ชื่อ Y สตริง ไม่มีชื่อ ข้อความที่จะแสดงตามแกนแนวตั้ง
สีชื่อ สตริงหรือออบเจ็กต์ สีเริ่มต้น สีของชื่อแผนภูมิ ค่าที่เป็นไปได้คือค่าของตัวเลือกการกําหนดค่า backgroundColor
ขนาดแบบอักษรของชื่อ number อัตโนมัติ ขนาดแบบอักษรสําหรับชื่อแผนภูมิในหน่วยพิกเซล

เคล็ดลับเครื่องมือขนาดแบบอักษร		 number 11 ขนาดแบบอักษรของข้อความเคล็ดลับเครื่องมือ ซึ่งอาจลดลง หากเคล็ดลับเครื่องมือมีขนาดเล็กเกินกว่าที่จะถือข้อความในแบบอักษรที่ระบุ
เคล็ดลับเครื่องมือ
 number 60 ความสูงของเคล็ดลับเครื่องมือเป็นพิกเซล ความสูงของเคล็ดลับเครื่องมือจะคงที่ และจะไม่ขยายหรือย่อให้พอดีกับขนาดหรือขนาดแบบอักษรของข้อความ แต่จะครอบตัดส่วนเกิน 1/3 ของความสูงของแผนภูมิ
ความกว้างของเคล็ดลับเครื่องมือ number 120 ความกว้างของเคล็ดลับเครื่องมือเป็นพิกเซล ความกว้างของเคล็ดลับเครื่องมือคงที่ โดยจะไม่ขยายหรือย่อให้พอดีกับขนาดหรือขนาดแบบอักษรของข้อความ แต่จะครอบตัดที่มีขนาดใหญ่กว่าความกว้างของแผนภูมิ
ความกว้าง number ความกว้างของคอนเทนเนอร์ ความกว้างของแผนภูมิเป็นพิกเซล

เมธอด

วิธีการ ประเภทการแสดงผล คำอธิบาย
draw(data, options) ไม่มี วาดแผนภูมิ
getSelection() อาร์เรย์ขององค์ประกอบการเลือก การใช้งาน getSelection() มาตรฐาน องค์ประกอบที่เลือกคือองค์ประกอบคอลัมน์และเซลล์ เลือกผู้ใช้ได้เพียง 1 คอลัมน์หรือ 1 เซลล์ต่อครั้งเท่านั้น
setSelection() ไม่มี การใช้งาน setSelection() มาตรฐาน แต่รองรับการเลือกองค์ประกอบเพียงรายการเดียว ปฏิบัติต่อการเลือกทุกรายการเป็นคอลัมน์หรือการเลือกเซลล์ โปรดทราบว่าคุณไม่สามารถเลือกคอลัมน์ป้ายกํากับได้

เหตุการณ์

ชื่อ คำอธิบาย พร็อพเพอร์ตี้
onmouseover เริ่มทํางานเมื่อผู้ใช้วางเมาส์เหนือแถบและส่งผ่านดัชนีแถวและคอลัมน์ของเซลล์ที่เกี่ยวข้อง แถว คอลัมน์
onmouseout เริ่มทํางานเมื่อผู้ใช้นําเมาส์ออกจากแถบและส่งผ่านดัชนีแถวและคอลัมน์ของเซลล์ที่เกี่ยวข้อง แถว คอลัมน์
ready แผนภูมินี้พร้อมสําหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีการเรียกใช้หลังจากวาด คุณควรตั้งค่า Listener สําหรับเหตุการณ์นี้ก่อนที่เรียกใช้เมธอด draw และเรียกใช้หลังจากที่เหตุการณ์เริ่มทํางานเท่านั้น ไม่มี
select เริ่มทํางานเมื่อผู้ใช้คลิกแถบหรือคําอธิบาย เมื่อเลือกแถบ ระบบจะเลือกเซลล์ที่เกี่ยวข้องในตารางข้อมูล เมื่อเลือกคอลัมน์ ระบบจะเลือกคอลัมน์ที่เกี่ยวข้องในตารางข้อมูล หากต้องการดูสิ่งที่เลือกโทรหา getSelection() ไม่มี

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

โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ ทั้งนี้จะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ