หน้านี้ได้รับการแปลโดย Cloud Translation API

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

เลิกใช้

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

ภาพรวม

แผนภูมิพื้นที่ที่แสดงผลภายในเบราว์เซอร์โดยใช้ 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:["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);

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

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

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

ชื่อ	ประเภท	ค่าเริ่มต้น	คำอธิบาย
สีแกน	สตริงหรือออบเจ็กต์	สีเริ่มต้น	สีของแกน ค่าที่เป็นไปได้คือค่าของตัวเลือกการกําหนดค่า backgroundColor
สีพื้นหลังแกน	สตริงหรือออบเจ็กต์	สีเริ่มต้น	เส้นขอบรอบพื้นหลังของแกน ค่าที่เป็นไปได้คือค่าของตัวเลือกการกําหนดค่า backgroundColor
ขนาดแบบอักษรของแกน	number	อัตโนมัติ	ขนาดแบบอักษรของข้อความแกนแผนภูมิเป็นพิกเซล
สีพื้นหลัง	สตริงหรือออบเจ็กต์	สีเริ่มต้น	สีพื้นหลังของพื้นที่หลักของแผนภูมิ อาจเป็นตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้ สตริงที่มีสีที่ HTML รองรับ เช่น "แดง" หรือ "#00cc00" ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ `stroke` `fill` และ `strokeSize` `stroke` และ `fill` ควรเป็นสตริงที่มีสี strSize เป็นตัวเลข เช่น `{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}` หากต้องการใช้แค่เติมเส้นโดยไม่เติมคํา ให้ใช้ `stroke:null, strokeSize: 0`
เส้นขอบสี	สตริงหรือออบเจ็กต์	สีเริ่มต้น	เส้นขอบรอบองค์ประกอบแผนภูมิ ค่าที่เป็นไปได้คือค่าของตัวเลือกการกําหนดค่า backgroundColor
สี	อาร์เรย์ของสตริง	สีเริ่มต้น	สีที่ใช้สําหรับองค์ประกอบของแผนภูมิ อาร์เรย์ของสตริง องค์ประกอบแต่ละรายการเป็นสตริงที่เป็นสีที่ HTML รองรับ เช่น "แดง" หรือ "#00cc00"
เปิดใช้เคล็ดลับเครื่องมือ	บูลีน	จริง	หากตั้งค่าเป็น "จริง" เคล็ดลับเครื่องมือจะแสดงเมื่อผู้ใช้คลิกที่จุดข้อมูล
สีเส้นขอบแบบโฟกัส	สตริงหรือออบเจ็กต์	สีเริ่มต้น	เส้นขอบรอบองค์ประกอบแผนภูมิที่โฟกัส (เมาส์ชี้) ค่าที่เป็นไปได้คือค่าของตัวเลือกการกําหนดค่า backgroundColor
ความสูง	number	ความสูงของคอนเทนเนอร์	ความสูงของแผนภูมิเป็นพิกเซล
วางซ้อนกัน	บูลีน	เท็จ	หากตั้งค่าเป็น "จริง" ค่าบรรทัดจะซ้อนกัน (สะสม)
คําอธิบาย	สตริง	"ขวา"	ตําแหน่งและประเภทคําอธิบาย อาจมีสถานะใดสถานะหนึ่งดังต่อไปนี้ "right" - ทางด้านขวาของแผนภูมิ "left" - ทางด้านซ้ายของแผนภูมิ "ด้านบน" - เหนือแผนภูมิ "bottom" - ที่อยู่ใต้แผนภูมิ "none" - จะไม่แสดงคําอธิบาย
สีพื้นหลังคําอธิบาย	สตริงหรือออบเจ็กต์	สีเริ่มต้น	สีพื้นหลังของพื้นที่คําอธิบายแผนภูมิ ค่าที่เป็นไปได้คือค่าของตัวเลือกการกําหนดค่า backgroundColor
คําอธิบายขนาดตัวอักษร	number	อัตโนมัติ	ขนาดแบบอักษรของคําอธิบายในหน่วยพิกเซล
สีข้อความคําอธิบาย	สตริงหรือออบเจ็กต์	สีเริ่มต้น	สีข้อความคําอธิบาย ค่าที่เป็นไปได้คือค่าของตัวเลือกการกําหนดค่า backgroundColor
ขนาดบรรทัด	number	2	ความกว้างของเส้นเป็นพิกเซล ใช้ 0 เพื่อซ่อนเส้นทั้งหมดและแสดงเฉพาะจุด
ระดับการบันทึก	บูลีน	เท็จ	หากเป็นจริง แกนหลักควรปรับขนาดตามลอการิทึม
สูงสุด	number	อัตโนมัติ	ระบุเส้นตารางแกน Y สูงสุด เส้นตารางจริงจะมากกว่า 2 ค่า ได้แก่ ค่าตัวเลือกสูงสุด หรือค่าข้อมูลสูงสุด โดยให้ปัดเศษขึ้นเป็นเครื่องหมายตารางถัดไปที่สูงขึ้น
นาที	number	อัตโนมัติ	ระบุเส้นตารางแกน Y ต่ําสุด เส้นตารางจริงจะต่ํากว่า 2 ค่า ได้แก่ ค่าตัวเลือกขั้นต่ํา หรือค่าข้อมูลที่ต่ําที่สุด โดยให้ปัดเศษเป็นเครื่องหมายตารางถัดไปที่ต่ําลง
ขนาดจุด	number	3	ขนาดของจุดที่แสดงเป็นพิกเซล ใช้ 0 เพื่อซ่อนจุดทั้งหมด
ย้อนกลับแกน	บูลีน	เท็จ	หากตั้งค่าเป็น "จริง" จะวาดหมวดหมู่จากขวาไปซ้าย ค่าเริ่มต้นคือวาดจากซ้ายไปขวา
แสดงหมวดหมู่	บูลีน	จริง	หากเป็น "จริง" จะแสดงป้ายกํากับหมวดหมู่ หากเป็น "เท็จ" จะไม่เป็นเช่นนั้น
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()`	ไม่มี

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

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