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

เลิกใช้

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

ภาพรวม

แผนภูมิพื้นที่ที่แสดงผลภายในเบราว์เซอร์โดยใช้ 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:["areachart"]});
      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.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

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

กำลังโหลด

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

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

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

  var visualization = new google.visualization.AreaChart(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
สี อาร์เรย์ของสตริง สีเริ่มต้น สีที่ใช้สำหรับองค์ประกอบของแผนภูมิ อาร์เรย์ของสตริง องค์ประกอบแต่ละรายการคือสตริงที่เป็นสีที่ HTML รองรับ เช่น "แดง" หรือ "#00cc00"
enableTooltip boolean จริง หากตั้งค่าเป็น "จริง" เคล็ดลับเครื่องมือจะแสดงเมื่อผู้ใช้คลิกที่จุดข้อมูล
focusBorderColor สตริงหรือออบเจ็กต์ สีเริ่มต้น เส้นขอบรอบองค์ประกอบของแผนภูมิที่อยู่ในโฟกัส (ชี้ด้วยเมาส์) ค่าที่เป็นไปได้เป็นค่าของตัวเลือกการกำหนดค่า backgroundColor
ส่วนสูง ตัวเลข ความสูงของคอนเทนเนอร์ ความสูงของแผนภูมิเป็นพิกเซล
isStacked boolean false หากตั้งค่าเป็น "จริง" ค่าของเส้นจะซ้อนกัน (สะสม)
คำอธิบาย string "ขวา" ตำแหน่งและประเภทของคำอธิบาย อาจมีสถานะใดสถานะหนึ่งดังต่อไปนี้
  • "ขวา" - ทางด้านขวาของแผนภูมิ
  • "ซ้าย" - ทางด้านซ้ายของแผนภูมิ
  • "top" - เหนือแผนภูมิ
  • "bottom" - ใต้แผนภูมิ
  • "none" - ไม่แสดงคำอธิบาย
legendBackgroundColor สตริงหรือออบเจ็กต์ สีเริ่มต้น สีพื้นหลังของส่วนคำอธิบายแผนภูมิ ค่าที่เป็นไปได้เป็นค่าของตัวเลือกการกำหนดค่า backgroundColor
legendFontSize ตัวเลข อัตโนมัติ ขนาดแบบอักษรของคำอธิบายในหน่วยพิกเซล
legendTextColor สตริงหรือออบเจ็กต์ สีเริ่มต้น สีข้อความของคำอธิบาย ค่าที่เป็นไปได้เป็นค่าของตัวเลือกการกำหนดค่า backgroundColor
lineSize ตัวเลข 2 ความกว้างของเส้นเป็นพิกเซล ใช้ศูนย์เพื่อซ่อนเส้นทั้งหมดและแสดงเฉพาะจุด
logScale boolean false หากจริง แกนหลักควรปรับขนาดแบบลอการิทึม
สูงสุด ตัวเลข อัตโนมัติ ระบุเส้นตารางของแกน Y สูงสุด เส้นตารางจริงจะมีค่ามากกว่าจาก 2 ค่า ได้แก่ ค่าตัวเลือกสูงสุดหรือค่าของข้อมูลสูงสุด ปัดขึ้นเป็นเครื่องหมายตารางกริดที่สูงขึ้นถัดไป
นาที ตัวเลข อัตโนมัติ ระบุเส้นตารางของแกน Y ที่ต่ำที่สุด เส้นตารางจริงจะน้อยกว่าของ 2 ค่า ซึ่งได้แก่ ค่าตัวเลือกต่ำสุดหรือค่าข้อมูลต่ำสุด ที่ปัดเศษลงเป็นเครื่องหมายตารางกริดที่อยู่ด้านล่างถัดไป
pointSize ตัวเลข 3 ขนาดของจุดที่แสดงในหน่วยพิกเซล ใช้ศูนย์เพื่อซ่อนจุดทั้งหมด
reverseAxis boolean false หากตั้งค่าเป็น "จริง" จะวาดหมวดหมู่จากขวาไปซ้าย ค่าเริ่มต้นคือวาดจากซ้ายไปขวา
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() ไม่มี

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

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