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

เลิกใช้

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

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

ภาพรวม

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

โดย Google

ตัวอย่าง

เขียนโค้ดเองใน Visualization 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);

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

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

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

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

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

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

อาร์เรย์ของสี โดยที่องค์ประกอบแต่ละรายการระบุสีของ 1 ชุด คุณควรระบุองค์ประกอบอาร์เรย์ 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'}]}
enableTooltip boolean จริง หากตั้งค่าเป็น "จริง" เคล็ดลับเครื่องมือจะแสดงเมื่อผู้ใช้คลิกบนแถบ
focusBorderColor สตริงหรือออบเจ็กต์ สีเริ่มต้น เส้นขอบรอบองค์ประกอบของแผนภูมิที่อยู่ในโฟกัส (ชี้ด้วยเมาส์) ค่าที่เป็นไปได้เป็นค่าของตัวเลือกการกำหนดค่า backgroundColor
ส่วนสูง ตัวเลข ความสูงของคอนเทนเนอร์ ความสูงของแผนภูมิเป็นพิกเซล
เป็น 3 มิติ boolean false หากตั้งค่าเป็น "จริง" ระบบจะแสดงการเปลี่ยนแปลง 3 มิติ
isStacked boolean false หากตั้งค่าเป็น "จริง" ค่าของเส้นจะซ้อนกัน (สะสม)
คำอธิบาย string "ขวา" ตำแหน่งและประเภทของคำอธิบาย อาจมีสถานะใดสถานะหนึ่งดังต่อไปนี้
  • "ขวา" - ทางด้านขวาของแผนภูมิ
  • "ซ้าย" - ทางด้านซ้ายของแผนภูมิ
  • "top" - เหนือแผนภูมิ
  • "bottom" - ใต้แผนภูมิ
  • "none" - ไม่แสดงคำอธิบาย
legendBackgroundColor สตริงหรือออบเจ็กต์ สีเริ่มต้น สีพื้นหลังของส่วนคำอธิบายแผนภูมิ ค่าที่เป็นไปได้เป็นค่าของตัวเลือกการกำหนดค่า backgroundColor
legendFontSize ตัวเลข อัตโนมัติ ขนาดแบบอักษรของคำอธิบายในหน่วยพิกเซล
legendTextColor สตริงหรือออบเจ็กต์ สีเริ่มต้น สีข้อความของคำอธิบาย ค่าที่เป็นไปได้เป็นค่าของตัวเลือกการกำหนดค่า backgroundColor
logScale boolean false หากจริง แกนหลักควรปรับขนาดแบบลอการิทึม
สูงสุด ตัวเลข อัตโนมัติ ระบุเส้นตารางของแกน Y สูงสุด เส้นตารางจริงจะมีค่ามากกว่าจาก 2 ค่า ได้แก่ ค่าตัวเลือกสูงสุดหรือค่าของข้อมูลสูงสุด ปัดขึ้นเป็นเครื่องหมายตารางกริดที่สูงขึ้นถัดไป
นาที ตัวเลข อัตโนมัติ ระบุเส้นตารางของแกน Y ที่ต่ำที่สุด เส้นตารางจริงจะน้อยกว่าของ 2 ค่า ซึ่งได้แก่ ค่าตัวเลือกต่ำสุดหรือค่าข้อมูลต่ำสุด ที่ปัดเศษลงเป็นเครื่องหมายตารางกริดที่อยู่ด้านล่างถัดไป
reverseAxis boolean จริง หากตั้งค่าเป็น "จริง" (ค่าเริ่มต้น) จะวาดหมวดหมู่จากบนลงล่าง หากตั้งค่าเป็น "เท็จ" จะวาดแท่งจากด้านล่างขึ้นบน
showCategories boolean จริง หากจริง จะแสดงป้ายกำกับหมวดหมู่ หากเป็น "เท็จ" จะไม่ส่งผลกระทบ
title string ไม่มีชื่อ ข้อความที่จะแสดงเหนือแผนภูมิ
titleX string ไม่มีชื่อ ข้อความที่จะแสดงใต้แกนแนวนอน
titleY string ไม่มีชื่อ ข้อความที่จะแสดงตามแกนแนวตั้ง
titleColor สตริงหรือออบเจ็กต์ สีเริ่มต้น สีของชื่อแผนภูมิ ค่าที่เป็นไปได้เป็นค่าของตัวเลือกการกำหนดค่า backgroundColor
titleFontSize ตัวเลข อัตโนมัติ ขนาดแบบอักษรของชื่อแผนภูมิเป็นพิกเซล

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

วิธีการ

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

กิจกรรม

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

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

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